Check all Checkboxes in a GridCheckboxColumn using Javascript

[Diego]

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!

[Attila Antal]

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

[Diego]

That worked perfectly, thank you :)!