点击网格内的图像,使用不同的数据集重新加载相同的网格

时间:2015-10-09 03:18:48

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

我正在使用剑道网格,在网格中我有一个列,其中我有一个图像,当我点击图像时我必须重新加载网格。我不确定哪一个更适合这样的要求是否使用 kendo mvc grid或kendo UI javascript。

我目前正在使用Kendo MVC Grid,但不知道如何使用其他数据集重新加载网格。有人请指导我如何满足此要求。只需要高级别的视图。我还必须实现自定义分页这个网格。

 @(Html.Kendo().Grid<WebApp.Models.IndexModels>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.FolderName).ClientTemplate("# if (FolderName!=null) { #" +
                "<listleft><img title='' src='" + Url.Content("/RMS/Content/Images/folder.gif") + "'\"/><file-folder-names><a data-role=\"button\" onclick=\"onClickDoc('#: data.ObjectId#', '#: data.objectType#');\" id=\"testa\">#:FolderName#</a></file-folder-names></listleft><listright><img class=\"make-fav vAlign\" src='" + Url.Content("/RMS/Content/Images/u837.png") + "'\"/><img class=\"vAlign object-file-options\" src='" + Url.Content("/RMS/Content/Images/context-menu-down-arrow.png") + "'\"/><div class=\"checkbox\"></div></listright>" +
        "# } else { #" +
        "<listleft># if (IsVirtualDoc==\"1\") { #<img class='show-sub-grid' src-swap='/RMS/Content/Images/virtual-doc-close.png' src='/RMS/Content/Images/virtual-doc-show.png' /># } #<img title='' src=\"#:ImagePath#\"\"/><file-folder-names><a data-role=\"button\" href=\"/RMS/Home/GetDocumentContent?objId=#:ObjectId#\" target=\"_blank\" id=\"testa\">#:DocumentName#</a></file-folder-names><br /><span class=\"details\">#:DocumentSize# bytes <span class=\"paddingLR10\">|</span> #:DocumentCreatedDate# :# if (!(DocumentCreatedby==null)) { # <a href=\"\"> #:DocumentCreatedby# </a> # } #</span></listleft><listright><img class=\"make-fav vAlign\" src='" + Url.Content("/RMS/Content/Images/u837.png") + "'\"/><img class=\"vAlign object-file-options\" src='" + Url.Content("/RMS/Content/Images/context-menu-down-arrow.png") + "'\"/><div class=\"checkbox\"></div></listright>" +

         "# } #"
         );

    })
    .Sortable()    
    .Pageable(pageable => pageable.ButtonCount(5))
    .EnableCustomBinding(true)
    .Scrollable()    
    .ClientDetailTemplateId("template")
    .HtmlAttributes(new { style = "height:400px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
    .Read(read => read.Action("ReadDataonPaging", "Home").Data("additionalInfo"))
    )
    .Events(events => events.DataBound("dataBound"))

2 个答案:

答案 0 :(得分:0)

如果从同一个URL返回新的数据集,您只需调用&#34; read&#34;客户端的Grid DataSource的方法,以及来自&#34; additionalInfo&#34;的附加数据的服务器的新请求。功能。

答案 1 :(得分:0)

这是使用javascript

使用不同数据重新加载Grid的基本命令:

option 1: use same datasourse

    $('#GridName').data('kendoGrid').dataSource.read();
    $('#GridName').data('kendoGrid').refresh();

https://stackoverflow.com/a/18399994/423356

option 2: use different datasource: (must be initilized)

    $("#GridName").data("kendoGrid").setDataSource(differentDatasourceInitialized);
    $('#GridName').data('kendoGrid').dataSource.read();
    $('#GridName').data('kendoGrid').refresh();

http://www.telerik.com/forums/grid-datasource-option-vs-setdatasource-method#UbC2YiGq2E2aFa-CnFeh7A

如何发送可选数据以选择要使用的数据源或过滤ajax读取可以在图像点击事件和您的&#34; additionalInfo&#34; javascript函数

Read(read => read.Action("ReadDataonPaging", "Home").Data("additionalInfo"))

http://www.telerik.com/forums/pass-additional-parameters-to-read-ajax-datasource-method---mvc#6-wwFQboTECQByGUQYKKhw