How to Checked Checkbox on dynamic gridpanel

  1. #1

    How to Checked Checkbox on dynamic gridpanel

    Hi,
    Click image for larger version. 

Name:	2021-03-25_16-11-00.png 
Views:	185 
Size:	16.2 KB 
ID:	25520Click image for larger version. 

Name:	2021-03-25_16-26-32.png 
Views:	201 
Size:	23.9 KB 
ID:	25521

    I have a Gridpanel with dynamic checkbox. The goal is when Detail Checkbox Checked, the current record View Checkbox is auto checked with true value.

    The issue is, the view checkbox already Checked, but the detail checkbox not checked. in the console of the browser i got the error with cmp.record is undefined. i already attached the images.
    here is the code snippet

     function ComboBoxDetail_ClientChange(obj, currentSelected, lastSelected) { 
    
                console.log(obj)
    
                if (currentSelected) { 
                    var currId = obj.record.data.PK_Module_ID
    
                    window.App.StoreView.data.each(function (record) {
    
                        if (record.data.PK_Module_ID == currId) { 
                            record.set('BView', currentSelected);
    
                        }
    
                    })
       <ext:GridPanel ID="GridpanelAdd" ClientIDMode="Static" runat="server" Title="Title" AutoScroll="true"> 
    
                            <Store>
                                <ext:Store ID="StoreView" ClientIDMode="Static" runat="server" OnReadData="Store_ReadData">
     
                                    <Model>
                                        <ext:Model runat="server" ID="modelgrid" IDProperty="PK_Module_ID">
                                            <Fields> 
                                                <ext:ModelField Name="BView" Type="String">
                                                    <Convert Handler=" if (value === 'Y') { return true } else { return value};" />
                                                </ext:ModelField>
                                                
                                                <ext:ModelField Name="BDetail" Type="String">
                                                    <Convert Handler=" if (value === 'Y') { return true } else { return value};" />
                                                </ext:ModelField>
                                                
                                                <ext:ModelField Name="IsView" Type="Boolean"></ext:ModelField>
                                                
                                                <ext:ModelField Name="IsDetail" Type="Boolean"></ext:ModelField> 
    
                                            </Fields>
                                        </ext:Model>
                                    </Model>
     
                            </Store>
                            <Plugins>
                               
                                <ext:FilterHeader ID="GridHeader1" runat="server" Remote="false" ClientIDMode="Static" />
     
                            </Plugins>
                           
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
     
                                    <ext:ComponentColumn ID="ComponentView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View" Align="Center">
                                        <Component>
                                            
                                            <ext:Checkbox ID="ComboBoxView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View"></ext:Checkbox>
    
                                        </Component>
                                        <Listeners>
                                            <BeforeBind Handler=" if (e.record.data.IsSupportView==0)  return false;"></BeforeBind>
                                        </Listeners>
                                    </ext:ComponentColumn> 
                                    <ext:ComponentColumn ID="ComponentDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail" Align="Center">
                                        <Component>
                                         
    
    
                                            <ext:Checkbox ID="ComboBoxDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail" >
                                                <Listeners>
                                                    <Change Fn="ComboBoxDetail_ClientChange" />   
                                                </Listeners>
                                                 
                                            </ext:Checkbox>
    
                                        </Component>
                                        <Listeners>
                                            <BeforeBind Handler=" if (e.record.data.IsSupportDetail==0)  return false;"></BeforeBind>
                                        </Listeners>
                                    </ext:ComponentColumn>
                                </Columns>
                            </ColumnModel>
  2. #2
    Hello, @fendiyono, and welcome to Ext.NET Forums!

    For the code you provided I can't see anything obviously wrong. We could help though if you provided a full runnable test case so we could reproduce what you describe at our end.

    You may be interested in checking these threads for info on how to make runnable test cases, but basically you can base your scenario off an existing example in Examples Explorer.

    Here are the guidelines threads that will help you make a test case to share here:

    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks for the information

    here is the full code

    A. Server side
    
    Partial Class CobaView
        Inherits System.Web.UI.Page 
    
        Private Sub CobaView_Load(sender As Object, e As EventArgs) Handles Me.Load
            Try
    
                BindData()
    
            Catch ex As Exception
    
            End Try
        End Sub
    
        Private Sub BindData()
            Try
    
                Dim listTest As New List(Of DataTest)
    
                Dim test As New DataTest
                test.IsSupportView = True
                test.IsSupportDetail = True
                test.BView = False
                test.BDetail = False
                listTest.Add(test)
    
                test = New DataTest
                test.IsSupportView = True
                test.IsSupportDetail = True
                test.BView = False
                test.BDetail = False
                listTest.Add(test)
    
    
                StoreView.PageSize = 10
                StoreView.DataSource = listTest
                StoreView.DataBind()
    
            Catch ex As Exception
                Elmah.ErrorSignal.FromCurrentContext.Raise(ex)
                Ext.Net.X.Msg.Alert("Error", ex.Message).Show()
            End Try
        End Sub
    
        
    End Class
    
    Friend Class DataTest
        Public Property BView As Boolean
        Public Property BDetail As Boolean
        Public Property IsSupportView As Boolean
        Public Property IsSupportDetail As Boolean
    End Class
    B. ClientSide

    <%@ Page Title="" Language="VB" MasterPageFile="~/Site1.master" AutoEventWireup="false" CodeFile="CobaView.aspx.vb" Inherits="CobaView" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
          <script type="text/javascript">
              function ComboBoxDetail_ClientChange(obj, currentSelected, lastSelected) {
                  if (currentSelected) {
                      obj.record.set('BView', currentSelected);
                  } 
              };
     
          </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <ext:FormPanel ID="FormPanel1" runat="server" ButtonAlign="Right" Height="185" Padding="5" Title="Title" Width="300">
            <Items>
                 <ext:GridPanel ID="GridpanelAdd" ClientIDMode="Static" runat="server" Title="Title" AutoScroll="true">
                            <Store>
                                <ext:Store ID="StoreView" ClientIDMode="Static" runat="server">
                                    <Model>
                                        <ext:Model runat="server" ID="modelgrid" IDProperty="PK_Module_ID">
                                            <Fields>
                                               
                                                <ext:ModelField Name="BView" Type="String">
                                                    <Convert Handler=" if (value === 'Y') { return true } else { return value};" />
                                                </ext:ModelField>
                                                
                                                <ext:ModelField Name="BDetail" Type="String">
                                                    <Convert Handler=" if (value === 'Y') { return true } else { return value};" />
                                                </ext:ModelField>
                                                
                                                <ext:ModelField Name="IsSupportView" Type="Boolean"></ext:ModelField>
                                                <ext:ModelField Name="IsSupportDetail" Type="Boolean"></ext:ModelField>
    
                                            </Fields>
                                        </ext:Model>
                                    </Model> 
                                </ext:Store>
                            </Store>
                            
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
    
                                    <ext:ComponentColumn ID="ComponentView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View" Align="Center">
                                        <Component>
                                        
                                            <ext:Checkbox ID="ComboBoxView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View"></ext:Checkbox>
    
                                        </Component>
                                        <Listeners>
                                            <BeforeBind Handler=" if (e.record.data.IsSupportView==0)  return false;"></BeforeBind>
                                        </Listeners>
                                    </ext:ComponentColumn>
                                    
                                    <ext:ComponentColumn ID="ComponentDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail" Align="Center">
                                        <Component>
                                          
                                            <ext:Checkbox ID="ComboBoxDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail" >
                                                <Listeners>
                                                    <Change Fn="ComboBoxDetail_ClientChange" />
                                                    
                                                </Listeners>
                                            </ext:Checkbox>
                                        </Component>
                                        <Listeners>
                                            <BeforeBind Handler=" if (e.record.data.IsSupportDetail==0)  return false;"></BeforeBind>
                                        </Listeners>
                                    </ext:ComponentColumn>
                                </Columns>
                            </ColumnModel>
                         
                        </ext:GridPanel>
            </Items>
     
        </ext:FormPanel>
    </asp:Content>
    Last edited by fendiyono; Mar 26, 2021 at 11:54 AM.
  4. #4
    Hello again, @fendiyono!

    Sorry, your test case does not run. There are some references to entities we don't know; you may need to stub them out or change them by constants.

    Please try to provide the test case in the format:

    <%@ Page Language="vb" %>
    
    <script runat="server">
        Private Sub Page_Load(sender As Object, e As EventArgs)
            If Not Ext.Net.X.IsAjaxRequest Then
              rem Your page loading code here
            End If
        End Sub
    
        rem other code behind code here (you can also define stub classes here)
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET Test case</title>
        <script type="text/javascript">
            // client-side custom scripts can go here
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
    
            <%-- Ext.NET markup code goes here--%>
        </div>
        </form>
    </body>
    </html>
    This way we can just copypaste your example in a local project and run it, then we can focus on the actual problem.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Sorry for my miss understanding

    hopefully this code will run

    <%@ Page Language="C#" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", "N","N", 1, 1 },
                    new object[] { "Alcoa Inc",  "N","N",  1, 1 },
                    new object[] { "Altria Group Inc", "N","N",  1, 1 },
                    new object[] { "American Express Company",  "N","N",  1, 1 },
                    new object[] { "American International Group, Inc.",  "N","N",  1, 1}
                };
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET Test case</title>
        <script type="text/javascript">
            // client-side custom scripts can go here
    
            function ComboBoxDetail_ClientChange(obj, currentSelected, lastSelected) {
                if (currentSelected) {
                    obj.record.set('BView', currentSelected);
                }
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager runat="server" />
    
                <%-- Ext.NET markup code goes here--%>
                <ext:FormPanel ID="FormPanel1" runat="server" ButtonAlign="Right" Height="400" Padding="5" Title="Title" Width="300">
                    <Items>
                        <ext:GridPanel ID="GridpanelAdd" ClientIDMode="Static" runat="server" Title="Title" AutoScroll="true">
                            <Store>
                                <ext:Store ID="Store1" ClientIDMode="Static" runat="server">
                                    <Model>
                                        <ext:Model runat="server" ID="modelgrid" IDProperty="PK_Module_ID">
                                            <Fields>
                                                 <ext:ModelField Name="company" Type="String"></ext:ModelField>
    
                                                <ext:ModelField Name="BView" Type="String">
                                                    <Convert Handler=" if (value === 'Y') { return true } else { return value};" />
                                                </ext:ModelField>
    
                                                <ext:ModelField Name="BDetail" Type="String">
                                                    <Convert Handler=" if (value === 'Y') { return true } else { return value};" />
                                                </ext:ModelField>
    
                                                <ext:ModelField Name="IsSupportView" Type="Boolean"></ext:ModelField>
                                                <ext:ModelField Name="IsSupportDetail" Type="Boolean"></ext:ModelField>
    
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
    
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column
                                        runat="server"
                                        Text="Company"
                                        DataIndex="company"
                                        Flex="1"
                                        Sortable="false" />
                                    <ext:ComponentColumn ID="ComponentView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View" Align="Center">
                                        <Component>
    
                                            <ext:Checkbox ID="ComboBoxView" runat="server" Editor="true" DataIndex="BView" Flex="1" Text="View"></ext:Checkbox>
    
                                        </Component>
                                        <Listeners>
                                            <BeforeBind Handler=" if (e.record.data.IsSupportView==0)  return false;"></BeforeBind>
                                        </Listeners>
                                    </ext:ComponentColumn>
    
                                    <ext:ComponentColumn ID="ComponentDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail" Align="Center">
                                        <Component>
    
                                            <ext:Checkbox ID="ComboBoxDetail" runat="server" Editor="true" DataIndex="BDetail" Flex="1" Text="Detail">
                                                <Listeners>
                                                    <Change Fn="ComboBoxDetail_ClientChange" />
    
                                                </Listeners>
                                            </ext:Checkbox>
                                        </Component>
                                        <Listeners>
                                            <BeforeBind Handler=" if (e.record.data.IsSupportDetail==0)  return false;"></BeforeBind>
                                        </Listeners>
                                    </ext:ComponentColumn>
                                </Columns>
                            </ColumnModel>
    
                        </ext:GridPanel>
                    </Items>
    
                </ext:FormPanel>
            </div>
        </form>
    </body>
    </html>
    Last edited by fendiyono; Mar 29, 2021 at 12:20 PM.
  6. #6
    Hello again, @fendiyono!

    Thanks for the test case, I could run it here. What you are getting is, when you change the value of the record, the row gets redrawn; this, in turn, resets the component where the change event is being called; thus you reach an inconsistent state where you ultimately miss the record field associated to the now-defunct checkbox instance.

    What you need is to let the change event go without nesting change events in the row/component. So, simply set the change to the record to be applied as soon as the current change event finishes; and for that you can just use the Ext.asap() client-side method!

    To do so, just wrap the call to obj.recoird.set() in this method, like this:

    Ext.asap(function () { obj.record.set('BView', currentSelected); });
    This way your custom method will delay the change to the record to as soon as the event finishes, like a callback. Then it won't hit "deep code" with inconsistent data, and all runs smoothly.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    it works now, thanks for the help
  8. #8
    Glad it helped, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Dec 01, 2017, 6:04 PM
  2. [CLOSED] TreeGrid : Check child checkbox with parent checkbox checked
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 35
    Last Post: Jan 21, 2015, 4:18 PM
  3. Replies: 4
    Last Post: May 06, 2014, 1:10 PM
  4. Replies: 0
    Last Post: Sep 22, 2011, 8:37 AM
  5. Replies: 4
    Last Post: Nov 08, 2010, 11:13 AM

Tags for this Thread

Posting Permissions