GridClientSelectColumn header checkbox selects disabled rows

[Margo Noreen]

I added a GridClientSelectColumn column to my RadGrid.  On the ItemDataBound event, I disable that checkbox depending on certain other values of the row.  So the checkbox is correctly rendered as disabled.  However, the checkbox in the grid's header, that allows the user to select/deselect all ignores that state of the checkbox. 

So, if I click the checkbox in the header, it checks all the checkboxes, even if they are disabled.

Is there a way around this?  Or will I have to manually put in my own checkbox column, javascript, etc.  to manage it?

[Shinu]

Hi Margo Noreen,

You can make the disabled CheckBoxes uncheck, while checking the header CheckBox using Javascript. Please take a look into the following code.

ASPX:

<ClientSettings>
<ClientEvents OnRowSelecting="RowSelecting"/>
</ClientSettings>

Javascript:

function RowSelecting(sender, args)
{
    var id = args.get_id();
    var inputCheckBox = $get(id).getElementsByTagName("input")[0];
    if (!inputCheckBox || inputCheckBox.disabled)
    {
        //cancel selection for disabled rows
        args.set_cancel(true);
    }
}

Hope this helps.
Thanks,
Shinu.

[Margo Noreen]

Thank you, that worked for my purposes.

[Robert]

s

[Robert]

This doesn't work.  It will select and "check" the enabled items when you click the header checkbox. However the header checkbox remains unchecked and if you attempt to click it again it is only checking the enabled items.

If you then uncheck a few rows and then click the header checkbox it will select those unchecked rows again.  It seems as if the selecting of the items is working to some extent but the unchecking is not working at all.

Any ideas?  I tested in IE9 and Chrome with the same results.

[Shinu]

Hi Robert,

Please try the following code snippet.

ASPX:

<telerik:RadGrid>
   . . . . . . . . . . . . . . . . . .
    <ClientSettings>
       <ClientEvents OnRowSelecting="RowSelecting"/>
       <Selecting AllowRowSelect="true" />
    </ClientSettings>

       . . . . . . . . . . . . . . . . . . .
 </telerik:RadGrid>

<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:HiddenField ID="HiddenField2" runat="server" />

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem headerItem = (GridHeaderItem)e.Item;
        CheckBox chk = (CheckBox)headerItem["ClientSelectColumn"].Controls[0];
        HiddenField1.Value = chk.ClientID;
    }
}

Javascript:

<script type="text/javascript">
    var selecting;
    var grid;
    var checkBox;
    function pageLoad() {
        checkBox = $get($get('<%= HiddenField1.ClientID %>').value)
        $addHandler(checkBox, "click", onclickHandler);
        grid = $find('<%=RadGrid1.ClientID %>')
        var tmp = grid.get_masterTableView().get_dataItems().length;
        if (parseInt($get('<%= HiddenField2.ClientID %>').value, 10) + grid.get_masterTableView().get_selectedItems().length ==             grid.get_masterTableView().get_dataItems().length) {
            checkBox.checked = true;
        }
    }
    function onclickHandler() {
        if (grid.get_masterTableView().get_selectedItems().length > 0) {
            checkBox.checked = true;
        }
        else {
            checkBox.checked = false;
        }
    }
    var selecting = true;
    function RowSelecting(sender, args) {
        var id = args.get_id();
        var inputCheckBox = $get(id).getElementsByTagName("input")[0];
        if (!inputCheckBox || inputCheckBox.disabled) {
            //cancel selection for disabled rows
            args.set_cancel(true);
        }
        // if no more unselected enabled rows left - check the header checkbox
        else if (parseInt($get('<%= HiddenField2.ClientID %>').value, 10) + grid.get_masterTableView().get_selectedItems().length + 1 ==                  grid.get_masterTableView().get_dataItems().length) {
            checkBox.checked = true;
        }
    }
</script>

Thanks,
Shinu.

[Robert]

Thanks Shinu,

That seems to be working for me.

Robert

[Albert Shenker]

If you don't need to both select and disable a particular row at the same time, then setting  e.Item.SelectableMode = GridItemSelectableMode.None in the ItemDatabound event seems to do the trick with far less code.

[Doncho]

Hi Albert,

Thank you for sharing that approach with the community it may help other developers in a such scenario.

Kind regards,
Doncho
Progress Telerik