Disable selection of a specific row

10 posts, 2 answers
  1. Andy
    Andy avatar
    9 posts
    Member since:
    Mar 2006

    Posted 24 Apr 2008 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Apr 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy
    Andy avatar
    9 posts
    Member since:
    Mar 2006

    Posted 24 Apr 2008 Link to this post

    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.
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Apr 2008 Link to this post

    Hi Andy,

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

    Princy.
  6. Andy
    Andy avatar
    9 posts
    Member since:
    Mar 2006

    Posted 28 Apr 2008 Link to this post

    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?

  7. Answer
    Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 29 Apr 2008 Link to this post

    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
  8. Andy
    Andy avatar
    9 posts
    Member since:
    Mar 2006

    Posted 29 Apr 2008 Link to this post

    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 ObjectByVal 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 ObjectByVal 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

  9. Kiara
    Kiara avatar
    309 posts
    Member since:
    Jul 2006

    Posted 05 May 2008 Link to this post

    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
  10. Albert Shenker
    Albert Shenker avatar
    551 posts
    Member since:
    Mar 2004

    Posted 30 Dec 2015 Link to this post

    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.

     

  11. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 01 Jan Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017