RadGrid Disabled Selection

[Mike]

In the attached image there is a RadGrid with a GridClientSelectColumn with some of the checkboxes disabled.

I would like the 'select all' checkbox at the top, to only select the rows that are enabled, just two rows in this case. I would like the 'select all' checkbox to function as it would normally, but only take into account the two rows that are enabled.

 e.g.

    . tick the 'select all' checkbox and both enabled rows are selected.

    . untick the 'select all' checkbox and both enabled rows are deselected.

    . tick the first enabled checkbox and then tick the second enabled checkbox and the 'select all' checkbox at the top becomes ticked and vice versa.

I've tried several different methods but each one has not quite worked, including various server side code and jQuery.

The problem with the most obvious approach is that the 'select all' checkbox at the top will end up ticking all the checkboxes regardless of whether they are enabled or not.

Many thanks in advance

Mike

[Shinu]

Hi Mike,

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.

[Mike]

Many thanks for the reply.

This looks to be just what it needed.

[Mike]

This is the first chance back at this solution as it has now become urgent.

I'm just about to try the code but it doesn't look like hiddenfield2 is ever assigned?

Thanks

Mike

[Angel Petrov]

Hello Mike,

Another way to implement this functionality is by setting the SelectableMode of the grid items, that you don`t want to be selected, to None. Thus the GridClientSelectColumn should behave as you expected. Attached is a solution that represents this approach.

All the best,
Angel Petrov
the Telerik team