Check/Uncheck GridCheckBoxColumn

27 posts, 1 answers
  1. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 05 Nov 2013 Link to this post

    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?
  2. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 07 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 15 Nov 2013 Link to this post

    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
  5. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 19 Nov 2013 Link to this post

    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
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 22 Nov 2013 Link to this post

    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.
  7. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 25 Nov 2013 Link to this post

    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?

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 28 Nov 2013 Link to this post

    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.
  9. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 28 Nov 2013 Link to this post

    Konstantin,
        That works great, thank you for you help and patience.
    Regards

    Geoff
  10. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 29 Nov 2013 Link to this post

    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


  11. Lydia
    Lydia avatar
    7 posts
    Member since:
    Dec 2013

    Posted 16 Mar 2014 in reply to Konstantin Dikov Link to this post

    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.
  12. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 17 Mar 2014 in reply to Lydia Link to this post

    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
  13. WAYNE GOSSGER
    WAYNE GOSSGER avatar
    4 posts
    Member since:
    Feb 2009

    Posted 20 Jan 2015 Link to this post

    Hi,

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

    Thanks
  14. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 21 Jan 2015 Link to this post

    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.

     
  15. WAYNE GOSSGER
    WAYNE GOSSGER avatar
    4 posts
    Member since:
    Feb 2009

    Posted 21 Jan 2015 in reply to Konstantin Dikov Link to this post

    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
  16. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 22 Jan 2015 Link to this post

    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.

     
  17. WAYNE GOSSGER
    WAYNE GOSSGER avatar
    4 posts
    Member since:
    Feb 2009

    Posted 22 Jan 2015 in reply to Konstantin Dikov Link to this post

    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
  18. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 26 Jan 2015 Link to this post

    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.

     
  19. WAYNE GOSSGER
    WAYNE GOSSGER avatar
    4 posts
    Member since:
    Feb 2009

    Posted 27 Jan 2015 in reply to Konstantin Dikov Link to this post

    Will do.

    Thanks Konstantin!!!
  20. Marta
    Marta avatar
    4 posts
    Member since:
    Feb 2016

    Posted 25 Feb Link to this post

    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

  21. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 01 Mar Link to this post

    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
  22. Marta
    Marta avatar
    4 posts
    Member since:
    Feb 2016

    Posted 02 Mar Link to this post

    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.

     

  23. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 07 Mar Link to this post

    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
  24. Marta
    Marta avatar
    4 posts
    Member since:
    Feb 2016

    Posted 10 Mar in reply to Maria Ilieva Link to this post

    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

  25. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 14 Mar Link to this post

    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.
  26. Marta
    Marta avatar
    4 posts
    Member since:
    Feb 2016

    Posted 15 Mar Link to this post

    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

  27. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 18 Mar Link to this post

    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.
  28. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 22 Mar in reply to Marta Link to this post

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017