PDA

View Full Version : How gridpanel goes to editable mode on rowcommand click



parhamparsa
Jan 08, 2015, 4:08 AM
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")
)
)
)

Dimitris
Jan 08, 2015, 12:40 PM
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.index Of(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.index Of(form.record));
")
)
.Listeners(l =>
{
l.AfterRender.Handler = "this.getForm().loadRecord(this.record);";
})
)
)
)

parhamparsa
Jan 10, 2015, 6:26 AM
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??????