This is a migrated thread and some comments may be shown as answers.

In Partial view using Kendo UI Grid pass selected checkbox values to update different grid in same view

4 Answers 361 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gaurav
Top achievements
Rank 1
Gaurav asked on 15 Jun 2016, 09:04 PM
     1st Grid in a partial view which is rendering fine:

    @(Html.Kendo().Grid<OpenInvoicesInfo>()
      .Name("OpenInvoiceGrid")
      .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);


    2nd grid rendering fine intially with initial given invoices but not sure how to get selected checkbox invocies from first grid and updated 2nd grid

    @(Html.Kendo().Grid<CustomerComments>()
      .Name("CustomerCommentsGrid")
      .ColumnMenu(i => i.Columns(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"))
      )
)

    <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
                });
            });

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

</script>

      2nd Grid's Controller - I am able to invoke and able to pass selected invoices in parameter:

        public ActionResult GetCustomerComments([DataSourceRequest] DataSourceRequest request, string invoices)
        {   
            invoices = "'F300003634','F300003764'";//hard coding to see it first time     
            List<JNI.Enterprise.Contracts.CustomerComments> customer = InvoiceService.GetCustomerComments(invoices);

            return Json(customer.ToDataSourceResult(request));
        }

Problem is it is again getting called because of this .Read(read => read.Action("GetCustomerComments", "Maint")) and I don't want to call them 2nd time only call once when page is loaded initially.

Thank you.

Also wondering is it possible to update grid if it is in different partail view?
Right now just FYI 2nd partial view with 2nd grid (from 1st partial view) is not loading.

4 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 20 Jun 2016, 08:30 AM

Hello Gaurav,

The easiest way is to send additional data to the read action method for the second grid as shown in this forum thread

When the check box is checked the DataSource read method can be called. In the additionalData function an information about the checked check box can be returned and accessed on the server. 

Regards,
Boyan Dimitrov
Telerik
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Gaurav
Top achievements
Rank 1
answered on 21 Jun 2016, 09:49 PM

I understand how to pass additional data as a parameter example I am doing this

.Read(read => read.Action("GetOpenInvoices", "Maint", new { cust = Request.QueryString["cust"] }))

Is it possible to have Parent/child  or grid/details grid to do without entity framwork meaning asking custom stored procedures for the data?

I have a grid with Invoices. I want user to select multiple checkboxes  and then click the button and based on that 2nd grid gets populated.

or have a parent grid loaded and based on checkboxes (invoice# which is a string) I click ask stored procedure to get me corresponding comments.

Initially 2nd grid is empty.

If you have any example that will be great.

I want an example without entity framework.

Please reply if there is any easy solution.

Thank you,

Gaurav

0
Boyan Dimitrov
Telerik team
answered on 23 Jun 2016, 03:04 PM

Hello Gaurav,

In this case I would suggest to use the Custom Binding approach. It allows you to bypass the built-in data processing and to handle operations such paging, sorting, filtering, and grouping yourself. This is supported both in the server-binding and Ajax-binding mode.

Regards,
Boyan Dimitrov
Telerik
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Gaurav
Top achievements
Rank 1
answered on 23 Jun 2016, 09:10 PM

I was able to solve my issue using following AJAX

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

Needed to know how to set datasource for the grid.

Tags
Grid
Asked by
Gaurav
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Gaurav
Top achievements
Rank 1
Share this question
or