Disable selection of a specific row

[Andy]

Hi

I have a grid set up with AllowMutltiRowSelection = "True", a GridClientSelectColumn and the following ClientSettings

<ClientSettings>

<Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />

</ClientSettings>

Selection is working fine.

What I would like to be able to do is, in the ItemDataBound event for the grid, disable the selection of one or more of the bound rows depending on certain conditions (e.g. a control has a paticular value).

I can use e.item.enabled = false but this doesn't stop the selection of the row by either clicking on the row or checking the GridClientSelectColumn's select all checkbox in the grid header.

Can anyone suggest how this can be acheived other than using server-side selection?

Perhaps the grid is lacking a GridDataItem.AllowSelection property that could be checked client side?

Thanks

Andy

Using:
.NET 3.5
WinXP SP2
IE 7.0
RadControls for ASP.NET AJAX Q1 2008
VB.NET

[Shinu]

Hi,

Try to hide the CheckBox in the GridClientSelectColumn depending on the value of another column as shown below.

CS:

 protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {

        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            string strxt = item["Name"].Text.ToString();
            if (strxt == "Jessica")
            {
                CheckBox chkbx = (CheckBox)item["SelectColumn"].Controls[0];
                chkbx.Visible = false;
            }
        }

   }

Thanks
Shinu.

[Andy]

Thanks for the suggestion.

I had aleady tried setting enabled to false on the checkbox which didn't work but hadn't thought about hiding it.

Unfortunately the row is still selectable by clicking anywhere on the row.

Also simply hiding the checkbox doesn't remove it from the collection of selected items if the GridClientSelectColumn's select all checkbox was checked.

[Princy]

Hi Andy,

Go through the following forum link.
cancel OnRowSelecting when clicked outside clientselect checkbox

Princy.

[Andy]

Thanks for the pointer.

The code was sort of right for what I wanted but needed a couple of tweaks including changing it to reflect the changes from the non-AJAX version of the RadGrid to the AJAX one.

Here's my solution

Code behind:

    Private Sub RadGrid_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid.ItemDataBound
        Select Case e.Item.ItemType

            Case GridItemType.Item, GridItemType.AlternatingItem

                    If <condition> Then
                        Dim selectCheckBox As CheckBox = CType(e.Item.FindControl("ClientSelectColumnSelectCheckBox"), CheckBox)

                        selectCheckBox.Enabled = False

                    End If

        End Select
    End Sub

ASPX

<script type="text/javascript">

        function RowSelecting(sender, eventArgs)
        {
            var e = eventArgs.get_domEvent();

            var grid = $find("<%=RadGrid.ClientID %>").get_masterTableView();
            var dataItem = grid.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
            var checkbox = dataItem.get_element().getElementsByTagName("INPUT")[0];

            if(checkbox.disabled)
            {
                eventArgs.set_cancel(true);
            }

            if(!(e.srcElement.tagName == "INPUT" && e.srcElement.id.indexOf("ClientSelectColumnSelectCheckBox") != -1))
            {
                eventArgs.set_cancel(true);
            }

        }

        function RowDeselecting(sender, eventArgs)
        {
            var e = eventArgs.get_domEvent();

            if(!(e.srcElement.tagName == "INPUT" && e.srcElement.id.indexOf("ClientSelectColumnSelectCheckBox") != -1))
            {
                eventArgs.set_cancel(true);
            }
        }


    </script>

<telerik:RadGrid ID="RadGrid" runat="server" AutoGenerateColumns="True"
        GridLines="None" AllowMultiRowSelection="True" Skin="Vista">
        <MasterTableView TableLayout="Auto" DataKeyNames="Code">
            <Columns>
                <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="40px" />
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
            <ClientEvents OnRowSelecting="RowSelecting" OnRowDeselecting="RowDeselecting" />
        </ClientSettings>
    </telerik:RadGrid>

This gives the following functionality:

• cancels selection/deselection when clicking anywhere but the checkbox
• cancels selection/deselection when a checkbox is disabled
• cancels selection/deselection of a row with a disabled selection checkbox when using the select all checkbox

A side effect of a disabled checkbox in a row is that when clicking the select all checkbox the select all checkbox itself is not checked.  This is the correct behaviour depending on how you look at it since not all rows are selected.  This however leads to you being unable to un-select all.

In my scenario this isn't too much of a problem but if there is an easy way to fix it I would implement it.

Does anyone have any suggestions?

[Konstantin Petkov]

Hi Andy,

Thanks for sharing the solution. We hope it will be of help for other people need to implement something similar.

As to the check box issue, you can check it explicitly. This CodeLibrary entry should help you achieve that.

Greetings,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Andy]

Ok, this thing was really bugging me so I've spent some more time on it.

The code library suggestion has helped, however I still found I was experiencing some behaviour I didn't want, mainly down to the way the select all CheckBox worked.

It seems the built in select all method was de-selecting my select all CheckBox no matter how I coded the state of it.  This is probably partly down to my disbled rows as I don't believe the existing method took these in to account.

So, I've implemented my own select all method using a template column and hooking up a function to the onclick event of the select all CheckBox.  The main data item's selection works in much the same way as before but now sets the state of the select all CheckBox aswell.

Here's the code

JavaScript:

        var disabledItemCount = 0;

        function RowCreated(sender, eventArgs)
        {
            // Get a count of the number of disabled items
            var checkbox = eventArgs.get_gridDataItem().get_element().getElementsByTagName("INPUT")[0]

            if(checkbox.disabled == true)
            {
                disabledItemCount++;
            }
        }

        function RowSelecting(sender, eventArgs)
        {
            var e = window.event;

            // Cancel selection by anything other than the checkbox
            if(!(e.srcElement.tagName == "INPUT" && e.srcElement.id.indexOf("SelectCheckBox") != -1))
            {
                eventArgs.set_cancel(true);
            }
        }

        function RowSelected(sender, args)
        {
            // If all items are selected check the header checkbox
            if ((sender.get_masterTableView().get_dataItems().length - disabledItemCount) == sender.get_masterTableView().get_selectedItems().length)
            {
                setCheckBox(true);
            }
        }

        function RowDeselecting(sender, eventArgs)
        {
            var e = window.event;

            // Cancel selection by anything other than the checkbox
            if(!(e.srcElement.tagName == "INPUT" && e.srcElement.id.indexOf("SelectCheckBox") != -1))
            {
                eventArgs.set_cancel(true);
                // Ensure header checkbox is selected if all items are still selected
                if ((sender.get_masterTableView().get_dataItems().length - disabledItemCount) == sender.get_masterTableView().get_selectedItems().length)
                {
                    setCheckBox(true);
                }
            }
        }

        function RowDeselected(sender, eventArgs)
        {
            // Ensure header checkbox is de-selected if some items are not selected
            if ((sender.get_masterTableView().get_dataItems().length - disabledItemCount) > sender.get_masterTableView().get_selectedItems().length)
            {
                setCheckBox(false);
            }
        }

        function selectAll(sender)
        {
            var masterTable = $find("<%= RadGrid.ClientID %>").get_masterTableView();

            // Don't check/uncheck if we only have items that are disabled - don't want leave the select all checkbox checked
            if(masterTable.get_dataItems().length == disabledItemCount)
            {
                // Just ensure that the header checkbox is not checked
                setCheckBox(false)
            }
            else
            {
                // Select all non-disabled items
                if(sender.checked)
                {
                    for(var i=0; i < masterTable.get_dataItems().length; i++)
                      {
                        var checkbox = masterTable.get_dataItems()[i].get_element().getElementsByTagName("INPUT")[0]

                        if(checkbox.disabled == false)
                        {
                            masterTable.selectItem(masterTable.get_dataItems()[i].get_element());
                        }
                      }
                }
                // De-select all items
                else
                {
                      masterTable.clearSelectedItems();
                }
            }
        }

        function setCheckBox(toCheck)
        {
            var headerCheckBoxID = $get("<%=CheckBoxIdHiddenField.ClientID %>").value;
            var headerCheckBox = $get(headerCheckBoxID);
            headerCheckBox.checked = toCheck;
        }

ASPX:

    <telerik:RadGrid ID="RadGrid" runat="server" AutoGenerateColumns="True"
        GridLines="None" AllowMultiRowSelection="True" Skin="Vista">
        <MasterTableView TableLayout="Auto" DataKeyNames="Code"">
            <Columns>
                <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
                    <HeaderTemplate>
                        <asp:CheckBox id="SelectCheckBox" runat="server"></asp:CheckBox>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox id="SelectCheckBox" runat="server"></asp:CheckBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
            <ClientEvents OnRowCreated="RowCreated" OnRowSelecting="RowSelecting" OnRowSelected="RowSelected" OnRowDeselecting="RowDeselecting" OnRowDeselected="RowDeselected" />
        </ClientSettings>
    </telerik:RadGrid>
    <asp:HiddenField ID="CheckBoxIdHiddenField" runat="server" />

Code-behind:

    Private Sub RadGrid_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid.ItemCreated

        Select Case e.Item.ItemType
            Case GridItemType.Header
                Dim selectAllCheckbox As CheckBox = CType(e.Item.FindControl("SelectCheckBox"), CheckBox)

                CheckBoxIdHiddenField.Value = selectAllCheckbox.ClientID
                selectAllCheckbox.Attributes.Add("OnClick", "selectAll(this);")
        End Select

    End Sub

    Private Sub RadGrid_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid.ItemDataBound
        Select Case e.Item.ItemType
            Case GridItemType.Item, GridItemType.AlternatingItem

                If <condition> Then
                        Dim selectCheckBox As CheckBox = CType(e.Item.FindControl("SelectCheckBox"), CheckBox)
                        selectCheckBox.Enabled = False
                    End If
                Next

        End Select
    End Sub

ASPX:Code-behind:

So that's pretty much it.  It now behaves how I want it to:

• cancels selection/deselection when clicking anywhere but the checkbox
• cancels selection/deselection when a checkbox is disabled
• cancels selection/deselection of a row with a disabled selection checkbox when using the select all checkbox
• cancels selection/deselection of select all CheckBox when there are only disabled rows in the grid
• ensures the select all CheckBox is checked/unchecked when it should be - in my opinion anyway :)

Hope this helps you (note, I'm not the world's best javascript programmer so there may be something wrong I've missed)

Hope Telerik can implement my original suggestion of a property on a data item that allows you to disabled it and have the above functionality.

Andy

[Kiara]

May be my anwer forum thread will provide some pointers for you since I do not think that the custom functionality you request is supported out-of-the-box:

http://www.telerik.com/community/forums/thread/b311D-bdkkcd.aspx

Kiara

[Albert Shenker]

I know how to hide the ClientSelectColumn checkbox. How do I prevent selection of the row through a row click when the Checkbox is hidden? I only want to do this for rows with a hidden checkbox, not all rows.

 

[Konstantin Dikov]

Hello Albert,

The easiest way for disabling selection for specific rows is to set the SelectableMode property of the GridDataitems to None, which will allow the "Select All" functionality to work correctly without any customization:

If TypeOf e.Item Is GridDataItem Then
    Dim item As GridDataItem = TryCast(e.Item, GridDataItem)
    If Your_Condition Then
        item.SelectableMode = GridItemSelectableMode.None
    End If
End If

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Deepak]

Yes.but while sorting and filtering data then select all checkbox not working. please suggest the same. 

[Doncho]

Hi Deepak,

Could you please elaborate a bit more on the issue you are facing?

It would be useful if you share the steps to reproduce the problem along with code snippets that will help us get a better overview of the current structure.

You can try the select all checkbox with sortable columns in our demo - Row Selection

Kind regards,
Doncho
Progress Telerik