kendo ui网格排序局部视图

时间:2014-02-11 09:14:44

标签: asp.net-mvc kendo-ui grid asp.net-mvc-partialview

我有一个包含3个局部视图的主视图。其中一个局部视图包含一个可以排序的剑道网格。

@(Html.Kendo().Grid(Model)
    .Name("tasksgrid")
    .Sortable()
    .Filterable()
    .HtmlAttributes(new { style = "height:100%; font-size:14px;" })
    .Columns(columns =>
    {
        columns.Bound(e => e.Url).Title("URL").Hidden();
        columns.Bound(e => e.Id).Title("ID").Hidden();

        columns.Template(@<img src="@item.OperatorCreated.ImageSource" style="width:80px;height:80px;"/>).ClientTemplate(" ").Width(100).Title("Picture");
        columns.Bound(e => e.Subject).Template(@<div>
            <div style="font-size: 20px;">@item.OperatorCreated.Name</div>
            <div>@item.Subject<br />@item.Message</div>
        </div>).Title("Details").HtmlAttributes(new {id = "detailcolumn"});
        columns.Bound(e => e.DateTimeCreated).Title("Date").Width(100).HtmlAttributes(new { id = "datecolumn" });
    })        
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
        .DataSource(dataSource => dataSource
            .Server()
            .Model(model => model.Id(p => p.Id))
        )
    .Events(events => events.Change("onChange"))
    .Scrollable()
)

仅当选择了另一个视图中的特定操作时,才会呈现此局部视图。然后,它会检索数据以填充网格。

function RefreshTasks(name) {
    var serviceUrl = "/Tasks/PopulateTasks?actionname=" + name;
    var request = $.post(serviceUrl);

    request.done(
        function (data) {
            $("#tasks").html(data);
        }
    );
}

在网格上完成排序时,会创建以下网址 &#34;本地主机:1772 / tasksgrid排序= DateTimeCreated-降序&安培; tasksgrid组=安培; tasksgrid滤波器=&#34; 刷新整个页面意味着我对网格的局部视图已不再存在。

有没有办法只将此网址投放到局部视图中。

我找到了一种方法,可以完全按照我的实施方式进行操作。

$("#tasksgrid .k-link").click(function (e) {//call the function when column header is clicked
    var thelink = e.target.href;//get the url that would be navigated to on sort

    var serviceUrl = thelink;
    var request = $.post(serviceUrl);//post the url

    request.done(
        function (data) {
            $("#tasks").html(data);//update div
        }
    );

    return false;//cancels navigation
})

1 个答案:

答案 0 :(得分:1)

您应该将网格配置为使用Ajax绑定。否则它将刷新整个页面。有关详细信息,请参阅documentation