[CLOSED] Add new row in Grid with modal dialog

  1. #1

    [CLOSED] Add new row in Grid with modal dialog

    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.
    Click image for larger version. 

Name:	grid.JPG 
Views:	126 
Size:	63.6 KB 
ID:	24704
    Click image for larger version. 

Name:	Edit.JPG 
Views:	193 
Size:	58.1 KB 
ID:	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
    Last edited by fabricio.murta; Sep 17, 2016 at 12:30 AM. Reason: no user feedback for 7+ days
  2. #2
    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.

    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.

    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.

    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!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    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.Default))
    @(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.windowCategory.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.windowCategory.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)
                            )
    )
    )
    )
  4. #4
    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.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    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?
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Feb 27, 2015, 4:42 PM
  2. [CLOSED] Show a modal dialog when exception is caught with message (MVC)
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 26, 2012, 6:06 AM
  3. Replies: 7
    Last Post: Aug 12, 2011, 2:30 PM
  4. [CLOSED] Display modal while grid/page loads
    By bfolger in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 26, 2009, 7:05 PM
  5. Ext.Msg.confirm as modal dialog
    By madhugumma in forum 1.x Help
    Replies: 0
    Last Post: Jul 24, 2009, 11:37 AM

Tags for this Thread

Posting Permissions