DESPERATE - DetailsTable, checkbox, checkall

2 posts, 0 answers
  1. John
    John avatar
    1 posts
    Member since:
    Aug 2015

    Posted 27 Aug 2015 Link to this post

    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>

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2252 posts

    Posted 01 Sep 2015 Link to this post

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