Kendo UI Ajax Request - ajax

Question

I'm using Kendo UI Grid with an action link into a client-template column. This action link call an data edit view. See example:
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);
My question is how can I configure the grid in order to show an ajax loader when the action link is clicked, until the edit view is rendered?

Answer 1

you can create relative div and insert there your grid and loader wrapper:
<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%;
}
add to imageActionLink in htmlAttributes object class named "edit" (for example), and write click event handler:
$(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

you can do this like :
c.Bound(p => p.sID).Template(#Edit).Title("Edit").Encoded(false);
//encoded false = Html.Raw