On the client-side, how to have CheckBoxes inside GridTemplateColumns force a single select?

[Scott]

I already have a server-side solution, but was curious if anyone has a client-side solution. Basically, I have two GridTemplateColumns, each with a CheckBox (chkIncremental and chkFull). I want the event of checking either CheckBox to force the other checkbox on the same row to become unchecked. Having both CheckBoxes unchecked is a valid state.


Here is my current control with the server-side OnCheckedChange call. I'd love a client-side solution and to be able to make AutoPostBack = False.

<telerik:RadGrid runat="server" ID="rgRegExtractRequest" OnItemDataBound="rgRegExtractRequestDetail_DataBinding"
    AutoGenerateColumns="false"  AllowSorting="false" AllowPaging="false" >

    <MasterTableView DataKeyNames="AcademicYear" AllowMultiColumnSorting="True" HierarchyLoadMode="ServerBind"
        GroupLoadMode="Server">

        <DetailTables>
            <telerik:GridTableView DataKeyNames="AcademicYear" Width="100%" AllowSorting="false" >
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="AcademicYear" MasterKeyField="AcademicYear" />
                </ParentTableRelation>

                <Columns>
                    <telerik:GridBoundColumn DataField="Subject" SortExpression="Subject" HeaderText="Subject" Display="true" />
                    <telerik:GridBoundColumn UniqueName="SubjectCd" DataField="SubjectCd" Display="false" />
                    <telerik:GridBoundColumn DataField="ExtractDate" SortExpression="ExtractDate" HeaderText="Last Download" Display="true" />
                    <telerik:GridBoundColumn UniqueName="AllowIncrementalFlag" DataField="AllowIncrementalFlag" Display="false" />
                    <telerik:GridBoundColumn UniqueName="AllowFullFlag" DataField="AllowFullFlag" Display="false" />

                    <telerik:GridTemplateColumn UniqueName="clmIncremental" HeaderText="Incremental" Display="true" ItemStyle-HorizontalAlign="Center" >
                        <ItemTemplate >
                            <asp:CheckBox ID="chkIncremental" runat="server" OnCheckedChanged="chkFullIncremental_CheckedChanged" AutoPostBack="true" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="clmFull" HeaderText="Full" Display="true" ItemStyle-HorizontalAlign="Center" >
                        <ItemTemplate >
                            <asp:CheckBox ID="chkFull" runat="server" OnCheckedChanged="chkFullIncremental_CheckedChanged" AutoPostBack="true" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>

                    <telerik:GridBoundColumn DataField="Rescore" SortExpression="Rescore" HeaderText="Rescore Value" Display="true" />
                </Columns>
                </telerik:GridTableView>
        </DetailTables>

        <Columns>
            <telerik:GridBoundColumn DataField="AcademicYear" SortExpression="AcademicYear" HeaderText="" Display="true" />
        </Columns>

    </MasterTableView>
</telerik:RadGrid>

[Princy]

Hello Scott,

You can try the following approach to achieve this.

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            CheckBox chkIncremental = (CheckBox)item.FindControl("chkIncremental");
            CheckBox chkFull = (CheckBox)item.FindControl("chkFull");
            chkIncremental.Attributes.Add("onclick", "clicked_chkIncremental(this,'" + item.ItemIndex + "')");
            chkFull.Attributes.Add("onclick", "clicked_chkFull(this,'" + item.ItemIndex + "')");
        }
     }

Java Script:

<script type="text/javascript">
   function clicked_chkIncremental(chkbox,index) {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[index];
        var chkIncremental = chkbox;
        var chkFull = row.findElement("chkFull");
        if (chkFull.checked == chkIncremental.checked)
        {
            alert("can't select");
            chkIncremental.checked = false;
        }
    }
    function clicked_chkFull(chkbox, index) {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[index];
        var chkFull = chkbox;
        var chkIncremental = row.findElement("chkIncremental");
        if (chkIncremental.checked == chkFull.checked) {
            alert("can't select");
            chkFull.checked = false;
        }
     }
 </script>

Thanks,
Princy.

[Scott]

Thank you for the suggestion, Princy. I think I am most of the way there. I had to modify the script a bit, since I acually have my radgrid inside a radpanel. I am having trouble on the following line:

var chkFull = row.findElement("chkFull");

I am able to get row (along with grid, MasterTable, and the passed chkbox object) just fine, but when doing the row.FindElement("chkFull") I am getting back a null.


Here is my code, just to the point of getting the "other" checkbox:

function clicked_chkIncremental(chkbox, index) {
    var grid = $find("<%= rpbAsmtExtract.FindItemByValue("RadPanelItem1").FindControl("rgAsmtExtractRequest").ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var row = MasterTable.get_dataItems()[index];
    var chkIncremental = chkbox;
    var chkFull = row.findElement("chkFull");
}
function clicked_chkFull(chkbox, index) {
    var grid = $find("<%= rpbAsmtExtract.FindItemByValue("RadPanelItem1").FindControl("rgAsmtExtractRequest").ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var row = MasterTable.get_dataItems()[index];
    var chkFull = chkbox;
    var chkIncremental = row.findElement("chkIncremental");
}

[Veli]

Hi scott,

Your checkboxes are in a detail table, not in the master table. The javascript Princy provided searches in the master table only. You need to modify this to support searching in the detail table. You need to modify both the server and client-side code, because sending the item index only from the server is not enough. You need to send some ID that will identify the detail table too:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = (GridDataItem)e.Item;
        //if this item is from a detail table
        if (item.OwnerTableView != rgRegExtractRequest.MasterTableView)
        {
            CheckBox chkIncremental = (CheckBox)item.FindControl("chkIncremental");
            CheckBox chkFull = (CheckBox)item.FindControl("chkFull");

            //pass the ClientID of the row itself. We can extract the detail table ID from it
            chkIncremental.Attributes.Add("onclick", "clicked_chkIncremental(this, '" + item.ClientID + "')");
            chkFull.Attributes.Add("onclick", "clicked_chkFull(this, '" + item.ClientID + "')");
        }
    }
}

Now the client-side code changed to try to find the detail table from the passed item ID:

function clicked_chkIncremental(chkBox, itemId) {
    var tableView = $find(itemId.split("__")[0]);
    tableView.get_dataItems();
    var row = $find(itemId);
    var chkIncremental = chkbox;
    var chkFull = row.findElement("chkFull");
}
function clicked_chkFull(chkbox, itemId) {
    var tableView = $find(itemId.split("__")[0]);
    tableView.get_dataItems();
    var row = $find(itemId);
    var chkFull = chkbox;
    var chkIncremental = row.findElement("chkIncremental");
}

The above javascript retrieves the GridTableView client instance from the client ID of the row we passed from the server. This is the detail table, not the master table in RadGrid. Calling the tableView.get_dataItems() we ensure the data items are initialized. Then we can use $find() with the ID of the row we have passed. Now we know we got the correct row in the correct detail table. using findElement() should now work.

Veli
the Telerik team

[Scott]

Thanks Veli (and Princy). That did it!

script:

function clicked_chkIncremental(chkbox, itemId) {
    var tableView = $find(itemId.split("__")[0]);
    tableView.get_dataItems();
    var row = $find(itemId);
    var chkIncremental = chkbox;
    var chkFull = row.findElement("chkFull");
    if (chkIncremental.checked == true) {
        chkFull.checked = false;
    }
}
function clicked_chkFull(chkbox, itemId) {
    var tableView = $find(itemId.split("__")[0]);
    tableView.get_dataItems();
    var row = $find(itemId);
    var chkFull = chkbox;
    var chkIncremental = row.findElement("chkIncremental");
    if (chkFull.checked == true) {
        chkIncremental.checked = false;
    }
}

VB Code Behind:

Protected Sub rgAsmtExtractRequest_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs)
        If e.Item.GetType Is GetType(GridDataItem) Then
            Dim item As GridDataItem = CType(e.Item, GridDataItem)
            'if this item is from a detail table
            If (item.OwnerTableView IsNot rgAsmtExtractRequest.MasterTableView) Then
                Dim chkIncremental As CheckBox = CType(item.FindControl("chkIncremental"), CheckBox)
                Dim chkFull As CheckBox = CType(item.FindControl("chkFull"), CheckBox)
                'pass the ClientID of the row itself. We can extract the detail table ID from it
                If chkIncremental IsNot Nothing Then
                    chkIncremental.Attributes.Add("onclick", "clicked_chkIncremental(this,'" + item.ClientID + "')")
                End If
                If chkFull IsNot Nothing Then
                    chkFull.Attributes.Add("onclick", "clicked_chkFull(this,'" + item.ClientID + "')")
                End If
            End If
        End If
End Sub