DESPERATE - DetailsTable, checkbox, checkall

[John]

All

I've been messing with a couple of problems far too long and I desperately need some help.

I have a RadGrid, EditMode=Batch, with 1:M DetailsTable

I have 2 major problems

1. Checkbox ​and edit mode. I know you can't select a checkbox. I have this kind of working using a GridTemplateColumn instead of a GridCheckboxColumn. It works fine in Chrome using code below, but in IE and FF, it still requires 2 clicks.

2. I need to add a CheckAll Button or Checkbox in the footer of each DetailsTable/GridTableView Flag column that will force all checkboxes in that single DetailsTable to checked, even if they are already checked. All samples work with MasterTable only and I can't figure out how to have it iterate in javascript through the particular DetailsTable.

PLEASE, any help or direction would be most appreciated.

            <telerik:RadGrid ID="RadGrid1" runat="server" CssClass="transparentRadGrid" AllowPaging="False"
                AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="False" AllowAutomaticDeletes="True"
                AllowAutomaticInserts="True" AllowAutomaticUpdates="True" DataSourceID="sdsGrid1"
                Width="99%" ShowGroupPanel="False" AllowFilteringByColumn="False" AutoGenerateHierarchy="True"
                ShowHeader="false" EnableLinqExpressions="false" >
                <SortingSettings EnableSkinSortStyles="False" />
                <MasterTableView Name="MasterTableView" CommandItemDisplay="None" DataSourceID="sdsGrid1"
                    DataKeyNames="SubSystemID" AllowSorting="True" Width="100%" EditMode="InPlace"
                    HierarchyDefaultExpanded="true" NoMasterRecordsText="No SubSystems have been created. Create a SubSystem by clicking the green + button above." >
                    <DetailTables>
                        <telerik:GridTableView AllowAutomaticInserts="false" Name="DetailTableView" TableLayout="Fixed" CommandItemDisplay="None"
                            ShowHeader="true" ShowFooter="true" HierarchyLoadMode="ServerBind" EnableHierarchyExpandAll="true"
                            EditMode="Batch" DataKeyNames="SystemRowID" DataSourceID="sdsGrid3" Width="100%"
                            runat="server" NoDetailRecordsText="No Parts in this SubSystem." >
                            <CommandItemStyle HorizontalAlign="Right" />
                            <CommandItemSettings ShowRefreshButton="false" ShowAddNewRecordButton="false" RefreshText="" AddNewRecordText=""
                                CancelChangesText="" SaveChangesText="" />
                            <BatchEditingSettings EditType="Row" />
                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="SubSystemID" MasterKeyField="SubSystemID" />
                            </ParentTableRelation>
                            <Columns>
                                <telerik:GridBoundColumn UniqueName="SystemRowID" HeaderText="ID" DataField="SystemRowID"
                                    DataType="System.Int32" ReadOnly="True" SortExpression="SystemRowID" Visible="false" />

....(other fields)...
                                <telerik:GridTemplateColumn HeaderText="Flag" SortExpression="Flag" UniqueName="Flag">
                                    <ItemTemplate>
                                        <asp:CheckBox id="cbFlag" runat="server" checked='<%# Bind("Flag") %>' onclick="changeEditor(this);" />
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <asp:CheckBox ID="cbFlag" runat="server" Checked='<%# Bind("Flag") %>' />
                                    </EditItemTemplate>
                                    <FooterTemplate>
                                        <input type="checkbox" runat="server" value="check" ID="checkbox" onclick="checkAll();"  />
                                    </FooterTemplate>
                                    <HeaderStyle Width="40px" HorizontalAlign="Center" />
                                    <ItemStyle HorizontalAlign="Center" />
                                </telerik:GridTemplateColumn>
                            </Columns>
                            <FooterStyle />
                        </telerik:GridTableView>
                    </DetailTables>
                    <Columns>
                        <telerik:GridBoundColumn UniqueName="SubSystemID" HeaderText="ID" DataField="SubSystemID"
                            DataType="System.Int32" ReadOnly="True" SortExpression="SubSystemID" Display="False" />

                        <telerik:GridTemplateColumn HeaderText="SubSystem Name" SortExpression="SubSystemName"
                            UniqueName="SubSystemName">
                            <ItemTemplate>
                                <asp:Label ID="SubSystemName" runat="server" Text='<%# Eval("SubSystemName").ToUpper %>' />
                            </ItemTemplate>
                            <InsertItemTemplate>
                                SubSystem Name:
                                <telerik:RadTextBox ID="SubSystemName" runat="server" Text='<%# Bind("SubSystemName") %>'
                                    Width="200px" MaxLength="100" />
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="SubSystemName"
                                    ErrorMessage="SubSystem Name is required." Text="*" />
                            </InsertItemTemplate>
                            <EditItemTemplate>
                                SubSystem Name:
                                <telerik:RadTextBox ID="SubSystemName" runat="server" Text='<%# Bind("SubSystemName") %>'
                                    Width="200px" MaxLength="100" />
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="SubSystemName"
                                    ErrorMessage="SubSystem Name is required." Text="*" />
                            </EditItemTemplate>
                            <ItemStyle Font-Bold="true" Font-Size="Larger" Width="400px" />
                        </telerik:GridTemplateColumn>

                        <telerik:GridTemplateColumn HeaderText="Phase" SortExpression="Phase" UniqueName="Phase">
                            <ItemTemplate>
                                <asp:Label ID="Phase" runat="server" Text='<%# Eval("Phase") %>' />
                            </ItemTemplate>
                            <InsertItemTemplate>
                                Phase:
                                <telerik:RadDropDownList ID="Phase" runat="server" AppendDataBoundItems="true" DataSourceID="sdsProjectPhases"
                                    DataTextField="Phase" DataValueField="PhaseID" SelectedValue='<%# Bind("PhaseID") %>'
                                    Skin='<%# Session("UserSkin") %>' />
                            </InsertItemTemplate>
                            <EditItemTemplate>
                                Phase:
                                <telerik:RadDropDownList ID="Phase" runat="server" AppendDataBoundItems="true" DataSourceID="sdsProjectPhases"
                                    DataTextField="Phase" DataValueField="PhaseID" SelectedValue='<%# Bind("PhaseID") %>'
                                    Skin='<%# Session("UserSkin") %>' />
                            </EditItemTemplate>
                            <ItemStyle Font-Size="Larger" />
                        </telerik:GridTemplateColumn>

                        <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="ImageButton"
                            Exportable="false">
                            <ItemStyle Width="40px" />
                        </telerik:GridEditCommandColumn>
                        <telerik:GridButtonColumn CommandName="Delete" Text="Delete" ButtonType="ImageButton"
                            ConfirmText="Are you sure you want to delete this record?" Exportable="false">
                            <ItemStyle Width="23px" />
                        </telerik:GridButtonColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings AllowKeyboardNavigation="True" AllowDragToGroup="false" EnableRowHoverStyle="true"
                    AllowColumnsReorder="False" ReorderColumnsOnClient="false">
                    <%--<ClientEvents OnKeyPress="keyPress" />--%>
                </ClientSettings>
            </telerik:RadGrid>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function checkAll() {
                var grid = $find("<%=RadGrid1.ClientID%>");
                var detailTables = grid.get_detailTables(0);
                setSelectedToAllDataItems(detailTables[1].get_dataItems(), true);
                //var items = grid.get_masterTableView().get_dataItems();
                //for (var i = 0; i < detailTables.length; i++) {
                    //alert(i);
                    //var cb = detailTables.get_dataItems()[i].findElement("cbFlag");
                    //cb.checked = !cb.checked;
                    //checkBox2.checked =  obj.checked;
                    //setSelectedToAllDataItems(detailTables[i].get_dataItems(), true);
                    //grid.get_batchEditingManager().openRowForEdit(sender.parentElement.parentElement.parentElement);
                //}
            }
            function setSelectedToAllDataItems(dataItems, selected) {
                for (var i = 0; i < dataItems.length; i++) {
                    alert(i);
                    //dataitems[i].get_cell("cbDisplay"), true);
                    //dataItems[i].set_selected(selected);

                    var cb = dataItems[1].get_cell("Flag");
                    var checkBox2 = detailTables.get_dataItems()[i].findElement("cbFlag");
                    checkBox2.checked = obj.checked;
                }
            }

            function changeEditor(sender, args) {
                var grid = $find("<%=RadGrid1.ClientID%>");
                var batchManager = grid.get_batchEditingManager();
                //grid.get_batchEditingManager().openRowForEdit(sender.parentElement.parentElement);
                grid.get_batchEditingManager().openRowForEdit(sender.parentElement.parentElement.parentElement);
                sender.checked = !sender.checked;
            }

            function refreshGrid() {
                var masterTable = $find("<%=radGrid1.clientId%>").get_masterTableView();
                masterTable.rebind();
            }
            function saveGridChanges(sender, args) {
                var grid = $find("<%=RadGrid1.ClientID%>");
                var batchManager = grid.get_batchEditingManager();
                batchManager.saveAllChanges();
                //__doPostBack("btnSaveAll", "");
            }
            function cancelGridChanges() {
                var masterTable = $find("<%=radGrid1.clientId%>").get_masterTableView();
                masterTable.rebind();
            }
        </script>
    </telerik:RadCodeBlock>

[Viktor Tachev]

Hello John,

I have prepared a sample WebSite project where the functionality is implemented. It is working as expected on my end. Try to use similar approach and let me know how it works for you.


Regards,
Viktor Tachev
Telerik