[Solved] GridClientSelectColumn strange behavior

[Brian Crnobrnja]

I am programmatically including a RadGrid as part of a composite control. The grid is populated through client-side data binding. It uses a GridClientSelectColumn and has AllowMultiRowSelection set to "true". Multiple selection (dragging to select, ctrl + click, shift + click) works fine except for one strange behavior concerning the checkbox that gets rendered for each row. If I click on a row, it becomes highlighted and also the checkbox becomes checked. However, if I click on the actual checkbox the row becomes highlighted but the checkbox remains unchecked.

[Iana Tsolova]

Hi Brian,

I followed the described steps in order to replicate the unexpected behavior on this demo but to no avail. Could you please send us a sample project illustrating your scenario where we can observe the problem and perform further testing/debugging on it in the other thread you have open on the same subject?

Kind regards,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Brian Crnobrnja]

Here is the server-side code from the composite control (called within CreateChildControls)...

            rgFilterSelections = new RadGrid();
            rgFilterSelections.ID = "rgFilterSelections";
            rgFilterSelections.Width = Unit.Percentage(98);
            rgFilterSelections.AutoGenerateColumns = false;
            rgFilterSelections.AllowSorting = false;
            rgFilterSelections.AllowPaging = true;
            rgFilterSelections.AllowCustomPaging = false;
            rgFilterSelections.PageSize = 200;
            rgFilterSelections.AllowMultiRowSelection = true;
            rgFilterSelections.ShowHeader = true;
            rgFilterSelections.PagerStyle.Mode = GridPagerMode.NumericPages;
            rgFilterSelections.MasterTableView.ClientDataKeyNames = new string[] { "id" };
            rgFilterSelections.MasterTableView.TableLayout = GridTableLayout.Fixed;

            GridClientSelectColumn gcsc = new GridClientSelectColumn();
            gcsc.UniqueName = "ClientSelectColumn";
            gcsc.ItemStyle.Width = Unit.Pixel(20);

            GridBoundColumn gbcText = new GridBoundColumn();
            gbcText.DataField = "text";
            gbcText.UniqueName = "text";

            rgFilterSelections.MasterTableView.Columns.Add(gcsc);
            rgFilterSelections.MasterTableView.Columns.Add(gbcText);

            rgFilterSelections.ClientSettings.Selecting.AllowRowSelect = true;
            rgFilterSelections.ClientSettings.Selecting.EnableDragToSelectRows = true;
            rgFilterSelections.ClientSettings.Scrolling.AllowScroll = true;
            rgFilterSelections.ClientSettings.Scrolling.UseStaticHeaders = true;
            rgFilterSelections.ClientSettings.Scrolling.SaveScrollPosition = true;
            rgFilterSelections.ClientSettings.ClientEvents.OnCommand = "rgFilterSelections_Command";
            rgFilterSelections.ClientSettings.ClientEvents.OnRowDataBound = "rgFilterSelections_RowDataBound";

The relevant client-side code...

function rgFilterSelections_Command(sender, args) {

    args.set_cancel(true);
    var rg = $find(gridViewID);

    if (args.get_commandName() == "Page") {
        GetIDs();
        getNextPage($get(currentFilterType).value, args.get_commandArgument());
    }

    return false;
}

function rgFilterSelections_RowDataBound(sender, args) {

    if (!allSelected) {
        if (args.get_dataItem()["selected"]) {
            if (!Array.contains(currentSelectedIDs, args.get_dataItem()["id"])) {
                Array.add(currentSelectedIDs, args.get_dataItem()["id"]);
            }
        }
    }
}

The javascript above is mostly doing some customized things that don't impact the grid. the getNextPage method (called within rgFilterSelections_Command) performs an asynchronous callback and rebinds the grid with the requested page of data. That works fine. 

[Iana Tsolova]

Hi Brian,

I used the provided code and prepared a runnable sample attached to this post. There grid items selection works properly on my side.
Can you check it out and let me know if I missed something out.

Kind regards,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Brian Crnobrnja]

The only major difference I see is that you are using the server-side "NeedDataSource" methodology to bind data. I am using a jquery call to client-side data bind. Here is an additional code block showing my setup...

$.ajax({
        type: "POST",
        url: "x.aspx/GetData",
        data: "{FilterType:" + filterType.toString() + ",CurrentPage:" + pageIndex.toString() + ",PageSize:" + pageSize.toString() + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(result) {
            var rg = $find(gridViewID);
            var rgTable = rg.get_masterTableView();
            $("#" + attributeTypeText).text(result.AttributeTypeText);
            allSelected = result.AllSelected;
            rgTable.set_dataSource(result.DataRows);
            rgTable.dataBind();
            rgTable.set_virtualItemCount(result.VirtualItemCount);
            setAlreadySelectedRows();
            $find(processingModal).hide();
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
            $find(processingModal).hide();
        }
    });

[Iana Tsolova]

Hello Brian,

I tried binding the grid client-side as per your description. Please find the modified sample attached and check it out. It works properly on my side, let me know how it goes on your end.

Additionally, it would be of help if you prepare a runnable sample illustrating your exact scenario and setup which we could debug and thus find a proper resolution for you.

Best wishes,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.