PDA

View Full Version : [CLOSED] Add new row in Grid with modal dialog



Fahd
Aug 05, 2016, 9:56 PM
Hi Support,

I'm working with Grid which needs to support CRUD operation. What I'm trying to achieve is to have Add record command in grid top tool bar, also each rows with edit and delete command. Something like below.
24704
24705

The problem is, I don't see any built in way where EXT.Net generate Popup / Modal dialog on Add/Edit operation based on grid's strongly typed model something like FormPanelFor do. This will save time from writing Modal windows from scratch for each grid.

FYI, I'm using Asp.Net MVC 5 and EXT.Net 4.

Do you have any suggestion for implementing something like that ?

Thanks

fabricio.murta
Aug 06, 2016, 6:24 AM
Hello @Fahd!

Well, we have some examples in our examples explorers that illustrate some uses that may be just what you need.

Here's an MVC example using the field binding concept to show data elsewhere: GridPanel - Data with Details - Binding (http://mvc4.ext.net/#/GridPanel_Data_with_Details/Binding/).

Maybe you need an example with an actual form. This is in WebForms, but I don't think you'd need any specific change hard to infer in MVC for it: GridPanel - Data with Details - Form Details (http://examples4.ext.net/#/GridPanel/Data_with_Details/Form_Details/).

Going a little further, there's this MVC example with not just the grid and form, but the form is editable, so that changes in the form are passed down to the grid: GridPanel - Update - AutoSave (http://mvc4.ext.net/#/GridPanel_Update/AutoSave/).

If you find all those samples above don't help you at all, please give both MVC and Webforms examples exmplorers a trial, you may find something that suits you better.

If still nothing about that helps at all, and nothing fits your scenario for some reason, aside screenshots, please provide a fully runnable (yet simplified so it only and only includes essential elements for your use case) sample code so we can try and get you a better solution based on your actual needs.

I hope this helps!

Fahd
Aug 10, 2016, 10:15 PM
Thanks for your help, I took some reference from your suggested example and finally implemented using Window as Modal. Is there any better approach than what I have below ?

Also, I've details grid(gpFooSubCategory) on my page which refresh on master grid(gpFooCategory) row select. I'm doing Ajax proxy for details grid store But somehow I'm not getting selected row value from master grid, which I need to pass as extra parameter into Ajax call. Can you please take a look?


@model TestApp.Models.FooViewModel
@{
ViewBag.Title = "FooSetup";
Layout = null;
var X = Html.X();
}


<script>

var changeCellColor = function (value, metaData) {
metaData.style = "background-color:" + '#' + value;
return value;
}



var onCategorySaveSuccess = function (grid, data) {
grid.show();
grid.getStore().loadData(data);
};


</script>

@(Html.X().ResourceManager().Theme(Ext.Net.Theme.D efault))
@(X.Window()
.ID("windowCategory")
.Title("Foo Category")
.Icon(Icon.Application)
.Height(200)
.Width(520)
.BodyStyle("background-color: #fff;")
.Hidden(true)
.Resizable(false)
.Modal(true)
.Layout(LayoutType.Fit)
.Items(
Html.X().FormPanel()
.ID("fpCategory")
.Frame(true)
.Width(500)
.DefaultAnchor("100%")
.DefaultButton("1")
.FieldDefaults(d =>
{
d.LabelAlign = LabelAlign.Left;
})
.Items(
Html.X().Hidden().Name("FooCategoryID"),
Html.X().TextField().Name("FooCategoryDescription").FieldLabel("Foo Category Desc."),
Html.X().ComboBox().Name("FooColorID").Items(ViewBag.FooColorList).FieldLabel("Color"),
Html.X().Checkbox().Name("Active").FieldLabel("Active")
)
.Buttons(
Html.X().Button()
.Text("Save")
.Icon(Icon.Disk)
.DirectEvents(de =>
{
de.Click.Url = Url.Action("CategorySubmit");
de.Click.EventMask.ShowMask = true;
de.Click.Success = "onCategorySaveSuccess(response)";

}),

Html.X().Button()
.Text("Reset")
.Handler("this.up('form').getForm().reset(); this.up('form').defaultButton='1';")
)
)
)

@(
Html.X().FormPanel()
.ID("fpFooSetup")
.Title("Foo Setup")
.BodyPadding(10)
.DefaultAnchor("100%")
.Items(

X.Container()
.LayoutConfig(l => l.Add(new VBoxLayoutConfig() { Align = VBoxAlign.Left }))
.MarginSpec("0 0 0 10")
.Items(
Html.X().GridPanel().ID("gpFooCategory")
.Title("Foo Category")
.Width(550)
.Height(300)
.ForceFit(true)
.SetAutoScroll(true)
.Store(Html.X().Store()
.AutoLoad(true)
.ID("FooCategoryStore")
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetFooCategory"))
.Reader(X.JsonReader().RootProperty("data"))

)
.Model(Html.X().Model().IDProperty("FooCategoryID")
.Fields(
new ModelField("FooCategoryID"),
new ModelField("FooCategoryDescription"),
new ModelField("FooColorID"),
new ModelField("Active")
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("FooCategoryID").Hidden(true),
Html.X().Column().Text("Category Desc.").DataIndex("FooCategoryDescription").Width(100),
Html.X().Column().Text("Color").DataIndex("FooColorID").Renderer("changeCellColor"),
Html.X().CheckColumn().Text("Active").DataIndex("Active").Width(50),
Html.X().CommandColumn()
.Width(70)
.Commands(
//Html.X().GridCommand()
// .CommandName("Delete")
// .Icon(Icon.Delete)
// .Text("Delete"),

Html.X().GridCommand()
.CommandName("Edit")
.Icon(Icon.NoteEdit)
.Text("Edit")
)
.Listeners(ls => ls.Command.Handler = "App.fpCategory.getForm().loadRecord(record);App.wi ndowCategory.show();")
)
.SelectionModel(
Html.X().RowSelectionModel()
.Mode(SelectionMode.Single)
.Listeners(l =>
{
l.Select.Handler = "App.gpFooSubCategory.store.reload();";
})
)
.TopBar(
Html.X().Toolbar()
.Items(
Html.X().Button()
.Text("Add")
.Icon(Icon.Add)
.Handler("App.fpCategory.getForm().reset();App.windowCategor y.show();")
)
),


Html.X().GridPanel()
.ID("gpFooSubCategory")
.Title("Foo Sub-Category")
.Width(550)
.Height(200)
.MarginSpec("0 10 10 0")
.SetAutoScroll(true)
.Store(Html.X().Store().ID("FooSubCategoryStore")
.AutoLoad(false)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetFooSubCategoryById"))
.Reader(X.JsonReader().RootProperty("data"))
.ExtraParams(p => p.Add(new Ext.Net.Parameter
{
Name = "FooCategoryId",
Value = "Ext.getCmp('#{gpFooCategory}') && #{gpFooCategory}.getSelectionModel().hasSelection( ) ? #{gpFooCategory}.getSelectionModel().getSelected() .data.FooCategoryID : -1",
Mode = ParameterMode.Raw,
}))
)
.Model(Html.X().Model().IDProperty("FooSubCategoryID")
.Fields(
new ModelField("FooSubCategoryID"),
new ModelField("FooCategoryID"),
new ModelField("FooSubCategoryDescription"),
new ModelField("ChangeOver"),
new ModelField("Active")
)
)

)
.ColumnModel(
Html.X().Column().DataIndex("FooSubCategoryID").Hidden(true),
Html.X().Column().Text("FooCategoryID").DataIndex("FooCategoryID").Hidden(true),
Html.X().Column().Text("Foo Sub-Category Desc.").DataIndex("FooSubCategoryDescription").Width(100),
Html.X().Column().Text("ChangeOver").DataIndex("ChangeOver").Width(50),
Html.X().Column().Text("Active").DataIndex("Active").Width(50)
)
)
)
)

fabricio.murta
Aug 11, 2016, 8:56 PM
Hello @Fahd!

We can help, yes, but for that we'll need you to provide a runnable sample with all required components and without a layout (all defined in the model+view+controller code you provide). Also, as simple as possible, without elements not essential to reproduce the issue you are facing. Providing unneeded and unrelated code will only confuse us while trying to reproduce your test case.

fabricio.murta
Sep 02, 2016, 9:03 PM
Hello! Do you still need help regarding this issue? Could you come up with a runnable simplified test case so we could try and help you out?