This is a migrated thread and some comments may be shown as answers.

Updating batch editor for all rows of the Grid

3 Answers 362 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mike asked on 12 Feb 2015, 09:39 AM

Hi,

I am attempting to update the checkbox of a GridTemplateColumn via a button on the grid's command bar.
This button should check all rows within the grid, but at the minute my script is updating all rows other than the first one.
It seems as though I must be missing something very simple but I can't seem to spot it!

It's worth noting that the checkbox in the ItemTemplate does get checked for the first row, however it doesn't appear to change the batch editor state, i.e. all rows are checked, but the first row does not have the red indicator to show that the value has changed, therefore a command object is never passed to my OnBatchEditCommand server side function for this row.

I would appreciate any help on this.

Regards,
Mike.

Column definition: -

<telerik:GridTemplateColumn UniqueName="HasAccess" HeaderText="Access" DataField="HasAccess" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="125px"

GroupByExpression="Group By HasAccess">

<ItemTemplate>

<asp:CheckBox ID="HasAccessCheckBox" runat="server" Checked='<%#Eval("HasAccess") %>' onclick="changeEditor(this);" />

<telerik:RadScriptBlock runat="server">

<script type="text/javascript">

function changeEditor(sender, args) {

var grid = $find("<%=Grid.ClientID%>");

var batchManager = grid.get_batchEditingManager();

batchManager.openCellForEdit(sender.parentElement.parentElement);

sender.checked = !sender.checked;

}

</script>

</telerik:RadScriptBlock>

</ItemTemplate>

<EditItemTemplate>

<asp:CheckBox ID="HasAccessCheckBox" runat="server" />

</EditItemTemplate>

<FilterTemplate>

<telerik:RadComboBox ID="HasAccessFilter" runat="server" OnClientSelectedIndexChanged="HasAccessFilter_SelectedIndexChanged"

SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("HasAccess").CurrentFilterValue %>' Width="110px">

<Items>

<telerik:RadComboBoxItem Text="All" />

<telerik:RadComboBoxItem Text="Has Access" Value="True" />

<telerik:RadComboBoxItem Text="No Access" Value="False" />

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock runat="server">

<script type="text/javascript">

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridTemplateColumn>

Command Bar: -

<CommandItemTemplate>

                <telerik:RadToolBar ID="commandToolbar" runat="server" Width="100%" OnClientButtonClicking="commandToolbar_ButtonClicking">

                    <Items>

                        <telerik:RadToolBarButton Text="Save changes" ImageUrl="/Images/save_16.png" Value="SaveChanges" />

                        <telerik:RadToolBarButton Text="Cancel changes" ImageUrl="/Images/Cancel.gif" Value="Rebind" />

                        <telerik:RadToolBarButton Text="Set Access" ImageUrl="/Images/Update.gif" Value="SetAllAccess" />

                        <telerik:RadToolBarButton Text="Revoke Access" ImageUrl="/Images/Delete.gif" Value="RevokeAllAccess" />

                    </Items>

                </telerik:RadToolBar>

            </CommandItemTemplate>

Scripts: -

<telerik:RadScriptBlock runat="server">

        <script type="text/javascript">

            function commandToolbar_ButtonClicking(sender, args) {

                var value = args.get_item().get_value();

                if (value == "SetAllAccess") {

                    args.set_cancel(true);

                    radconfirm("This action will give access to all of the visible pages for the selected Employees.<br /><br />Would you like to continue?", setAccessCallback, 330, 160, null, "Confirm Access");

                }

                else if (value == "RevokeAllAccess") {

                    args.set_cancel(true);

                    radconfirm("This action will remove access to all of the visible pages for the selected Employees.<br /><br />Would you like to continue?", revokeAccessCallback, 330, 160, null, "Confirm Revoke Access");

                }

                else if (value == "SaveChanges") {

                    var grid = $find("<%=Grid.ClientID%>");

                    grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());

                }

                else if (value == "Rebind"){

                    var grid = $find("<%=Grid.ClientID%>");

                    grid.get_masterTableView().rebind();

                }

            }

            function setAccessCallback(arg) {

                if (arg) {

                    checkAll(true);

                }

            }

            function revokeAccessCallback(arg) {

                if (arg) {

                    checkAll(false);

                }

            }

            function checkAll(isChecked) {

                var grid = $get("<%= Grid.ClientID %>");

                var inputList = grid.getElementsByTagName("input");

                var batchManager = $find("<%=Grid.ClientID%>").get_batchEditingManager();

                for (var i = 0; i < inputList.length; i++) {

                    if (inputList[i].type == "checkbox") {

                        batchManager.openCellForEdit(inputList[i].parentElement.parentElement);

                        inputList[i].checked = isChecked;

                    }

                }

            }

        </script>

    </telerik:RadScriptBlock>

3 Answers, 1 is accepted

Accepted

answered on 17 Feb 2015, 06:50 AM

Hi Mike,

Since you are handling the onclick event of the CheckBox control in the ItemTemplate to open the edit mode and change the value of that cell, when you call your checkAll functionality, you are changing the value to the ItemTemplate and not to the EditItemTemplate CheckBox, so no values will be actually changed. If you need to change the value correctly, you will have to call the changeCellValue(cell, newValue) method for each cell instead.

Furthermore, I would recommend that you use the data items in the grid for getting reference to each cell and not by searching for all input elements within the grid. You can get the items through the MasterTableView's get_dataItems method.

Hope this helps.

Regards,
Konstantin Dikov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 17 Feb 2015, 08:13 AM

Hi Konstantin,

Thank you very much for your reply.
It was the changeCellValue function that I was missing!

I have confirmed that changing my checkAll function to the following has resolved my issue.

function checkAll(isChecked) {

var grid = $find("<%=Grid.ClientID%>");

var items = grid.get_masterTableView().get_dataItems();

for (var i = 0; i < items.length; i++) {

grid.get_batchEditingManager().changeCellValue(items[i].get_cell("HasAccess"), isChecked);

}

Many thanks again,
Mike.