Check all Checkboxes in a GridCheckboxColumn using Javascript

3 posts, 1 answers
  1. Diego
    Diego avatar
    6 posts
    Member since:
    Jun 2018

    Posted 20 Aug 2018 Link to this post

    Hi, I'm trying to check all the checkboxes of a GridCheckboxColumn of a Radgrid that is using BatchEdit mode when a button is pressed.

    This is my Radgrid:

    <telerik:RadGrid ID="rgFTADatos" runat="server" AllowFilteringByColumn="True" AllowMultiRowEdit="True" AllowPaging="True" AutoGenerateColumns="False"
        CssClass="RadGrid_ModernBrowsers" OnNeedDataSource="rgDTOpciones_NeedDataSource" RenderMode="Lightweight" Skin="Simple" Height="100%"
        AllowSorting="True" OnBatchEditCommand="rgDTOpciones_BatchEditCommand" Width="100%">
        <GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
        <ExportSettings>
            <Pdf PageWidth="">
            </Pdf>
        </ExportSettings>
        <ClientSettings>
            <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" FrozenColumnsCount="1" />
            <Resizing AllowColumnResize="false" ResizeGridOnColumnResize="false" AllowResizeToFit="false" />
            <ClientEvents OnGridCreated="" OnBatchEditOpened="OnBatchEditOpened" />
        </ClientSettings>
        <MasterTableView CommandItemDisplay="Bottom" CommandItemStyle-Font-Size="10" DataKeyNames="ID" EditMode="Batch" BatchEditingSettings-EditType="Row" Font-Names="Calibri" Font-Size="8" TableLayout="Fixed" PageSize="500">
            <NoRecordsTemplate>
                No se encontrarón registros para el criterio seleccionado.
            </NoRecordsTemplate>
            <CommandItemSettings
                CancelChangesText="Cancelar Operación"
                RefreshText="Refrescar"
                SaveChangesText="Guardar Cambios" />
            <Columns>
                <telerik:GridBoundColumn DataField="ID" FilterControlAltText="Filter column3 column" ForceExtractValue="Always" HeaderText="ID" UniqueName="column3" ReadOnly="True" FilterControlWidth="70%">
                    <HeaderStyle Width="80px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="DatoTecnicoGlosa" FilterControlAltText="Filter column2 column" HeaderText="Dato Técnico" UniqueName="OpcionGlosa" FilterControlWidth="70%" ReadOnly="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="EsTextoOpciones" FilterControlAltText="Filter column4 column" HeaderText="EsTextoOpciones" UniqueName="column4" AllowFiltering="False" Display="False">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ID_FTE_Dato" Display="False" FilterControlAltText="Filter ID_FTE_Dato column" HeaderText="ID_FTE_Dato" UniqueName="ID_FTE_Dato" ForceExtractValue="Always" ReadOnly="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ID_Opcion" Display="False" FilterControlAltText="Filter column5 column" ForceExtractValue="Always" HeaderText="ID_Opcion" UniqueName="column5">
                </telerik:GridBoundColumn>
                <telerik:GridCheckBoxColumn DataField="FTA_CDECCertificado" DataType="System.Boolean" FilterControlAltText="Filter column6 column" HeaderText="Certificado" UniqueName="column6">
                    <HeaderStyle Width="80px" BackColor="#E8FFEA" />
                    <ItemStyle HorizontalAlign="Center" />
                </telerik:GridCheckBoxColumn>
                <telerik:GridBoundColumn DataField="ID_DatoTecnico" Display="False" FilterControlAltText="Filter column7 column" ForceExtractValue="Always" HeaderText="ID_DatoTecnico" UniqueName="column7">
                </telerik:GridBoundColumn>
            </Columns>
            <BatchEditingSettings EditType="Row"></BatchEditingSettings>
     
            <PagerStyle PageSizes="500;1000;1500" />
     
            <CommandItemStyle Font-Size="10pt"></CommandItemStyle>
        </MasterTableView>
        <ClientSettings>
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        </ClientSettings>
     
        <FilterMenu RenderMode="Lightweight"></FilterMenu>
     
        <HeaderContextMenu RenderMode="Lightweight"></HeaderContextMenu>
    </telerik:RadGrid>

     

    And this is the JavaScript that my button is using:

    function CertificarRows()
    {
        var grid = $find("<%=rgFTADatos.ClientID %>");
        var masterTable = grid.get_masterTableView();
     
        for(var row = 0; row < masterTable.get_dataItems().length; row++)
        {
     
            var currentRow = masterTable.get_dataItems()[0];
            var cell = masterTable.getCellByColumnUniqueName(currentRow, "column6");
     
            batchEditingManager.changeCellValue(cell, "true");
        }
             
    }

     

    I even tried altering the checkbox control itself but I couldn't get it to work, is there any way I can do this? Thank you for your help!

  2. Answer
    Attila Antal
    Admin
    Attila Antal avatar
    204 posts

    Posted 21 Aug 2018 Link to this post

    Hi Diego,

    The approach you were using was very close to working. There are couple of things you will need to adjust and then it will work, please check the correction below:
    <script type="text/javascript">
        function CertificarRows(sender, args) {
            var grid = $find('<%= RadGrid1.ClientID %>');
            var masterTable = grid.get_masterTableView();
     
            // add a reference to batchEditingManager
            var batchEditingManager = grid.get_batchEditingManager();
     
            for (var row = 0; row < masterTable.get_dataItems().length; row++) {
     
                // var currentRow = masterTable.get_dataItems()[0]; // this line will always reference the first row in the current page
     
                var currentRow = masterTable.get_dataItems()[row]; // pass the "row" index variable here to access the rows with an increasing index number
     
                var cell = masterTable.getCellByColumnUniqueName(currentRow, "column6");
                batchEditingManager.changeCellValue(cell, true);
            }
        }
    </script>

    Attached you can find a two basic samples demonstrating a slightly different approach using client-side code.

    I hope this will prove helpful.

    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Diego
    Diego avatar
    6 posts
    Member since:
    Jun 2018

    Posted 22 Aug 2018 in reply to Attila Antal Link to this post

    That worked perfectly, thank you :)!
Back to Top