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

Check/Uncheck GridCheckBoxColumn

34 Answers 1166 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Geoff
Top achievements
Rank 1
Geoff asked on 05 Nov 2013, 10:29 AM
In the Batch Editing demo, there is a peculiar feature regarding the checkbox in the "Discontinued" column. You cannot put the checkbox in edit mode by clicking on it, you have to click to one side first (in the cell but not on the checkbox). I am using this for our application but the user says that this feature is off-putting because it looks like the checkbox cannot be edited. It might be helpful if there was something visible for the user to click on (e.g. button surround or text). Is this possible?

34 Answers, 1 is accepted

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 07 Nov 2013, 05:15 PM
Hi Geoff,

There is an issue with the check box element and as you have observed out yourself, you have to select outside the check box in order to activate the edit.

Nevertheless, I have prepared a sample page with RadGrid that uses GridTemplateColumn instead of the GridCheckBoxColumn that has the behavior you need.

Please refer to the attached sample page and see if this fulfills your requirements.

 

Regards,
Konstantin Dikov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Geoff
Top achievements
Rank 1
answered on 15 Nov 2013, 11:26 AM
Konstantin,
    Thank you for your quick response and apologies for my slow one. This worked great for me so thank you very much.

Regards

Geoff
0
Geoff
Top achievements
Rank 1
answered on 19 Nov 2013, 03:29 PM
Konstantin,
    One snag I have with the solution is that having the Checkbox in a GridTemplateColumn means that the associated UpdateParameter in my SQDataSource is no longer populated automatically with the edited values. I guess there is a way to do this with one of the RadGrid events (e.g. UpdateCommand or ItemCommand) in the code behind. Could you help?

Regards

Geoff
0
Konstantin Dikov
Telerik team
answered on 22 Nov 2013, 10:17 AM
Hi Geoff,

You could handle the ItemCommand or BatchEditCommand server-side event for retrieving the values. Detail information for this is available at the following help article:

Hope that helps.


Regards,
Konstantin Dikov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Geoff
Top achievements
Rank 1
answered on 25 Nov 2013, 11:34 AM
Hi Konstantin,
    I have read through that demo and a few others but I am still unable to fathom the technique that gets me access to the control from the ItemCommand event. Here is my page code:
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true"></telerik:RadWindowManager>
 
 <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
     <script type="text/javascript">
         function changeEditor(sender, args) {
             var grid = $find("<%=RadGrid1.ClientID%>");
             var batchManager = grid.get_batchEditingManager();
             grid.get_batchEditingManager().openCellForEdit(sender.parentElement.parentElement);
             sender.checked = !sender.checked;
         }
     </script>
 </telerik:RadCodeBlock>
 
 <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
     <telerik:RadGrid ID="RadGrid1" DataSourceID="ds_ActivityCodes" AutoGenerateColumns="False"
         AllowSorting="True"
         AllowAutomaticDeletes="False"
         AllowAutomaticInserts="True"
         AllowAutomaticUpdates="True"
         AllowPaging="True" GridLines="None" PageSize="10" runat="server">
 
         <MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="activity_id"
             DataSourceID="ds_ActivityCodes" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">
 
             <CommandItemSettings ShowSaveChangesButton="false" />
 
             <BatchEditingSettings EditType="Cell" OpenEditingEvent="None" />
 
             <SortExpressions>
                 <telerik:GridSortExpression FieldName="ActivityCode" SortOrder="Ascending" />
             </SortExpressions>
 
             <Columns>
                 <telerik:GridBoundColumn DataField="ActivityCode" ColumnEditorID="ActivityCode_Editor" HeaderStyle-Width="60px" HeaderText="Activity Code" SortExpression="ActivityCode" UniqueName="ActivityCode">
                     <ColumnValidationSettings EnableRequiredFieldValidation="true">
                         <RequiredFieldValidator ForeColor="Red" Text="*This field is required">
                         </RequiredFieldValidator>
                     </ColumnValidationSettings>
                 </telerik:GridBoundColumn>
 
                 <telerik:GridBoundColumn DataField="ActivityDescription" ColumnEditorID="TextEditor" HeaderStyle-Width="210px" HeaderText="Description" SortExpression="ActivityDescription" UniqueName="ActivityDescription">
                     <ColumnValidationSettings EnableRequiredFieldValidation="true">
                         <RequiredFieldValidator ForeColor="Red" Text="*This field is required">
                         </RequiredFieldValidator>
                     </ColumnValidationSettings>
                 </telerik:GridBoundColumn>
 
                 <telerik:GridTemplateColumn HeaderText="Display" UniqueName="Display" DataField="Display">
                     <ItemTemplate>
                         <input id="chk_Display" type="checkbox" checked='<%# Eval("Display") %>' onclick="changeEditor(this);" />
                     </ItemTemplate>
                     <EditItemTemplate>
                         <asp:CheckBox ID="chk_DisplayEdit" Checked='<%# Bind("Display") %>' ToolTip="Untick to remove from options available to user" runat="server" />
                     </EditItemTemplate>
                 </telerik:GridTemplateColumn>
             </Columns>
 
         </MasterTableView>
     </telerik:RadGrid>
 
     <telerik:GridTextBoxColumnEditor runat="server" ID="ActivityCode_Editor">
         <TextBoxStyle Width="30px" />
     </telerik:GridTextBoxColumnEditor>
 
     <telerik:GridTextBoxColumnEditor runat="server" ID="TextEditor">
         <TextBoxStyle Width="280px" />
     </telerik:GridTextBoxColumnEditor>
 
     <telerik:GridCheckBoxColumnEditor runat="server" ID="CheckBoxEditor">
         <CheckBoxStyle Width="10px" />
     </telerik:GridCheckBoxColumnEditor>
 </telerik:RadAjaxPanel>
 
 
 <%-- Data Source, definition for Activity Codes --%>
 <asp:SqlDataSource ID="ds_ActivityCodes" runat="server"
     ConnectionString="<%$ ConnectionStrings:RAMtrack %>"
     ProviderName="<%$ ConnectionStrings:RAMtrack.ProviderName %>"
 
     SelectCommand="Select_Activities"
     SelectCommandType="StoredProcedure"
 
     UpdateCommand="Update_Activities"
     UpdateCommandType="StoredProcedure"
 
     InsertCommand="Insert_Activities"
     InsertCommandType="StoredProcedure"
     >
 
     <SelectParameters>
         <asp:SessionParameter DefaultValue="2" Name="Installation_Id" SessionField="Installation_Id" Type="Int64" />
     </SelectParameters>
 
     <InsertParameters>
         <asp:SessionParameter Name="Installation_Id" SessionField="Installation_Id" Type="Int64" />
         <asp:Parameter Name="ActivityCode" Type="String" />
         <asp:Parameter Name="ActivityDescription" Type="String" />
         <asp:Parameter Name="display" DefaultValue="1" Type="Int64" />
     </InsertParameters>
 
     <UpdateParameters>
         <asp:Parameter Name="ActivityCode" Type="String" />
         <asp:Parameter Name="ActivityDescription" Type="String" />
         <asp:Parameter Name="display" Type="Int64" />
         <asp:Parameter Name="activity_id" Type="Int64" />
     </UpdateParameters>
 
 </asp:SqlDataSource>
and here is my ItemCommant event code
Protected Sub RadGrid1_ItemCommand(sender As Object, e As Web.UI.GridCommandEventArgs) Handles RadGrid1.ItemCommand
    If e.CommandName = RadGrid.UpdateCommandName Then
        ' Trying to access the control "chk_DisplayEdit" which is an ASP checkbox control in a GridTemplateColumn
        Dim editedItem As GridEditableItem = DirectCast(e.Item, GridEditableItem)
        Dim Display_chk As CheckBox = DirectCast(editedItem.FindControl("chk_DisplayEdit"), CheckBox)
 
        ' These GridBoundColumns work fine
        Dim argument As GridBatchEditingEventArgument = TryCast(e.CommandArgument, GridBatchEditingEventArgument)
        Dim oldValues As Hashtable = argument.OldValues
        Dim newValues As Hashtable = argument.NewValues
        Dim OldDisplayValue As String = oldValues("ActivityDescription").ToString()
        Dim NewDisplayValue As String = newValues("ActivityDescription").ToString()
    End If
End Sub
In this, my latest attempt, the FindControl returns nothing.

Can you help me anymore?

0
Konstantin Dikov
Telerik team
answered on 28 Nov 2013, 09:19 AM
Hi Geoff,

The approach you are trying to use for getting the new values of the check box control is not applicable with Batch Editing. Please note that with Batch Editing there are no editors for each item and only one instance is used for each.

For retrieving the check boxes new values you should use the same approach used for the other columns:
Protected Sub RadGrid1_ItemCommand(sender As Object, e As GridCommandEventArgs)
    If e.CommandName = RadGrid.UpdateCommandName Then
        Dim argument As GridBatchEditingEventArgument = TryCast(e.CommandArgument, GridBatchEditingEventArgument)
        Dim newValues As Hashtable = argument.NewValues
        Dim checkBoxNewValue As Boolean = Boolean.Parse(newValues("Display").ToString())
    End If
End Sub

Hope that helps.


Regards,
Konstantin Dikov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Geoff
Top achievements
Rank 1
answered on 28 Nov 2013, 02:44 PM
Konstantin,
    That works great, thank you for you help and patience.
Regards

Geoff
0
Geoff
Top achievements
Rank 1
answered on 29 Nov 2013, 09:52 AM
I did have one more problem to work through in the end so I thought I would post my final solution in case anyone wants to copy this. The last problem was that the client input checkbox control in the ItemTemplate only ever displayed 'checked' regardless on the data. So the Checked='<%# Eval("Display") %>' just wasn't working.

After messing about with it for a bit, I tried using a server control as per the EditItemTemplate. This worked fine in terms of the binding but then of course I needed to add the call to the client changeEditor javascript function, which I did in the RadGrid1_ItemDataBound event.

So here's my final page code:
<%@ Page Language="vb" CodeFile="ActivityCodes.aspx.vb" Inherits="Telerik.GridExamplesVBNET.DataEditing.BatchEditing.ActivityCodesVB" MasterPageFile="~/RAMTrack.master" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="Server">
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="Body" runat="Server">
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true"></telerik:RadWindowManager>
 
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function changeEditor(sender, args) {
                var grid = $find("<%=RadGrid1.ClientID%>");
                var batchManager = grid.get_batchEditingManager();
                grid.get_batchEditingManager().openCellForEdit(sender.parentElement.parentElement);
                sender.checked = !sender.checked;
            }
        </script>
    </telerik:RadCodeBlock>
 
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <telerik:RadGrid ID="RadGrid1" DataSourceID="ds_ActivityCodes" AutoGenerateColumns="False"
            AllowSorting="True"
            AllowAutomaticDeletes="False"
            AllowAutomaticInserts="True"
            AllowAutomaticUpdates="True"
            AllowPaging="True" GridLines="None" PageSize="10" runat="server">
 
            <MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="activity_id"
                DataSourceID="ds_ActivityCodes" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">
 
                <CommandItemSettings ShowSaveChangesButton="false" />
 
                <BatchEditingSettings EditType="Cell" OpenEditingEvent="None" />
 
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="ActivityCode" SortOrder="Ascending" />
                </SortExpressions>
 
                <Columns>
                    <telerik:GridBoundColumn DataField="ActivityCode" ColumnEditorID="ActivityCode_Editor" HeaderStyle-Width="60px" HeaderText="Activity Code" SortExpression="ActivityCode" UniqueName="ActivityCode">
                        <ColumnValidationSettings EnableRequiredFieldValidation="true">
                            <RequiredFieldValidator ForeColor="Red" Text="*This field is required">
                            </RequiredFieldValidator>
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>
 
                    <telerik:GridBoundColumn DataField="ActivityDescription" ColumnEditorID="TextEditor" HeaderStyle-Width="210px" HeaderText="Description" SortExpression="ActivityDescription" UniqueName="ActivityDescription">
                        <ColumnValidationSettings EnableRequiredFieldValidation="true">
                            <RequiredFieldValidator ForeColor="Red" Text="*This field is required">
                            </RequiredFieldValidator>
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>
 
                    <telerik:GridTemplateColumn HeaderText="Display" UniqueName="Display" DataField="Display">
                        <ItemTemplate>
                            <asp:CheckBox ID="chk_Display" Checked='<%# Eval("Display") %>' ToolTip="Untick to remove from options available to user" runat="server" />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:CheckBox ID="chk_DisplayEdit" Checked='<%# Bind("Display") %>' ToolTip="Untick to remove from options available to user" runat="server" />
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
 
            </MasterTableView>
        </telerik:RadGrid>
 
        <telerik:GridTextBoxColumnEditor runat="server" ID="ActivityCode_Editor">
            <TextBoxStyle Width="30px" />
        </telerik:GridTextBoxColumnEditor>
 
        <telerik:GridTextBoxColumnEditor runat="server" ID="TextEditor">
            <TextBoxStyle Width="280px" />
        </telerik:GridTextBoxColumnEditor>
 
        <telerik:GridCheckBoxColumnEditor runat="server" ID="CheckBoxEditor">
            <CheckBoxStyle Width="10px" />
        </telerik:GridCheckBoxColumnEditor>
    </telerik:RadAjaxPanel>
 
 
    <%-- Data Source, definition for Activity Codes --%>
    <asp:SqlDataSource ID="ds_ActivityCodes" runat="server"
        ConnectionString="<%$ ConnectionStrings:RAMtrack %>"
        ProviderName="<%$ ConnectionStrings:RAMtrack.ProviderName %>"
 
        SelectCommand="Select_Activities"
        SelectCommandType="StoredProcedure"
 
        UpdateCommand="Update_Activities"
        UpdateCommandType="StoredProcedure"
 
        InsertCommand="Insert_Activities"
        InsertCommandType="StoredProcedure"
        >
 
        <SelectParameters>
            <asp:SessionParameter DefaultValue="2" Name="Installation_Id" SessionField="Installation_Id" Type="Int64" />
        </SelectParameters>
 
        <InsertParameters>
            <asp:SessionParameter Name="Installation_Id" SessionField="Installation_Id" Type="Int64" />
            <asp:Parameter Name="ActivityCode" Type="String" />
            <asp:Parameter Name="ActivityDescription" Type="String" />
            <asp:Parameter Name="Display" Type="Boolean" />
        </InsertParameters>
 
        <UpdateParameters>
            <asp:Parameter Name="ActivityCode" Type="String" />
            <asp:Parameter Name="ActivityDescription" Type="String" />
            <asp:Parameter Name="Display" Type="Boolean" />
            <asp:Parameter Name="Activity_Id" Type="Int64" />
        </UpdateParameters>
 
    </asp:SqlDataSource>
 
</asp:Content>

and here's my code behind (VB):
Imports System
Imports Telerik.Web.UI
Imports System.Collections
Imports System.Web.UI.WebControls
Imports System.Data
 
Namespace Telerik.GridExamplesVBNET.DataEditing.BatchEditing
    Partial Public MustInherit Class ActivityCodesVB
        Inherits System.Web.UI.Page
 
 
        Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
            If IsNothing(Session("UserName")) Or IsNothing(Session("UserID")) Then
                Response.Redirect("../Login.aspx")
            Else
                If Session("ChangePassword_b") = "True" Then
                    Response.Redirect("UserProfile.aspx")
                End If
 
                ' Define what action puts the cell in edit mode. The choices are:
                '    1) "click"
                '    2) "dblclick"
                '    3) "mousedown"
                '    4) "mouseup"
                Call EditTrigger("click")
 
                ' Hide the New Record button for users that do not have permission
                Call EnableEditButtons()
            End If
        End Sub
 
 
        Protected Sub RadGrid1_InsertCommand(sender As Object, e As Web.UI.GridCommandEventArgs) Handles RadGrid1.InsertCommand
 
        End Sub
 
 
        Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound
            Dim UserHasUpdatePermission_b As Boolean
            Dim item As GridDataItem
            Dim myCheckBox As CheckBox
 
            ' Determine whether the user is able to update or insert data
            ' (hard-coded boolean value will be swapped later on for a function call)
            UserHasUpdatePermission_b = True
 
            If e.Item.ItemType = GridItemType.AlternatingItem Or e.Item.ItemType = GridItemType.Item Then
                ' Disable fields if users do not have permission to update
                item = e.Item
                item.Enabled = UserHasUpdatePermission_b
 
                ' Add call to client side function to switch the Display checkbox into edit mode
                myCheckBox = DirectCast(e.Item.FindControl("chk_Display"), CheckBox)
                If Not IsNothing(myCheckBox) Then
                    If myCheckBox.ID = "chk_Display" Then
                        myCheckBox.Attributes.Add("onclick", "changeEditor(this);")
                    End If
                End If
            End If
        End Sub
 
 
        Protected Sub RadGrid1_BatchEditCommand(sender As Object, e As Telerik.Web.UI.GridBatchEditingEventArgs) Handles RadGrid1.BatchEditCommand
 
        End Sub
 
 
        Protected Sub RadGrid1_ItemUpdated(source As Object, e As Telerik.Web.UI.GridUpdatedEventArgs) Handles RadGrid1.ItemUpdated
            Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)
            Dim ActivityCode_s As [String] = item("ActivityCode").Text
 
            If e.Exception IsNot Nothing Then
                e.KeepInEditMode = True
                e.ExceptionHandled = True
                NotifyUser("Activity Code " + ActivityCode_s + " cannot be updated. Reason: " + e.Exception.Message)
            End If
        End Sub
 
 
        Protected Sub RadGrid1_ItemInserted(source As Object, e As GridInsertedEventArgs) Handles RadGrid1.ItemInserted
            If e.Exception IsNot Nothing Then
                e.ExceptionHandled = True
                NotifyUser("Activity Code cannot be inserted. Reason: " + e.Exception.Message)
            End If
        End Sub
 
 
        Private Sub NotifyUser(message As String)
            RadWindowManager1.RadAlert(message, 330, 180, "RAMtr@ck Notification", "", "")
        End Sub
 
 
        Protected Sub EditTrigger(Trigger_s As String)
            Select Case Trigger_s
                Case "click"
                    RadGrid1.MasterTableView.BatchEditingSettings.OpenEditingEvent = GridBatchEditingEventType.Click
                    Exit Select
 
                Case "dblclick"
                    RadGrid1.MasterTableView.BatchEditingSettings.OpenEditingEvent = GridBatchEditingEventType.DblClick
                    Exit Select
 
                Case "mousedown"
                    RadGrid1.MasterTableView.BatchEditingSettings.OpenEditingEvent = GridBatchEditingEventType.MouseDown
                    Exit Select
 
                Case "mouseup"
                    RadGrid1.MasterTableView.BatchEditingSettings.OpenEditingEvent = GridBatchEditingEventType.MouseUp
                    Exit Select
            End Select
        End Sub
 
 
        Protected Sub EnableEditButtons()
            Dim UserHasUpdatePermission_b As Boolean
            Dim UserHasInsertPermission_b As Boolean
 
            ' Determine whether the user is able to update or insert data
            ' (hard-coded values will be swapped for a function call)
            UserHasUpdatePermission_b = True
            UserHasInsertPermission_b = True
 
            ' Hide the New Record button for users that do not have permission
            RadGrid1.MasterTableView.CommandItemSettings.ShowAddNewRecordButton = UserHasInsertPermission_b
            RadGrid1.MasterTableView.CommandItemSettings.ShowCancelChangesButton = UserHasUpdatePermission_b Or UserHasInsertPermission_b
            RadGrid1.MasterTableView.CommandItemSettings.ShowSaveChangesButton = UserHasUpdatePermission_b
            RadGrid1.MasterTableView.CommandItemSettings.ShowRefreshButton = UserHasUpdatePermission_b
        End Sub
 
 
        Protected Sub RadGrid1_ItemCommand(sender As Object, e As Web.UI.GridCommandEventArgs) Handles RadGrid1.ItemCommand
            Dim argument As GridBatchEditingEventArgument
            Dim newValues As Hashtable
            Dim oldValues As Hashtable
            'Dim OldActivityDescriptionValue As String
            'Dim NewActivityDescriptionValue As String
 
            argument = TryCast(e.CommandArgument, GridBatchEditingEventArgument)
 
            If Not IsNothing(argument) Then
                newValues = argument.NewValues
                oldValues = argument.OldValues
 
                'OldActivityDescriptionValue = oldValues("ActivityDescription").ToString()
                'NewActivityDescriptionValue = newValues("ActivityDescription").ToString()
 
                If e.CommandName = RadGrid.UpdateCommandName Then
                    Me.ds_ActivityCodes.UpdateParameters("Display").DefaultValue = newValues("Display")
 
                ElseIf e.CommandName = RadGrid1.PerformInsertCommandName Then
                    Me.ds_ActivityCodes.InsertParameters("Display").DefaultValue = newValues("Display")
                End If
            End If
        End Sub
 
    End Class
End Namespace

It all seems to work fine.

Geoff


0
Lydia
Top achievements
Rank 1
answered on 17 Mar 2014, 02:28 AM
Hi,
I tried your sample, however im just wondering how come it didnt appear when the row was not in edit mode, the checkbox will only appear when the row is in edit mode?
How to make it appear on both edit and view mode?
Thanks.
0
Geoff
Top achievements
Rank 1
answered on 17 Mar 2014, 08:17 AM
Hi Lydia,
In the code for the page, the checkbox control is defined twice within a GridTemplateColumn, once for the view mode and once for the edit mode. The first occurrence is within the <ItemTemplate> tags and the control ID is "chk_Display". The Second is within the <EditItemTemplate> tags and is called "chk_DisplayEdit".

Is this what you wanted? Hope this helps.

Regards

Geoff
0
WAYNE GOSSGER
Top achievements
Rank 1
answered on 20 Jan 2015, 06:53 PM
Hi,

I'm experiencing the same behavior with 2014.2.724.45. In which version is this bug resolved?

Thanks
0
Konstantin Dikov
Telerik team
answered on 21 Jan 2015, 08:06 AM
Hi Wayne,

If you are referring to the initial issue, that you can not click directly on the checkbox for initiating the editing, this is browsers limitation related to the disabled elements and the fact that the click event will not fire for those elements. Since this is a browser limitation and having in mind how the GridCheckBoxColumn is implemented, the only possible workaround is the one suggested in my first reply on this tread. Please try the attached solution and see if the result will meet your requirement.


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

 
0
WAYNE GOSSGER
Top achievements
Rank 1
answered on 21 Jan 2015, 03:48 PM
Please see the attached image. The fix works indeed but there's a timing issue with the sequence of the fired events. In this example we have a client click handler for the "Save Changes" and "Cancel Changes" buttons (see code below) to perform page validation, function hasPendingChanges() calls BatchEditingManager.hasChanges() to determine if any changes were done. When only one check box has changed this function returns "false" meaning no changes were done. However that's not the case as the picture clearly shows. What we see is that the button's Click event happens first and OnBatchEditClosing and OnBatchEditClosed events follow later. The BatchEditingManager.hasChanges() returns "true" when we inspect from the OnBatchEditClosed event, reflecting the true state of the changes.

function btnSave_OnClientClick() {
    if (hasPendingChanges() == true) {
        if (Page_ClientValidate('SaveMappings') == true) {
            var grid = aramark.vcs.controls.gridvendorcustomers();
            grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
        }
        return false;
    } else {
        $('#alert-dialog').modal('show');
    }
}

We have managed to fix the issue by calling your internal api batchManager._tryCloseEdits(document) as follows:

function changeEditor(sender, args) {
    var grid = aramark.vcs.controls.gridvendorcustomers();
    var batchManager = grid.get_batchEditingManager();
    batchManager.openCellForEdit(sender.parentElement.parentElement);
    sender.checked = !sender.checked;
    setTimeout(function () {
        batchManager._tryCloseEdits(document);
    }, 500);
}

Is there a better solution? Please cc: shaw-james@aramark.com (if possible) with your answer.

Thanks,
James
0
Konstantin Dikov
Telerik team
answered on 22 Jan 2015, 12:57 PM
Hi Wayne,

The workaround that you have found is good enough and I could only suggest that you remove the specified time in the setTimeout function, because leaving it empty will add the execution of the content at the end of the stack, which should do the trick.

You could also try to put the setTimeout function within the OnClientClick event handler, which will be called only once, when the user needs to save the changes.


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

 
0
WAYNE GOSSGER
Top achievements
Rank 1
answered on 22 Jan 2015, 06:13 PM
Hi Konstantin,

I was trying to disable the filters in the filter row to prevent users from losing their changes while pending changes exists. I understand there's a solution for that by handling "OnUserAction" or "OnCommand" events, however this solution only cancels the command and does not provide a visual indication to the user.

Anyway I wanted to bring up that while debugging "batchManager._tryCloseEdits(document)" I noticed that "OnBatchEditClosed" event gets fired more than once even though I changed only one cell. In fact the number of times that it gets fired is superior than the number of rows in the grid.

I've seen other forum solutions where is being used as follows batchManager._tryCloseEdits(grid.get_masterTableView()) or passing other elements. I've tried these and the result is still the same.

Can you explain what batchManager._tryCloseEdits() does internally?
Provided "BatchEditingSettings EditType="Cell" shouldn't be firing the event only once per modified cell?

Many thanks,
James
0
Konstantin Dikov
Telerik team
answered on 26 Jan 2015, 05:06 PM
Hi Wayne,

I have tested the scenario that you are describing, but the OnBatchEditClosed event is not firing at all on my end. Below is the example that I have tested locally:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var count = 0;
        function editClosed(sender, args) {
            console.log(count++);
        }
 
        function closeEdits(sender, args) {
            var grid = $find("RadGrid1");
            var tableView = grid.get_masterTableView();
            var batch = grid.get_batchEditingManager();
            batch.hasChanges(tableView);
            batch._tryCloseEdits(tableView);
        }
    </script>
</telerik:RadCodeBlock>
 
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView CommandItemDisplay="Top" EditMode="Batch">
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnBatchEditClosed="editClosed" />
    </ClientSettings>
</telerik:RadGrid>
 
<telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="false" OnClientClicked="closeEdits"></telerik:RadButton>

Can you please open a regular support ticket and provide a sample, runnable project that replicates the issue, so we can test it locally and isolate the root of the problem.


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

 
0
WAYNE GOSSGER
Top achievements
Rank 1
answered on 27 Jan 2015, 03:06 PM
Will do.

Thanks Konstantin!!!
0
Marta
Top achievements
Rank 1
answered on 25 Feb 2016, 10:36 AM

Hi Konstantin,

I tried your example:

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

Grid column whith checkbox:

<telerik:GridTemplateColumn Groupable="false" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
ForceExtractValue="None" HeaderText="Monday" UniqueName="colMonday"
Visible="true" AllowFiltering="false" ItemStyle-HorizontalAlign="center">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<input id="chkMonday" type="checkbox" checked='<%# Eval("Monday") %>' onclick="changeEditor(this);" />
</ItemTemplate>
<EditItemTemplate>
<asp:CheckBox ID="chkMondayEdit" runat="server" Checked='<%# Bind("Monday") %>' />
</EditItemTemplate>
</telerik:GridTemplateColumn>

 

the user creates a new line and checks the checkbox and click outside the grid.

The problem is: the Item mode does not display the check!! Instead it displays 'TRUE' ! !

How I do correct this behavior?

In Edit mode, it shows correctly the checkbox .

Thanks.

Marta

0
Maria Ilieva
Telerik team
answered on 01 Mar 2016, 01:11 PM
Hi Marta,

Can you please elaborate bit more on the exact functionality you need to achieve and the exact scenario you are implementing? Thus we will be able to revise your case locally and provide the bets option for it.

Regards,
Maria Ilieva
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
0
Marta
Top achievements
Rank 1
answered on 02 Mar 2016, 09:20 AM

Hi Maria Ilieva,

Ok, I will try myself to explain better.

I have a grid Batch with the buttons of Save and Cancel out of the grid. It cost me, but I obtained it. I hope that my code helps other persons.

But my question is on the checkbox:

Summarizing, when the grid has loaded information from of server, the checkbox behave well. The problem is when I create a new line (image 1), I refill information (image 2), click out of the grid (image 3), is  when instead of rendering a checkbox it shows the word TRUE. The word TRUE should be a checkbox (obviously). I need to correct this behavior.

 

0
Maria Ilieva
Telerik team
answered on 07 Mar 2016, 12:49 PM
Hello Marta,


Try the appraoch below

JavaScript:
function rowCreated(sedner,args) {
            if (args.get_id().indexOf("-") != -1) {
                var cell = args.get_item().get_cell("ColumnName");
                var element = document.createElement("input");
                element.setAttribute("type", "checkbox");
                cell.appendChild(element);
            }
        }
From there you need to attach a click event handler and force the opening of the cell for edit once the newly added check box is clicked.

JavaScript:
function rowCreated(sedner,args) {
            if (args.get_id().indexOf("-") != -1) {
                var cell = args.get_item().get_cell("ColumnName");
                var element = document.createElement("input");
                element.setAttribute("type", "checkbox");
                element.setAttribute("onclick", "openCellForEdit(this)");
                cell.appendChild(element);
            }
        }
 
       function openCellForEdit(sender) {
           var cell = Telerik.Web.UI.Grid.GetFirstParentByTagName(sender, "td"),
           grid = $find('<%=RadGrid1.ClientID%>'),
           manager = grid.get_batchEditingManager();
           manager.openCellForEdit(cell);
       }

By following the above suggested approach you should be able to make things work.


Regards,
Maria Ilieva
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
0
Marta
Top achievements
Rank 1
answered on 10 Mar 2016, 10:19 AM

Hi Maria Ilieva,

thanks,it works on Add mode and Edit mode.

But now I have another problem. When I click on the Save button , I cannot get the values from the dgMain_BatchEditCommand  event from the codebehind (in the case of Add mode).

My final code is this one:

<script type="text/javascript">

    function rowCreated(sender, args) {
        if (args.get_id().indexOf("-") != -1) {
            var cell = args.get_item().get_cell("colActive");
            var element = document.createElement("input");
            element.setAttribute("type", "checkbox");
            element.setAttribute("onclick", "openCellForEdit(this)");
            cell.appendChild(element);
        }
    }

    function openCellForEdit(sender) {
        var cell = Telerik.Web.UI.Grid.GetFirstParentByTagName(sender, "td"),
           grid = $find('<%=RadGrid1.ClientID%>'),
           manager = grid.get_batchEditingManager();
        manager.openCellForEdit(cell);
    }


    function addRecord() {
        var grid = $find("<%=RadGrid1.ClientID%>");
        var tableView = grid.get_masterTableView();
        var batchManager = grid.get_batchEditingManager();
        batchManager.addNewRecord(tableView);

        return false;
    }

    function saveChanges(sender, args) {
        var grid = $find('<%=RadGrid1.ClientID%>');
        grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
        return false;
    }

    function cancelChanges(sender, args) {
        var grid = $find('<%=RadGrid1.ClientID%>');
        grid.get_batchEditingManager().cancelChanges(grid.get_masterTableView());
        return false;
    }

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

</script>

 <telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" Height="470px" AutoGenerateColumns="false"
                GridLines="None" AllowSorting="true" AllowPaging="true" PageSize="7" ShowGroupPanel="false"
                AllowMultiRowSelection="false" OnItemDataBound="RadGrid1_ItemDataBound" ShowHeader="true"
                OnNeedDataSource="RadGrid1_NeedDataSource" AllowAutomaticInserts="true" AllowAutomaticUpdates="True"
                AllowAutomaticDeletes="True" OnBatchEditCommand="RadGrid1_BatchEditCommand">
                <ClientSettings>
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    <ClientEvents OnRowCreated="rowCreated"  />
                </ClientSettings>

bla bla bla

 <telerik:GridTemplateColumn Groupable="false" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
                            ForceExtractValue="None" HeaderText="Active" UniqueName="colActive"
                            Visible="true" AllowFiltering="false" ItemStyle-HorizontalAlign="center">
                            <HeaderStyle Width="50px" />
                            <ItemStyle Width="50px" />
                            <ItemTemplate>
                                <asp:CheckBox ID="chkActive" runat="server" Checked='<%# (Eval("Active"))%>' />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>

bla bla bla

 <telerik:GridButtonColumn ButtonCssClass="btn DeleteButtonGrid" HeaderStyle-Width="70px"
                            CommandName="Delete" Text='Delete'
                            UniqueName="DeleteColumn" ButtonType="LinkButton">
                        </telerik:GridButtonColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>

And the button outside the grid:

     <asp:LinkButton ID="btnAdd" runat="server" OnClientClick="return addRecord();">New product</asp:LinkButton>

  <asp:LinkButton ID="btnSave" runat="server"  OnClientClick="return saveChanges();">Save</asp:LinkButton>

  <asp:LinkButton ID="btnCancel" runat="server" OnClientClick="return cancelChanges();">Cancel</asp:LinkButton>

In the codebehind:

  protected void dgMain_BatchEditCommand(object sender, GridBatchEditingEventArgs e)

  {

  bool active = Convert.ToBoolean(newValues["colActive"]);  -----------> doesn't work

The problem is that newValues["colActive"] is null. 

So can you help me to achieve this?

Regards.

Marta Gómez

0
Maria Ilieva
Telerik team
answered on 14 Mar 2016, 03:18 PM
Hi Marta,

I would suggest you to see the forum thread below and test the project provided in it.
http://www.telerik.com/forums/how-to-save-results-of-batch-editing-all-rows-all-cells

Regards,
Maria Ilieva
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Marta
Top achievements
Rank 1
answered on 15 Mar 2016, 09:11 AM

Hi Maria Ilieva,

And here you go. It looks like you spend a lot of time answering my question.

Even thow, I checked your link and it did not help at all.

Good job! (ironic mode).

Regards,

Marta Gómez

0
Konstantin Dikov
Telerik team
answered on 18 Mar 2016, 10:57 AM
Hello Marta,

After examining your last code snippet I have noticed that there is no EditItemTemplate for the template column, so there is no editing for that column, which is whey there are no values on server-side. Please include the EditItemTemplate as per the initial example and let me know if the issue will be resolved.


Best Regards,
Konstantin Dikov
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Jeremy Yoder
Top achievements
Rank 1
answered on 22 Mar 2016, 03:31 PM

Marta,

I'm new to batch grid, but I have the same checkbox issue, which I posted at the end of this thread, but no response yet...

http://www.telerik.com/forums/batch-grid-add-new-row-create-template-column-elements

While trying to solve it on my own, I came across your thread. I tried the rowCreated code (modified for my grid), but like you, it didn't quite work. This is what I found (take with grain of salt as I'm muddling through) but cell.appendChild(element) looked problematic. So after it ran, I looked at the cell's innerHTML value to see this...

"<div>&nbsp;</div><input onclick="changeCheckbox(this)" type="checkbox">"

That seemed wrong, as I thought the checkbox should be inside the div. I verified that by checking a pre-existing row at grd.get_masterTableView().get_dataItems()[0].get_cell("PrintOnPurchaseOrder").innerHTML and it showed this...

"<div><input id="chkPrintRead" onclick="changeCheckbox(this);" type="checkbox" checked="True"></div>"

So now I'm hard-coding my new cell.innerHTML to that value. I don't like hardcoding (especially innerHTML) and I'm guessing there's a more elegant way to create and set an element within these div tags, but it seems to work. Like I said, I'm new to this, so sorry if it takes you down the wrong road (or causes other problems), but maybe I'll get a different response in my thread for that piece and/or this will trigger a better option for the Telerik admins.

0
Mattias Geigant
Top achievements
Rank 1
answered on 10 Feb 2017, 09:56 AM

Will the issue described in the original post ever get fixed? It came as a nasty surprise when I made my first attempt at implementing the RadGrid (2017.1) yesterday and caused a lot of head scratching until i found this thread.

Is this issue really unsolvable to you guys at Telerik?

I know there is a workaround, but it does seem a bit convoluted and definitely makes the appeal of the RadGrid wear off. The more workarounds I need to add, the less sense it makes to me to add third party dependencies. 

If it really is an unsolvable problem, then could you please add an caveat emptor in the official documentation so other customers don't have to waste time? 

 

0
Konstantin Dikov
Telerik team
answered on 15 Feb 2017, 06:35 AM
Hello Mattias,

A HowTo example for handling the checkboxes in Batch Edit mode is already included in our documentation:
As for a built-in solution, the disabled INPUT elements will not fire the click event, which prevents us for including such solution internally. There are some solutions that will require enabled input element styled as disabled, but this will be a huge breaking change for the GridCheckBoxColumn and its rendering, which is something that we always try to avoid.


Regards,
Konstantin Dikov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Daniel
Top achievements
Rank 1
Veteran
answered on 22 Feb 2017, 03:28 PM

Konstantin,

Thanks so much for your zip file example earlier. It differs greatly from the HowTo (http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/how-to/editing-checkboxes) in that it actually works!

I think it would be worthwhile to replace the HowTo code sample with yours. Thanks.

0
Konstantin Dikov
Telerik team
answered on 27 Feb 2017, 01:40 PM
Hello Daniel,

Thank you for bringing our attention to the issue that you have faced with the Code Library. We will revise the code in the Code Library and will test it with our latest versions to see if we need to modify it. 

Best Regards,
Konstantin Dikov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rob Ainscough
Top achievements
Rank 1
answered on 26 Sep 2018, 12:01 AM

Wow ... 2018 and the amount of code required to just have a single click editable checkbox in a grid, this is progress? ... no pun intended.  There really is no better way?

I used the same code and modified for my application, but it seems that I can't do any "code behind" in response to the changed state of the CheckBox value?  Suggestions?

Cheers, Rob.

0
Rob Ainscough
Top achievements
Rank 1
answered on 26 Sep 2018, 01:28 AM

To follow up, after using Konstantin's code sample which sorta works by has some major drawbacks:

1.  Only works with asp:CheckBox  (so any Skin usage is ignored making the checkbox really stand out add ODD relative to look and feel.
2.  Leaves an ugly dotted box around the checkbox which I assume is the "cell"
3.  If uncheck the checkbox and move OFF the cell it triggers what looks like a validation error flag (red triangle in left corner)
4.  I can't use code behind events like OnCheckedChanged so I stuck with only what I can do in JavaScript.

I appreciate the code sample, but we're (my clients/users) are still left with something that does NOT look good and below par relative to other websites (especially my competitor web sites).

Is there any other way I accomplish what seems to me to be the most simple and basic of task:

A.  A grid with an editable Checkbox bound to a datasource that can work with code behind events?

To be blunt, we're evaluating INFRAGISTICS Ultimate UI for ASP.NET with AJAX ... that's just how frustrated we are with Telerik.

 

Cheers, Rob.

0
MARTA
Top achievements
Rank 1
answered on 26 Sep 2018, 12:46 PM
Hello,

I have not used Telerik for a long time, I'm sorry, I can not help you.

I do not remember how I solved it, I'm sorry. I tried a lot of javascript, and I did not get anything. In the end I think it worked modifying styles and also javascript, but I do not remember, today I no longer work in that company.

Good luck!

Cheers, Marta.
0
Marin Bratanov
Telerik team
answered on 26 Sep 2018, 12:56 PM
Hi everyone,

The short answer is - you can find an example of single click checkbox editing in the following article: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/how-to/editing-checkboxes.

@Rob: batch editing operates on the client so if the checkbox did a postback so you can get a server event, the user input would be lost: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/server-side-api. If you want to use server events, I'd suggest going with the default InPlace editing mode: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/in-place. You can put a checkbox in a template column as if it were a regular gridview and handle its server event and <%#Bind()%> its Checked value. You can find one example, let's say, here: https://stackoverflow.com/questions/7432355/checkbox-in-radgrid-and-sending-data-to-database?rq=1.

@Marta - thank you for keeping an eye on the discussion, input from our customers is always welcome.


Regards,
Marin Bratanov
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.
Tags
Grid
Asked by
Geoff
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Geoff
Top achievements
Rank 1
Lydia
Top achievements
Rank 1
WAYNE GOSSGER
Top achievements
Rank 1
Marta
Top achievements
Rank 1
Maria Ilieva
Telerik team
Jeremy Yoder
Top achievements
Rank 1
Mattias Geigant
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Veteran
Rob Ainscough
Top achievements
Rank 1
MARTA
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or