How gridpanel goes to editable mode on rowcommand

  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:36 AM.
  2. #2
    Hello, isn't this the example you are looking for?
    https://examples3.ext.net/#/DataView...ntView/Editor/

    And the sample below is exactly an gridPanel with editor -and- save/cancel buttons
    https://examples3.ext.net/#/GridPane...ins/RowEditor/

    I hope one of these helps you build your grid.

Similar Threads

  1. Replies: 3
    Last Post: Oct 13, 2013, 7:06 AM
  2. Replies: 2
    Last Post: Jan 10, 2013, 3:51 PM
  3. Replies: 13
    Last Post: Jun 09, 2011, 12:36 PM
  4. Replies: 3
    Last Post: Jun 03, 2011, 12:10 PM
  5. Gridpanel delete a record with rowcommand
    By umitcel in forum 1.x Help
    Replies: 3
    Last Post: Jul 23, 2010, 9:27 AM

Tags for this Thread

Posting Permissions