How gridpanel goes to editable mode on rowcommand click

  1. #1

    How gridpanel goes to editable mode on rowcommand click

    I have gridpanel, my target is that when i click on rowcommand the gridpanel change mode and go to editable mode and show two button of save and cancel, and when i press save data save to model and gridpanel goes to normal mode and when i press cancel no change happen and goes to normal mode, is there any way to handle this???


            @(Html.X().ResourceManager())
    
            @(Html.X().GridPanel()
            .Title("ComponentColumn Pin Editor")
            .Width(1000)
            .Height(300)
            .Store(Html.X().Store()
                .Model(Html.X().Model()
                    .Fields(
                        new ModelField("Id", ModelFieldType.Int),
                        new ModelField("FName", ModelFieldType.String),
                        new ModelField("LName", ModelFieldType.String),
                        new ModelField("Position", ModelFieldType.String),
                        new ModelField("Salary", ModelFieldType.Float),
                        new ModelField("Register", ModelFieldType.Date)
                    )
                )
                .DataSource(Model)
            )
            .ColumnModel(
                Html.X().ComponentColumn()
                    .Editor(true)
                    .OverOnly(true)
                    .Pin(true)
                    .DataIndex("Id")
                    .Flex(1)
                    .Text("Player Number")
                    .Component(Html.X().NumberField()),
    
                Html.X().ComponentColumn()
                    .Editor(true)
                    .OverOnly(true)
                    .Pin(true)
                    .DataIndex("FName")
                    .Flex(1)
                    .Text("First Name")
                    .Component(Html.X().TextField()),
    
                Html.X().ComponentColumn()
                    .Editor(true)
                    .OverOnly(true)
                    .Pin(true)
                    .DataIndex("LName")
                    .Flex(1)
                    .Text("LastName")
                    .Component(Html.X().TextField()),
    
               Html.X().ComponentColumn()
                    .Editor(true)
                    .OverOnly(true)
                    .Pin(true)
                    .DataIndex("Position")
                    .Flex(1)
                    .Text("Position")
                    .Component(Html.X().TextField()),
    
              Html.X().ComponentColumn()
                            .Editor(true)
                            .OverOnly(true)
                            .Pin(true)
                            .DataIndex("Salary")
                            .Flex(1)
                            .Text("Salary")
                            .Renderer(RendererFormat.UsMoney)
                            .Component(Html.X().NumberField()),
    
                Html.X().ComponentColumn()
                    .Editor(true)
                    .OverOnly(true)
                    .Pin(true)
                    .DataIndex("Register")
                    .Flex(1)
                    .Text("Register")
                    .Renderer(new Renderer()
                        {
                            Format = RendererFormat.Date,
                            FormatArgs = new string[] { "'d/m/Y'" }
                        })
                    .Component(Html.X().DateField().Format("dd/MM/yyyy")),
    
                    Html.X().CommandColumn()
                        .Width(100)
                        .Commands(
    
                                    Html.X().GridCommand()
                                    .CommandName("Edit")
                                    .Text("Edit")
                                    .Icon(Icon.ApplicationEdit)
                                    .ToolTip(tt => tt.Text = "Edit"),
                                    
                                    Html.X().GridCommand()
                                    .CommandName("Delete")
                                    .Text("Delete")
                                    .Icon(Icon.Delete)
                                    .ToolTip(tt => tt.Text = "Delete"),
                                    
                                    Html.X().GridCommand()
                                    .CommandName("Save")
                                    .Text("Save")
                                    .Icon(Icon.ApplicationEdit)
                                    .ToolTip(tt => tt.Text = "Save"),
                                    
                                    Html.X().GridCommand()
                                    .CommandName("Cancel")
                                    .Text("Cancel")
                                    .Icon(Icon.ApplicationEdit)
                                    .ToolTip(tt => tt.Text = "Cancel")
                        )
                    )
            )
    Last edited by parhamparsa; Jan 08, 2015 at 4:12 AM.
  2. #2
    Hello,

    A (nice) solution would be the combination of an Edit row command and the RowExpander plugin, which provides Save and Cancel buttons. Please, look at the following example:

    @model System.Collections.IEnumerable
    
    @{
        ViewBag.Title = "Ext.NET MVC Examples";
    }
    
    
        <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 + "%");
            };
    
            var editRow = function (obj, index) {
                var rowExpander = obj.up("gridpanel").getRowExpander();
                rowExpander.expandRow(index);
            }
        </script>
    
    
        <h1>Basic Row Command</h1>
            
        <br />
            
        @(Html.X().ResourceManager())
        @(Html.X().Store()
            .ID("Store1")
            .Model(Html.X().Model()
                .Fields(
                    new ModelField("company"),
                    new ModelField("price", ModelFieldType.Float),
                    new ModelField("change", ModelFieldType.Float),
                    new ModelField("pctChange", ModelFieldType.Float),
                    new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
                )
            )
            .DataSource(Model)
        )
    
        @(Html.X().GridPanel()
            .ID("GridPanel1")
            .Title("Icons with tips")
            .Width(600)
            .Height(300)
            .StoreID("Store1")
            .ColumnModel(
                Html.X().Column()
                    .Text("Company")
                    .DataIndex("company")
                    .Flex(1),
                Html.X().Column()
                    .Text("Price")
                    .DataIndex("price")
                    .Width(75)
                    .Renderer(RendererFormat.UsMoney),
                Html.X().Column()
                    .Text("Change")
                    .DataIndex("change")
                    .Width(75)
                    .Renderer("change"),
                Html.X().Column()
                    .Text("Change")
                    .DataIndex("pctChange")
                    .Width(75)
                    .Renderer("pctChange"),
                Html.X().DateColumn()
                    .Text("Last Updated")
                    .Width(85)
                    .DataIndex("lastChange"),
                Html.X().CommandColumn()
                    .Width(60)
                    .Commands(
                        Html.X().GridCommand()
                            .CommandName("Delete")
                            .Icon(Icon.Delete)
                            .ToolTip(tt => tt.Text = "Delete"),
                        
                        Html.X().GridCommand()
                            .CommandName("Edit")
                            .Icon(Icon.NoteEdit)
                            .ToolTip(tt => tt.Text = "Edit")
                    )
                    .Listeners(ls => ls.Command.Handler = "if (command == 'Edit') editRow(this, recordIndex);")
            )
                .Plugins(
                    Html.X().RowExpander()
                        .ID("RowExpander1")
                        .SingleExpand(false)
                        .Component(
                            Html.X().FormPanel()
                                .BodyPadding(6)
                                .Height(180)
                                .Border(false)
                                .DefaultAnchor("-5")
                                .Cls("white-footer")
                                .Items(
                                    Html.X().TextField().Name("company").FieldLabel("Company"),
                                    Html.X().NumberField().Name("price").FieldLabel("Price"),
                                    Html.X().NumberField().Name("change").FieldLabel("Change"),
                                    Html.X().NumberField().Name("pctChange").FieldLabel("% Change"),
                                    Html.X().DateField().Name("lastChange").FieldLabel("Last Updated")
                                )
                                .Buttons(
                                    Html.X().Button()
                                        .Text("Save")
                                        .Icon(Icon.Disk)
                                        .Handler(@"
                                            var grid = this.up('grid'), form = this.up('form');
                                            grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));
                                            form.getForm().updateRecord(form.record);
                                        "),
    
                                    Html.X().Button()
                                        .Text("Cancel")
                                        .Icon(Icon.Decline)
                                        .Handler(@"
                                            var grid = this.up('grid'), form = this.up('form');
                                            grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));
                                        ")
                                )
                                .Listeners(l =>
                                {
                                    l.AfterRender.Handler = "this.getForm().loadRecord(this.record);";
                                })
                        )
                )        
        )
  3. #3
    Thanks Mimisss for your answer, but i wonder if there is any way that edit the grid on the row and not open new plugin for editing??????

Similar Threads

  1. Replies: 3
    Last Post: Jan 18, 2015, 4:50 PM
  2. How gridpanel goes to editable mode on rowcommand
    By parhamparsa in forum 3.x Help
    Replies: 1
    Last Post: Jan 14, 2015, 2:04 AM
  3. Replies: 3
    Last Post: Oct 13, 2013, 7:06 AM
  4. [CLOSED] Editable gridpanel - Date lost in DateField on click for edit
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 12, 2013, 8:46 AM
  5. Replies: 2
    Last Post: Jan 10, 2013, 3:51 PM

Tags for this Thread

Posting Permissions