RowExpander Sub-Grid remote loading issues

  1. #1

    RowExpander Sub-Grid remote loading issues

    Dears,

    Kindly, I am using Ext.Net MVC version 3 and I am facing some issue when using RowExpander to load a remote grid based on some parameters.

    1-How can I access the loaded sub-grid store to collect its data after modifications?
    2-when you add a new row in the main grid the previous rows' sub grid disappear, then if you go to that record and start modify any value its sub grid will appear again, but the TopBar buttons will not work in case you are using Chrome. How to solve this issue of sub-grid disappearance.

    3-"low priority" :TopBar icons in sub-grid is giving error (not found), how can I resolve this issue ?

    4-The last thing, "low priority" : When adding new row in the main grid and modify its cells the update icon "red one on top left" does not appear and the row is not exists in grid.getStore().getNewRecords() but in grid.getStore().getUpdatedRecords(). I think this happened because of live search cells ? if you have a solution for this also please provide.

    Please review the below codes for main grid and its remote loading sub-grid:

    Click image for larger version. 

Name:	1.png 
Views:	5 
Size:	22.3 KB 
ID:	22991

    @model IEnumerable<dynamic>
    @*
            @model IEnumerable<WebApplication1.Models.MarcData>
            <script type="text/javascript">
                var MarcData = Ext.JSON.decode('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))');//note this single quotes !!
            </script>
            <script src="~/Scripts/marcgrid.js"></script>
            @(Html.X().Window()
            .Width(800)
            .Title("Marc Data")
            .CloseAction(CloseAction.Destroy)
            .Items(
                Html.X().Panel()
                .Height(500)
                .AutoScroll(true)
                .Html("<div id='marcgrid'></div>")
            )
            )
    
            ------------------------------------------------
    
        @(Html.X().Window()
            .Width(800)
            .Title("Marc Data")
            .CloseAction(CloseAction.Destroy)
            .Items(Html.X().TreePanel()
                    .Height(500)
                    .Border(false)
                    .AutoScroll(true)
                    .RootVisible(false)
                    .Store(
                        Html.X().TreeStore().Proxy(Html.X().AjaxProxy().Url(Url.Action("GetChildren")))
                    )
                    .Root(
                            Html.X().Node().NodeID("{MainDataID:" + ViewData["MainDataID"] + "}").Text("Tags")
                    )
            )
        )
    
    *@
    
    @(Html.X().Window()
        .Width(800)
        .Title("Marc Data")
        .CloseAction(CloseAction.Destroy)
        .Items(
    
            Html.X().GridPanel()//main data id: MainDataID
            .ID("MainMarcGridID")
            .Title("Marc Data Grid")
            .Height(500)
            .EnableColumnResize(true)        
            .Plugins(
                Html.X().RowExpander()
                .SwallowBodyEvents(true)
                .Loader(Html.X().ComponentLoader()
                    .Url(Url.Action("getSubtagsGrid"))
                    .Mode(LoadMode.Component)//use this with component config !
                    .LoadMask(mask => mask.ShowMask = true)
                    .Params(new { MarcDataID = JRawValue.From("this.record.getId()"),tag =new JFunction("App.tag")})//this is nice work man !!!
                )
                 
            )
            
            .Store(
                Html.X().Store()
                .DataSource(Model)
                .Model(Html.X().Model()
                .IDProperty("MarcDataID")
                    .Fields(
                        new ModelField("MarcDataID", ModelFieldType.Int) { Mapping = "MarcDataID" },
                        new ModelField("tag", ModelFieldType.String) { Mapping = "tag" },
                        new ModelField("i1", ModelFieldType.String) { Mapping = "i1" },
                        new ModelField("i2", ModelFieldType.String) { Mapping = "i2" }
                    )
                )
            )
            .ColumnModel(
                Html.X().Column().DataIndex("tag").Text("Tag").Width(145).Editor(
                    Html.X().ComboBox()
                    .ID("tagsID")
                    .EmptyText("Select Tag")
                    .DisplayField("tag")
                    .ValueField("tag")
                    .ForceSelection(true)
                    .AllowBlank(false)
                    .QueryMode(DataLoadMode.Local)//done
                    .Store(Html.X().Store()
                        .Model(Html.X().Model()
                            .Fields(
                                new ModelField("tag", ModelFieldType.String) { Mapping = "tag" }
                            )
                        )
                        .DataSource(ViewData["tags"])
    
                    )
                ),
                Html.X().Column().DataIndex("i1").Text("First Indicator").Width(300).Editor(
                    Html.X().ComboBox()
                    .DisplayField("i1")
                    .ValueField("i1")
                    .TypeAhead(false)
                    .ForceSelection(true)
                    .PageSize(5)
                    .HideTrigger(true)
                    .MinChars(0)
                    .TriggerAction(TriggerAction.Query)
                    .Store(Html.X().Store()
    	                .AutoLoad(false)
    	                .Proxy(Html.X().AjaxProxy()
    		                .Url(Url.Action("getIndicator1"))
    		                .ActionMethods(am => am.Read = HttpMethod.POST)
    		                .Reader(Html.X().JsonReader().RootProperty("data"))
    	                )
                        .Parameters(ps => ps.Add(new StoreParameter("tag", "App.tag", ParameterMode.Raw)))//use raw option to execute the code !
    	                .Model(Html.X().Model()
    		                .Fields(
    			                new ModelField("i1", ModelFieldType.String) { Mapping = "i1" }
    	                    )
                        )
                    )  
                ),
                Html.X().Column().DataIndex("i2").Text("Second Indicator").Width(300).Editor(
                    Html.X().ComboBox()
                    .DisplayField("i2")
                    .ValueField("i2")
                    .TypeAhead(false)
                    .ForceSelection(true)
                    .PageSize(5)
                    .HideTrigger(true)
                    .MinChars(0)
                    .TriggerAction(TriggerAction.Query)
                    .Store(Html.X().Store()
                        .AutoLoad(false)
                        .Proxy(Html.X().AjaxProxy()
                            .Url(Url.Action("getIndicator2"))
                            .ActionMethods(am => am.Read = HttpMethod.POST)
                            .Reader(Html.X().JsonReader().RootProperty("data"))
                        )
                        .Parameters(ps => ps.Add(new StoreParameter("tag", "App.tag", ParameterMode.Raw)))//use raw option to execute the code !
                        .Model(Html.X().Model()
                            .Fields(
                                new ModelField("i2", ModelFieldType.String) { Mapping = "i2" }
                            )
                        )
                    ) 
                )
            )
    
            .TopBar(
                Html.X().Toolbar()
                .Items(
                    Html.X().Button()
                        .Text("Add")
                        .Icon(Icon.Add)
                        .Handler("this.up('grid').store.add({tag:'',i1:'',i2:''});"),
    
                    Html.X().Button()
                        .ItemID("btnRemove")
                        .Text("Delete")
                        .Icon(Icon.Exclamation)
                        .Handler("this.up('grid').deleteSelected();")
                )
            )
    
            .SelectionModel(Html.X().CellSelectionModel().Listeners(ls => ls.SelectionChange.Handler = "function(e,d){if(d[0] != null) App.tag = d[0].data.tag;}"))//here we set a global tag then use it in params sending !
            .Plugins(
                Html.X().CellEditing().ClicksToEdit(1)//.Listeners(ls => ls.Edit.Fn = "edit")
            )
    
        )
        .Buttons(
            Html.X().Button()
            .Text("Save")
            .Handler("alert('WOWOWOWW')")
        )
    )
    @model IEnumerable<dynamic>
        <script type="text/javascript">
                var edit = function (editor, e) {
                    /*
                        "e" is an edit event with the following properties:
    
                            grid - The grid
                            record - The record that was edited
                            field - The field name that was edited
                            value - The value being set
                            originalValue - The original value for the field, before the edit.
                            row - The grid table row
                            column - The grid Column defining the column that was edited.
                            rowIdx - The row index that was edited
                            colIdx - The column index that was edited
                    */
    
                    // Call DirectMethod
                    if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
                        Ext.net.DirectMethod.request({
                            url: '@(Url.Action("Edit"))',
                            params: {
                                id: e.record.data.ID,
                                field: e.field,
                                oldValue: e.originalValue,
                                newValue: e.value,
                                customer: e.record.data
                            }
                        });
                    }
                };
        </script>
    
        @(Html.X().GridPanel()//main data id: MainDataID
        .EnableColumnResize(true)
        .ColumnLines(true)
        .HideHeaders(true)
        //.Title("Sub-Tags")
        .Height(100)
        .Store(
            Html.X().Store()
            .DataSource(Model)
            .Model(Html.X().Model()
                .Fields(
                    new ModelField("MarcDataID", ModelFieldType.Int) { Mapping = "MarcDataID" },
                    new ModelField("t", ModelFieldType.String) { Mapping = "t" },
                    new ModelField("d", ModelFieldType.String) { Mapping = "d" }
                )
            )
        )
        .ColumnModel(
            Html.X().Column().DataIndex("t").Width(200).Editor(
                Html.X().ComboBox()
                
                .DisplayField("t")
                .ValueField("t")
                .TypeAhead(false)
                .ForceSelection(true)
                .PageSize(5)
                .HideTrigger(true)
                .MinChars(0)
                .TriggerAction(TriggerAction.Query)
                .Store(Html.X().Store()
                    .AutoLoad(false)
                    .Proxy(Html.X().AjaxProxy()
                        .Url(Url.Action("getSubtags"))
                        .ActionMethods(am => am.Read = HttpMethod.POST)
                        .Reader(Html.X().JsonReader().RootProperty("data"))
                    )
                    .Parameters(ps => ps.Add(new StoreParameter("tag", "App.tag", ParameterMode.Raw)))//use raw option to execute the code !
                    .Model(Html.X().Model()
                        .Fields(
                            new ModelField("t", ModelFieldType.String) { Mapping = "t" }
                        )
                    )
                ) 
            ),
            Html.X().Column().DataIndex("d").Width(500).Editor(Html.X().TextField())
        )
    
        .TopBar(
            Html.X().Toolbar()
            .Items(
                Html.X().Button()
                    .Text("Add")
                    //.Icon(Icon.Add)
                    .Handler("this.up('grid').store.insert(0, {MarcDataID:0,t:'',d:''});"),//get parent ID
    
                Html.X().Button()
                    .Text("Delete")
                    //.Icon(Icon.Exclamation)
                    .Handler("this.up('grid').deleteSelected();")
            )
        )
        
    
        .SelectionModel(Html.X().CellSelectionModel())
        .Plugins(
            Html.X().CellEditing().ClicksToEdit(1)//.Listeners(ls => ls.Edit.Fn = "edit")
        )
    
        )
    
    
    @*
    
    <script type="text/javascript">
        var marcDataSources = Ext.JSON.decode('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))');//note this single quotes !!, will contains the sub grid data.
        //so I will generate the dropdowns based on this object
    </script>
    
    <script src="~/Scripts/marcsubgrid.js"></script>
    
    @(Html.X().Panel()
    .ID("marcsubgrid_" + Model.MarcDataID)
    .Title("Sub-Tags")
    .Html("<div id='marcsubgrid_" + Model.MarcDataID + "'></div>")//need to add dynamic ID ! marcsubgrid_240
    .Height(100)
    .AutoScroll(true)
    )
    
    *@
            public ActionResult ShowMarcFormatData()
            {
                ViewData["MainDataID"] = 29;
                //List<MarcData> marcData = db.MarcDatas.Where(q => q.MainDataID == 29).ToList<MarcData>();
                List<dynamic> marcModel = new List<dynamic>();
                /*
                foreach (MarcData row in marcData)
                {
                    marcModel.Add(getRowData(row));
                }
                */
                //need to return list of header tags and each one with list of sub tags.
    
                //Session["marcModel"] = marcModel;
                ViewData["tags"] = marcutl.Tags;
                return new Ext.Net.MVC.PartialViewResult()
                {
                    Model = marcModel,
                    ViewData = ViewData
                };
            }
  2. #2
    Any solution, please.
  3. #3
    Please help me !
  4. #4
  5. #5
    Hi matrixwebtech,

    Many thanks for your replay. Your posts give me some ideas that solved the issues.

    For issue 1: you can generate a dynamic ID from the server based on the row number while loading the sub-grid.
    For issue 2: Just refresh the grid view !

    Issues 3 and 4, I cannot solve them ! but they are not important right now.

    Thanks again for your kind help.

Similar Threads

  1. Replies: 4
    Last Post: Jan 18, 2015, 5:51 PM
  2. [CLOSED] GridPanel RowExpander issues
    By jpadgett in forum 2.x Premium Help
    Replies: 9
    Last Post: May 12, 2014, 3:47 PM
  3. Grid Panel Remote Loading
    By Ronan in forum 2.x Help
    Replies: 2
    Last Post: Jan 22, 2013, 11:43 AM
  4. Remote Combox ObjectDataSource Loading Bug
    By protactinium in forum 1.x Help
    Replies: 2
    Last Post: Feb 08, 2010, 7:25 PM
  5. [FIXED] [V0.7] IFrame loading issues
    By methode in forum Bugs
    Replies: 3
    Last Post: Dec 09, 2008, 7:33 AM

Tags for this Thread

Posting Permissions