Kendo UI Ajax Request

Question

Я использую Kendo UI Grid с ссылкой на действие в столбце шаблона клиента. Эта ссылка действия вызывает представление редактирования данных. Смотрите пример:

c.Bound(p => p.sID).ClientTemplate(@Html.ImageActionLink(Url.Content("~/Content/images/edit3.png"), "Edit", "Edit", new { id = "#= sID #" }, new { title = "Edit", id = "Edit", border = 0, hspace = 2 }).ToString() 
          ).Title("").Width(70).Filterable(false).Groupable(false).Sortable(false); 

Мой вопрос, как я могу настроить сетку, чтобы показать АЯКС погрузчиком, когда ссылка действие щелкнул, пока вид редактирования не визуализируется?

Answer 1

вы можете создать относительный DIV и вставить туда свою сетки и загрузчик обертку:

<div class="grid-wrapper"> 
    <div class="loading-wrapper"> 
     <div class='k-loading-image loading'></div> 
     <!-- k-loading-image is standart kendo class that show loading image --> 
    </div> 
    @(Html.Kendo().Grid()....) 
</div> 

CSS:

.grid-wrapper { 
    position: relative; 
} 
.loading-wrapper { 
    display: none; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
} 
.loading { 
    position: absolute; 
    height: 4em; 
    top: 50%; 
} 

добавить в imageActionLink в htmlAttributes класса объектов под названием "редактировать" (к примеру), и написать обработчик события нажмите:

$(document).on('click', '.edit', function (e) { 
    $('.loading-wrapper').show(); 
    $.ajax({ 
     // ajax opts  
     success: function(response) { 
      // insert your edit view received by ajax in right place 
      $('.loading-wrapper').hide(); 
     } 
    }) 
}); 

Answer 2

вы можете сделать это, как:

c.Bound(p => p.sID).Template(@<a href=\"YourLink\@item.sID\">Edit</a>).Title("Edit").Encoded(false); 
//encoded false = Html.Raw