0

我正在使用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);

我的问题是如何配置网格以便在单击操作链接时显示 ajax 加载器，直到呈现编辑视图？

4

2 回答 2

0

您可以创建相对 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%;
}

在名为“edit”的 htmlAttributes 对象类中添加 imageActionLink（例如），并编写 click 事件处理程序：

$(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();
        }
    })
});
于 2013-09-30T22:45:02.213 回答
0

你可以这样做：

c.Bound(p => p.sID).Template(@<a href=\"YourLink\@item.sID\">Edit</a>).Title("Edit").Encoded(false); 
//encoded false = Html.Raw
于 2014-02-06T10:03:59.043 回答