Kendo UI Ajax Request

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?

Answers


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();
        }
    })
});

you can do this like :

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

Need Your Help

Using undefined number of arguments in mixins

css less less-mixins

I currently have -webkit specific attributes in my Less CSS sheet, I am trying to update them with mixins to add -moz attributes, like this:

NullReference Exception is thrown while getting a callback channel

wcf callback nullreferenceexception duplex contract

I am trying to get along with WCF's duplex contracts. A code from this article