[OPEN] [#774] Component Column Editor add row not working properly

  1. #1

    [OPEN] [#774] Component Column Editor add row not working properly

    Hi I do bellow code for add row to grid panel on button click.after click button rows added but TAB key to navigate one cell to another not working properly.add 2-3 rows by click on button.and goto 1st cell of first row and start pressing TAB KEY .please run sample code and assist me how I solve this.

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script type="text/javascript">
            var addPlant = function () {
    
                var r = Ext.create('pr', {
                }),
                grid = App.GridPanel;
                grid.store.insert(0, r);
               // grid.editingPlugin.startEditByPosition({ row: 0, column: 0 });
            };
        </script>
    </head>
    <body>
        <div>
            @Html.X().ResourceManager()
            @(Html.X().GridPanel()
            .Title("ComponentColumn Editor")
                    .ID("GridPanel")
                    .TopBarItem(Html.X().Button().Text("Add").Listeners(le => { le.Click.Fn = "addPlant"; }).Icon(Icon.Add))
            .Width(600)
            .Height(300)
            .Store(Html.X().Store()
                .Model(Html.X().Model()
                .Name("pr")
                    .Fields(
                        new ModelField("IntField", ModelFieldType.Int),
                        new ModelField("ComboField", ModelFieldType.Int),
                        new ModelField("TextField", ModelFieldType.String),
                        new ModelField("DateField", ModelFieldType.Date)
                    )
                )
                
            )
            .ColumnModel(
                Html.X().ComponentColumn()
                    .Editor(true)
                    .DataIndex("IntField")
                    .Flex(1)
                    .Text("Integer")
                    .Component(Html.X().NumberField()),
    
                Html.X().ComponentColumn()
                    .Editor(true)
                    .DataIndex("ComboField")
                    .Flex(1)
                    .Text("ComboBox")
                    .Component(Html.X().ComboBox()
                        .Items(
                            new ListItem("Item 1", 1),
                            new ListItem("Item 2", 2)
                           
                        )
                    ),
    
                Html.X().ComponentColumn()
                    .Editor(true)
                    .DataIndex("TextField")
                    .Flex(1)
                    .Text("Text")
                    .Component(Html.X().TextField()),
    
                Html.X().ComponentColumn()
                    .Editor(true)
                    .DataIndex("DateField")
                    .Flex(1)
                    .Text("Date")
                    .Component(Html.X().DateField())
            )
            )
         
        </div>
    </body>
    </html>
    Last edited by Daniil; Mar 27, 2015 at 9:44 PM. Reason: [OPEN] [#774]
  2. #2
    Hi @matrixwebtech,

    Hmm, very weird behavior. For now I can suggest you this as a workaround.

    ...
    grid.store.insert(0, r);
    grid.getView().refresh(); // workaround
  3. #3
    Hi daniil,thank for reply ,your workaround is working,but I think for the refresh function after adding each row a the gridpanel jerk,which is not looks good.is there any other way?

    Update


    I use a component column in this gridpanel,please run bellow sample,
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script type="text/javascript">
            var addPlant = function () {
    
                var r = Ext.create('pr', {
                }),
                grid = App.GridPanel;
                grid.store.insert(0, r);
                grid.getView().refresh();
               // grid.editingPlugin.startEditByPosition({ row: 0, column: 0 });
            };
    
            Ext.util.Format.setValueWithTowDecimal = function (v) {
    
                v = String(v).replace(/[^0-9.\-]/g, "");
                v = (Math.round((v - 0) * 100)) / 100;
                v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
                v = String(v);
    
                var ps = v.split('.'),
                    whole = ps[0],
                    sub = ps[1] ? '.' + ps[1] : '.00',
                    r = /(\d+)(\d{3})/;
    
                //while (r.test(whole)) {
    
                //    whole = whole.replace(r, '$1' + ',' + '$2');
                //}
    
                return whole + sub;
            };
    
        </script>
    </head>
    <body>
        <div>
            @Html.X().ResourceManager()
            @(Html.X().GridPanel()
            .Title("ComponentColumn Editor")
                    .ID("GridPanel")
                    .TopBarItem(Html.X().Button().Text("Add").Listeners(le => { le.Click.Fn = "addPlant"; }).Icon(Icon.Add))
            .Width(600)
            .Height(300)
            .Store(Html.X().Store()
                .Model(Html.X().Model()
                .Name("pr")
                    .Fields(
                        new ModelField("IntField", ModelFieldType.Int),
                        new ModelField("ComboField", ModelFieldType.Int),
                        new ModelField("TextField", ModelFieldType.String)
                        
                    )
                )
                
            )
                    .ColumnModel(
                            Html.X().ComponentColumn()
                                .Editor(true)
                                        .DataIndex("IntField")
                                .Flex(1)
                                .Text("Integer")
                                .Component(
                                        Html.X().TextField()
                                        .ID("txtLowerRange")
                                        .AllowBlank(true)
    
                                        .MaskRe(@"/[0-9\$\.]/")
                                        .FieldStyle("text-align:Right")
                                        .SelectOnFocus(true)
                                        .Listeners(l =>
                                        {
                                           
                                            l.Blur.Handler = "this.setRawValue(Ext.util.Format.setValueWithTowDecimal(this.getValue()))";
                                        })
    
                                ),
    
                            Html.X().ComponentColumn()
                                .Editor(true)
                                        .DataIndex("ComboField")
                                .Flex(1)
                                        .Text("ComboField")
                                .Component(
                                               Html.X().TextField()
                                        .ID("txtupperRange")
                                        .AllowBlank(true)
    
                                        .MaskRe(@"/[0-9\$\.]/")
                                        .FieldStyle("text-align:Right")
                                        .SelectOnFocus(true)
                                        .Listeners(l =>
                                            {
                                              
                                                l.Blur.Handler = "this.setRawValue(Ext.util.Format.setValueWithTowDecimal(this.getValue()))";
                                            })
                                ),
    
                            Html.X().ComponentColumn()
                                .Editor(true)
                                        .DataIndex("TextField")
                                .Flex(1)
                                        .Text("TextField")
                                .Component(
                                            Html.X().TextField()
                                                .ID("txtAmount")
                                                .AllowBlank(true)
                                               .MaskRe(@"/[0-9\$\.]/")
                                                .FieldStyle("text-align:Right")
                                                .SelectOnFocus(true)
                                                .Listeners(l =>
                                                {
                                                    
                                                    l.Blur.Handler = "this.setRawValue(Ext.util.Format.setValueWithTowDecimal(this.getValue()))";
    
                                                }))
                                )
            )
         
        </div>
    </body>
    </html>
    Steps to reproduce
    1.Add a row and fill text box .
    2 click add again to add 2nd row.

    suppose you put 2 in each cell in first row and its turned in to 2.00 after adding second row all previous formatting gone.
    Last edited by matrixwebtech; Dec 22, 2014 at 3:45 PM.
  4. #4
    your workaround is working,but I think for the refresh function after adding each row a the gridpanel jerk,which is not looks good.is there any other way?
    I agree, it is not a nice solution. Though, at the moment I cannot find a better one. Though, I am still struggling with that.

    suppose you put 2 in each cell in first row and its turned in to 2.00 after adding second row all previous formatting gone.
    Well, it is lost, because the entire row is recreated/rerendered and, respectively, all the ComponentColumns' Components are recreated as well.

    I could suggest to try this listener for the TextFields:
    l.AfterRender.Handler = "this.setRawValue(Ext.util.Format.setValueWithTowDecimal(this.getValue()))";
    l.AfterRender.Delay = 1;
  5. #5
    I am still struggling with that.
    Thanks for your effort.
    l.AfterRender.Handler = "this.setRawValue(Ext.util.Format.setValueWithTowDecimal(this.getValue()))";
    l.AfterRender.Delay = 1;
    for now this is working.please let me know after find a better solution.
  6. #6
    Hi,Danill are you find any suitable solution for this problem?
  7. #7
    Unfortunately, no. So far I am unable to find a better solution. I will be trying again.

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/774
    Last edited by Daniil; Mar 27, 2015 at 9:44 PM.

Similar Threads

  1. [CLOSED] Editor Field Mapping with component column
    By PoloTheMonk in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 06, 2014, 4:21 PM
  2. Replies: 2
    Last Post: Mar 04, 2014, 2:00 AM
  3. Replies: 4
    Last Post: Jul 30, 2013, 4:19 AM
  4. [CLOSED] How to disable component column editor
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 19, 2013, 7:16 PM
  5. Editor.Add for grid column not working on 0.7?
    By _Belial in forum 1.x Help
    Replies: 9
    Last Post: Mar 25, 2009, 5:12 AM

Posting Permissions