Reload the same grid with different set of data on click of image inside grid

Question

I am using a kendo grid and inside the grid i have a column in which i have an image,when i click on the image i have to reload the grid.I am not sure which one is better suited for such requirement whether to use kendo mvc grid or kendo UI javascript.

I am currently using Kendo MVC Grid,but not sure how to reload the grid with other set of data.Can someone please guide me how to go for this requirement.Just a high level view.i have to also implement custom paging for this 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"))

Could you please post your solution if you have found any? – Akbari Sep 28 '16 at 09:59 — Akbari, Sep 28 '16 at 09:59

score 0 · Answer 1 · answered Oct 09 '15 at 07:05

If the new set of data is returned from the same URL you can simply call the "read" method of the Grid DataSource on the client side, and new request to the server will be made with the additional data from the "additionalInfo" function.

score 0 · Accepted Answer · edited May 23 '17 at 12:19

This is using javascript

basic commands for reloading Grid with different data:

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

How to send optional data to pick which datasource to use or filter ajax read can be done in image click event and your "additionalInfo" javascript function

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

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

Hi, did my answer help you solve your issue? If yes, could you please mark my reply as an answer? That way, people who find the question using Google can have more assurance that the answer is correct. Thanks in advance. — Vladimir Iliev, Oct 23 '15 at 07:30

Reload the same grid with different set of data on click of image inside grid

2 Answers2