[CLOSED] Grid Rowexpander with checkbox

  1. #1

    [CLOSED] Grid Rowexpander with checkbox

    Hi, I am trying to use a checkbox in the grid rowexpander to modify boolean data,

    However updating from the rowexpander does not work , the boolean value of the grid does not change. Is it a bud or should use other method?

    Below is the sample code

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (X.IsAjaxRequest)
            {
                //We do not need to DataBind on an DirectEvent
                return;
            }
    
    
            this.Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", true,71.72, 0.02, 0.03, "9/1 12:00am", "Manufacturing"},
                    new object[] { "Alcoa Inc",true, 29.01, 0.42, 1.47, "9/1 12:00am", "Manufacturing"},
                    new object[] { "Altria Group Inc",true, 83.81, 0.28, 0.34, "9/1 12:00am", "Manufacturing"},
                    new object[] { "American Express Company",true, 52.55, 0.01, 0.02, "9/1 12:00am", "Finance"},
                    new object[] { "American International Group, Inc.",false, 64.13, 0.31, 0.49, "9/1 12:00am", "Services"},
                    new object[] { "AT&T Inc.",true, 31.61, -0.48, -1.54, "9/1 12:00am", "Services"},
                  
                };
    
    
            this.Store1.DataBind();
        }
    </script>
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>RowExpander with FormPanel Detail - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <ext:ResourcePlaceHolder runat="server" Mode="Script" />
    
    
        <style>
            .white-footer .x-toolbar-footer{
              background-color: white !important;
           }
        </style>
    
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
            <h1>RowExpander Plugin with FormPanel Detail</h1>
    
    
            <ext:GridPanel
                runat="server"
                Title="Expander Rows with control"
                Collapsible="true"
                AnimCollapse="true"
                Icon="Table"
                Width="800">
                <Store>
                    <ext:Store
                        ID="Store1"
                        runat="server"
                        IgnoreExtraFields="false"
                        PageSize="10">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                    <ext:ModelField Name="active" Type="Boolean" />
                                    <ext:ModelField Name="price" Type="Float" />
                                    <ext:ModelField Name="change" Type="Float" />
                                    <ext:ModelField Name="pctChange" Type="Float" />
                                    <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                    <ext:ModelField Name="industry" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column
                            runat="server"
                            Text="Company"
                            DataIndex="company"
                            Flex="1" />
                        <ext:CheckColumn runat="server" DataIndex="active">
                        </ext:CheckColumn>
                        <ext:Column runat="server" Text="Price" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn
                            runat="server"
                            Text="Last Updated"
                            DataIndex="lastChange"
                            Format="yyyy/MM/dd"
                            Width="105" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:RowExpander runat="server" SingleExpand="false">
                        <Component>
                            <ext:FormPanel
                                runat="server"
                                BodyPadding="6"
                                Border="false"
                                DefaultAnchor="-5"
                                Cls="white-footer">
                                <Items>
                                    <ext:TextField
                                        runat="server"
                                        Name="company"
                                        FieldLabel="Company"
                                        />
                                      <ext:Checkbox
                                        runat="server"
                                        Name="active"
                                        FieldLabel="Active"
                                        />
                                    <ext:NumberField
                                        runat="server"
                                        Name="price"
                                        FieldLabel="Price"
                                        />
                                    <ext:NumberField
                                        runat="server"
                                        Name="change"
                                        FieldLabel="Change"
                                        />
                                    <ext:NumberField
                                        runat="server"
                                        Name="pctChange"
                                        FieldLabel="% Change"
                                        />
                                    <ext:DateField
                                        runat="server"
                                        Name="lastChange"
                                        FieldLabel="Last Updated"
                                        Format="yyyy/MM/dd"
                                        />
                                </Items>
    
    
                                <Buttons>
                                    <ext:Button runat="server" Text="Save" Icon="Disk">
                                        <Listeners>
                                            <Click Handler="var grid = this.up('grid'), form = this.up('form');
                                                            grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));
                                                            form.getForm().updateRecord(form.record);" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button runat="server" Text="Cancel" Icon="Decline">
                                        <Listeners>
                                            <Click Handler="var grid = this.up('grid'), form = this.up('form');
                                                            grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));" />
                                        </Listeners>
                                    </ext:Button>
                                </Buttons>
    
    
                                <Listeners>
                                    <AfterRender Handler="this.getForm().loadRecord(this.record);" />
                                </Listeners>
                            </ext:FormPanel>
                        </Component>
                    </ext:RowExpander>
                </Plugins>
                <BottomBar>
                    <ext:PagingToolbar runat="server" HideRefresh="true" />
                </BottomBar>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Oct 10, 2016 at 8:51 PM.
  2. #2
    Hello @ndotis!

    Have you tried setting the Editable="true" property to your check column definition? It seems to just do it to me.

    It is readonly by default cause a gridPanel, at first, is readonly unless editors are bound to the columns. In the case of a check column, you probably don't want a custom editor field but just the checkbox toggle ability, so just this property might be just what you need!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again @ndotis!

    We didn't hear back from you about this issue for several days now. Did the answer above help you at all? Do you still need assistance in this matter? If, in 7 business days you do not provide feedback on this issue we'll be assuming you no longer need assistance and will be marking it as closed.

    Anyway, don't worry if you only see this when the thread has been marked as closed. Just leave a follow-up and we'll resume the topic.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Grid RowExpander and Grid Rowbody not working.
    By Cyberspirit in forum 3.x Help
    Replies: 2
    Last Post: Aug 21, 2015, 11:16 AM
  2. Replies: 4
    Last Post: Jan 18, 2015, 5:51 PM
  3. Replies: 2
    Last Post: Sep 17, 2014, 8:41 PM
  4. [CLOSED] Rowexpander toggles on checkbox click
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Dec 15, 2010, 9:42 PM
  5. RowExpander and Checkbox Selection Rendering Issue
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 22, 2010, 4:48 AM

Tags for this Thread

Posting Permissions