How do I: relate multiple grids so I only have one row selected in a single grid?

[Joey]

I have the following setup:
I am using a panel to enable an accordion control. I am loading grids into the source list, and need to ensure that when a row is selected in one grid, the selected options in the other grids are cleared. anyone have any insight?

J.

[Dimo]

Hi Joey,

Since the Kendo UI Grids do not have a built-in inter-communication mechanism, you can achieve the desired behavior if you manually remove the selected CSS classes (k-state-selected) from the other Grids. Use the select event of the current Grid and jQuery's removeClass.

Regards,
Dimo
the Telerik team

[Joey]

How do I select the other grids and remove their classes without impacting the currently selected Grid\item?
Here's my current code snippet I'm using:
    $("table").each(function () {
        $(this).kendoGrid({
            selectable: "row",
            change: function () {

                var SelectedGrid = this;
                var dataItem = SelectedGrid.dataItem($(this.select()));

                //Get the tables
                var kendoGrids = $($.find(".k-content")).find(".k-state-selected").parent();

                debugger;
                if (kendoGrids.length > 1) {
                    var kendoThis = kendoGrids.find("[data-uid ='" + dataItem.uid + "']");
                    var kendoAint = kendoGrids.not(this.content);
                    debugger;

                    $.grep(kendoGrids, function (value) {
                        //need to return the grid item where it is not the current one...

                        //var grepVal = $($(value).parents("table")).find("[data-uid='" + dataItem.uid + "']");
                        //value of
                        var ValidSelect = $($(value).parents("table")).find("[data-uid='" + dataItem.uid + "']");
                        var inValidSelect = $($(value).parents("table")).find("[data-uid !='" + dataItem.uid + "']");

                        $(kendoGrids.not(value).parents("table")).data("kendoGrid").clearSelection();

                        //debugger;
                    });
                }

            }
        });

[Dimo]

Hi Joey,

jQuery provides a quite extensive collection of selectors and filters which you can use to isolate only the Grids that you need. For example

$(".k-grid").not("#CurrentlySelectedGridID")

You can obtain the ID of the current Grid in the handler like this:

this.wrapper.attr("id")

By the way, I am not sure why you are trying to find Grids with the k-content CSS class, as it is not used by Kendo UI Grids.

All the best,
Dimo
the Telerik team