[Solved] Need an example of Kendo UI Grid with button on top which passes selected checkbox values to update different grid in same view

[Gaurav]

2nd Grid is not refreshing.

Here is part of my code:

1st grid:

@(Html.Kendo().Grid<OpenInvoicesInfo>()

      .Name("OpenInvoiceGrid")
      .Events(e => e.DataBound("LineItems_Databound"))
      .ColumnMenu(i => i.Columns(false))
      .Columns(columns =>
      {
          columns.Bound(p => p.INVOICE).ClientTemplate("<input type='checkbox' value='#= INVOICE #' class='testclass'  />").Width(4);
          columns.Bound(i => i.INVOICE).Title("Invoice").Width(15);
          columns.Bound(i => i.ORDER_NBR).Title("Order").Width(10);

...

      .Scrollable()
      .ToolBar(i => { i.Custom().Text("Get All Invoices Comments").Url("javascript:GetAllInvoicesComments();"); })
      .Sortable()
      .Filterable()
      .DataSource(dataSource => dataSource
          .Ajax().UseJniErrorHandler()
          .PageSize(8)
          .Read(read => read.Action("GetOpenInvoices", "Maint", new { cust = Request.QueryString["cust"] }))
      )

 

2nd grid:

@(Html.Kendo().Grid<CustomerComments>()
      .Name("CustomerCommentsGrid")
      .AutoBind(false)
      .Columns(columns =>
      {
          columns.Bound(i => i.Invoice).Title("Invoice").Width(15);
          columns.Bound(i => i.Comment).Title("Comment").Width(40);

      }).Pageable(pageable => pageable
          .Refresh(true)
      )
      .Scrollable()
      .Sortable()
      .Filterable()
      .DataSource(dataSource => dataSource
          .Ajax().UseJniErrorHandler()
          .PageSize(10)
          //.Read(read => read.Action("GetCustomerComments", "Maint", new { invoices = "fail" }))
      )
)

 

<script type="text/javascript">

    function GetAllInvoicesComments() {
            var result = [];
            var items = $("#OpenInvoiceGrid").find(".testclass").filter(":checked");
            items.each(function () {
                result.push({
                    Value: $(this).val(),
                    Checked: true
                });
            });

            var invoicesList = "'";

            for (var i = 0; i < result.length; i++) {
                invoicesList = invoicesList + result[i].Value.trim() + '\',\'';
            }
            
            invoicesList = invoicesList.substring(0, invoicesList.length - 2);

            $.ajax({
                url: webManager.resolveUrl("~/maint/GetCustomerComments"), 
                method: "POST",
                data: { invoices: invoicesList },
                success: function () {
                    var grid = $('#CustomerCommentsGrid').data('kendoGrid');
                    grid.dataSource.read();
                    grid.refresh();
                    alert('success');
                },
                error: function () {
                    alert('an error occurred');
                }

            });
        }

 

Any help will be appreciated. Waiting for any replies.

 

Thank you.