Two grids on single page, one grid filtering other

[David]

Hello, I am trying to use two grids on single page, first one is loaded usingkendo wrapper this way

@(Html.Kendo().Grid<CPSkla.Models.WindScreen>()   

    .Name("GridWinds")

    .Columns(columns =>

    {

        columns.Bound(p => p.Id).Hidden();

        columns.Bound(p => p.Brand);

        columns.Bound(p => p.Model);

        columns.Bound(p => p.Year);

        columns.Bound(p => p.Specification);

        columns.Bound(p => p.Type);

        columns.Bound(p => p.Size);

        columns.Bound(p => p.EuroCode);

        columns.Bound(p => p.Price);

        columns.Bound(p => p.Source);

    })   

    .DataSource(dataSource => dataSource

        .Ajax()

        .Read(read => read.Action("WindscreenRead", "Calculation").Type(HttpVerbs.Post))

        .Model(model => model.Id(p => p.Id))      

    )

    .Pageable()

    .Sortable()

    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row).Enabled(true))

    .Events(events=>events.Change("AccessoriesBind"))

)

This works fine, but the other grid is supposed to be empty until user selects row from this first grid, so I am declaring just columns

@(

 Html.Kendo().Grid<CPSkla.Models.Accessory>().Name("GridAccessories").Columns(columns =>

  {

      columns.Bound(p => p.Id).Hidden();

      columns.Bound(p => p.Brand);

      columns.Bound(p => p.Model);

      columns.Bound(p => p.Year);

      columns.Bound(p => p.Specification);

      columns.Bound(p => p.Type);

      columns.Bound(p => p.Size);

      columns.Bound(p => p.EuroCode);

      columns.Bound(p => p.Price);

      columns.Bound(p => p.Source);

  })

  .Pageable()

  .Sortable()

  .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

  .DataSource(dataSource => dataSource

        .Ajax()

        .Model(model => model.Id(p => p.Id))

    )

)

Now I need to fill up the second grid according to selected row in first one, I am using jquery function declared on change event of first grid

<script>

    function AccessoriesBind() {

        var eucode = "";

        var grid = this;               

         

        grid.select().each(function() {

            var dataItem = grid.dataItem($(this));

            eucode += dataItem.EuroCode;

             

        });

        alert(eucode);

        var gridAcc = $("#GridAccessories").data("kendoGrid");

        gridAcc.DataSource = new kendo.data.DataSource({

            transport: {

                read: "/Calculation/AccessoriesRead/" + eucode,

                dataType: "json",

            }

        });

        gridAcc.DataSource.read();

 

    }

</script>

But this last few rows wont fill the table, I tried lots of approaches but always with the same result. My controller is returning valid values in JSON but the table with that return value wont fill up. I tried using generating another kendo grid using just Web UI function kendoGrid on DIV but it didnt wor either. Any advices? Please help.

[Nikolay Rusev]

Hello David,

See the attached project to see how this can be implemented.

Regards,
Nikolay Rusev
the Telerik team

[Marcos]

Hello,

 

I'm trying the Kendo UI #Jquery and I'm facing the same problem. Is possible to fix this in a jQuery based environment ?

[Konstantin Dikov]

Hello Marcos,

The same approach with the "data" function is applicable with the Kendo UI Grid widget. If you are experiencing problems with this approach you could share your code, so we can see what could be causing the issue.


Regards,
Konstantin Dikov
Progress Telerik

[Travis Cotton]

Konstantin,

I also want to have a parent grid with the detail grid below (not inline) using jQuery only. The question has been asked a few times in the forums, and the answer each time has been to provide a sample Visual Studio project, which doesn't help me. I followed the jQuery example and have a hierarchical grid working, but I want the parent grid on top, and a separate detail grid below. The detail grid should be empty until a row is selected in the parent, then related records populate in the detail. The only code that I could share is the hierarchical grid that I have working, which probably isn't useful for this question. I don't know where to start to have the two grids separate but still working together in this way. Can you provide a simple html/javascript example?

Thanks very much for any assistance.

[Travis Cotton]

I think I got it. Instantiated two grids on the page, set autoBind=false on grid2, set the change function on grid1 to:

change: function(e) {
  var selectedID = this.selectedKeyNames();
  grid2.dataSource.filter( { field: "my_key_field", operator: "eq", value: selectedID[0] });
  grid2.dataSource.read();
}

Seems to work. Is that the right way to go about it?

 

 

[Travis Cotton]

Found a problem with my solution, although I don't know why. I initially had persistSelection set to true, because that's what it was set to in the sample that I found. I noticed that my child grid yielded odd results when I selected a row, then paged, then selected another row. That was because it was pushing the newly selected row id to the end of the array, and I'm looking at the first value only. So I set persistSelection to false after reading what it's for. I don't want it to retain selected rows when paging or filtering anyway. But with persistSelection set to false, now the selectedKeyNames() method returns an empty array when the change event calls it. 

Why would setting persistSelection to false cause selectedKeyNames() to return an empty array when a new row is selected? How do I make it work?

[Konstantin Dikov]

Hi Travis,

The selectedKeyNames method will return the selected rows when persistSelection is enabled. When the persistSelection is disabled you should use the "select" method for getting reference to the selected items and then use the "dataItem" method for finding the corresponding dataItem:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select 
• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

Regards,
Konstantin Dikov
Progress Telerik

[Travis Cotton]

Thanks Konstantin. I'll give that a try as soon as I can. But I still have to ask - why does selectedKeyNames() not work when persistSelection is disabled? The method's stated function is "Gets an array that holds the id field values of the selected rows." If there are rows selected, whether persistSelection is on or off, why wouldn't we expect for this method to function as described? And if there really is a good reason that it can't work properly with persistSelection disabled, does it say so in documentation elsewhere that I'm not finding? There should be some indication of that here, if it's the case: 

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-selectedKeyNames

This sounds like something that should be fixed.

[Konstantin Dikov]

Hello Travis,

The selectedKeyNames method was exposed to allow the developers to retrieve the selected id`s for the entire Grid, including selected items on different pages when paging and persistSelection are enabled. Since the selected dataItems on the current page could be easily retrieved by the developer (with the select and dataItem methods), there is no need to create and maintain additional object for the selected items.

Nevertheless, you could use the following custom method that will return the collection without persistSelection:

• https://dojo.telerik.com/IJODEH

function customSelectedKeyNames(grid){
   var rows = grid.select();
  var ids = [];
  rows.each(function(){
    var dataItem = grid.dataItem($(this));
    ids.push(dataItem.id);
  })
  return ids;
}

Best Regards,
Konstantin Dikov
Progress Telerik

[Travis Cotton]

Konstantin,

Thanks for the code sample. I hear what you're saying about the intended use of selectedKeyNames. I won't pretend to understand the intricacies of the product, and whether it would be too much overhead to maintain the additional object when there's another means of obtaining the data. I can only say that from my perspective, anything that you can do to make my life easier, I'm probably in favor of. Having to use two different approaches to get the rows depending on whether I do or do not have persistSelection enabled is something that I shouldn't have to consider.

Instead, what you could do is have your selectedKeyNames method always work for me, regardless of persistSelection, and whether (in your method) you choose to maintain an object to keep track of mult-page selections if necessary, or whether you just loop through the rows and look at the data items as demonstrated in your sample code is up to you. When I call your method, your method should determine whether it needs to loop through the rows to get the answer, or reference the object maintained by persistSelection to get the answer. In either case, I get the answer in the same way.

But if there is a reason that this isn't a good approach, you should at least make it clear in the documentation for the selectedKeyNames method that it depends on persistSelection = true to function, and maybe offer a hint about how to obtain the same information through other means. As it is currently, the documentation simply says "Gets an array that holds the id field values of the selected rows.". What about that tells me that I have to use persistSelection for it to work?

[Konstantin Dikov]

Hello Travis,

Thank you for the valuable feedback on this matter. I have to say that you have a really valid point and I will definitely forward this to the developers team, so they could include a condition in the method that will check if the collection exists and if not, search for the selected records in the Grid and retrieve their ids internally.

Once again, thank you for the feedback.


Regards,
Konstantin Dikov
Progress Telerik