[CLOSED] Linked various fields In Grid example in MVC and other functionality

  1. #1

    [CLOSED] Linked various fields In Grid example in MVC and other functionality

    As per
    http://forums.ext.net/showthread.php...example-in-MVC post I take update from svn and try to add not only combos but other fields like textfield. with help of this I tried but not success to do.I attach a Image and code here and describe what i want to do,plese help me to do this.

    CONTROLLER CODE
    public ActionResult Index()
            {
                List<object> countries = new List<object>(10);
                for (int i = 1; i <= 10; i++)
                {
                    countries.Add(new { Text = "C" + i });
                }
    
                return View(new IEnumerable<object>[]
                {
                    new List<object>
                    {
                        new {Country = "C1", State = "C1_S1", City = "C1_S1_C1", Region = "C1_S1_C1_R1",Population="1002564",Men="565442",Women="524169"},
                        new {Country = "C2", State = "C2_S1", City = "C2_S1_C1", Region = "C2_S1_C1_R1",Population="1002564",Men="565442",Women="524169"},
                        new {Country = "C3", State = "C3_S1", City = "C3_S1_C1", Region = "C3_S1_C1_R1",Population="1002564",Men="565442",Women="524169"},
                    },
                    countries
                });
            }
    
            public ActionResult GetStates(string query)
            {
                List<object> states = new List<object>(10);
                for (int i = 1; i <= 10; i++)
                {
                    states.Add(new { Text = query + "_S" + i });
                }
    
                return this.Store(states);
            }
    
            public ActionResult GetCities(string query)
            {
                List<object> cities = new List<object>(10);
                for (int i = 1; i <= 10; i++)
                {
                    cities.Add(new { Text = query + "_C" + i });
                }
    
                return this.Store(cities);
            }
    
            public ActionResult GetRegions(string query)
            {
                List<object> regions = new List<object>(10);
                for (int i = 1; i <= 10; i++)
                {
                    regions.Add(new { Text = query + "_R" + i });
                }
    
                return this.Store(regions);
            }
    
            public ActionResult Edit(string field, string recordData, int index)
            {
                List<string> fields = new List<string> { "country", "state", "city", "Population","Men","Women" };
                int startIndex = fields.IndexOf(field);
                JsonObject data = JSON.Deserialize<JsonObject>(recordData);
                ModelProxy record = X.GetCmp<Store>("Store1").GetAt(index);
    
                //switch (field)
                //{
                //    case "country":
                //         record.Set(fields[i], data["country"] + "_S1");
                ////           data["state"] = data["country"] + "_S1";
                //        break;
                //}
                for (int i = startIndex + 1; i < 6; i++)
                {
                    switch (fields[i])
                    {
                        case "state":
                            record.Set(fields[i], data["country"] + "_S1");
                            data["state"] = data["country"] + "_S1";
                            break;
                        case "city":
                            record.Set(fields[i], data["state"] + "_C1");
                            data["city"] = data["state"] + "_C1";
                            break;
                        case "region":
                            record.Set(fields[i], data["city"] + "_R1");
                            break;
                        case "Population":
                            // record.Set(fields[i], data["city"] + "_R1");
                            record.Set(fields[i], "5456");
                            break;
                        case "Men":
                            //record.Set(fields[i], data["city"] + "_R1");
                            record.Set(fields[i], "2566");
                            break;
                        case "Women":
                            //record.Set(fields[i], data["city"] + "_R1");
                            record.Set(fields[i], "2569");
                            break;
                    }
                }
    
                return this.Direct();
            }
    VIEW CODE

    @model System.Collections.IEnumerable[]
    @using Ext.Net 
    @using Ext.Net.MVC
    @{
        ViewBag.Title = "ComboBox with Template - Ext.NET MVC Examples";
        
        var X = Html.X();
    }
    
    
        <script>
    
            var addPlant = function () {
    
                var r = Ext.create('pr', {
                    //common: 'New Plant 1',
                    //light: 'Mostly Shady',
                    //price: 0,
                    //availability: Ext.Date.clearTime(new Date()),
                    //indoor: false
    
    
                }),
                     grid = App.GridPanel1;
    
                grid.store.insert(0, r);
                grid.editingPlugin.startEditByPosition({ row: 0, column: 0 });
            };
    
            var beforeEdit = function (ed, e) {
                var field = this.getEditor(e.record, e.column).field;
               
                switch (e.field) {
                    case "state":
                        field.allQuery = e.record.get('country');
                        
                        break;
                    case "city":
                        field.allQuery = e.record.get('state');
                        break;
                    case "Population":
                        field.allQuery = e.record.get('city');
                        break;
                    case "Men":
                        field.allQuery = e.record.get('city');
                        break;
                    case "Women":
                        field.allQuery = e.record.get('city');
                        break;
                }
            };
        </script>
    
    
    @X.ResourceManager()
       @(X.Store()
            .ID("CountryStore")
            .Model(X.Model()
                .Fields(X.ModelField()
                    .Name("text")
                    .ServerMapping("Text")
                    .Type(ModelFieldType.String)
                )
            )
            .DataSource(Model[1])
        )
    
        @(X.Store()
            .ID("StateStore")
            .Model(X.Model()
                .Fields(X.ModelField()
                    .Name("text")
                    .Mapping("Text")
                    .Type(ModelFieldType.String)
                )
            )
            .Proxy(X.AjaxProxy()
                .Url(Url.Action("GetStates"))
                .Reader(X.JsonReader().Root("data"))
            )
        )
    
       @(X.Store()
            .ID("CityStore")
            .Model(X.Model()
                .Fields(X.ModelField()
                    .Name("text")
                    .Mapping("Text")
                    .Type(ModelFieldType.String)
                )
            )
            .Proxy(X.AjaxProxy()
                .Url(Url.Action("GetCities"))
                .Reader(X.JsonReader().Root("data"))
            )
        )
    
      @*   @(X.Store()
            .ID("RegionStore")
            .Model(X.Model()
                .Fields(X.ModelField()
                    .Name("text")
                    .Mapping("Text")
                    .Type(ModelFieldType.String)
                )
            )
            .Proxy(X.AjaxProxy()
                .Url(Url.Action("GetRegions"))
                .Reader(X.JsonReader().Root("data"))
            )
        )*@
    
        @(X.GridPanel()
            .ID("GridPanel1")
            .Listeners(l =>
                            {
                                l.ViewReady.Fn = "addPlant";
                                l.ViewReady.Delay = 1;
                            })
            .Height(300)
            .Width(600)
            .Title("Grid")
            .ForceFit(true)
            .Store(X.Store()
                .ID("Store1")
                .Model(X.Model()
                    .Name("pr")
                    .Fields(
                        X.ModelField()
                            .Name("country")
                            .ServerMapping("Country")
                            .Type(ModelFieldType.String),
    
                        X.ModelField()
                            .Name("state")
                            .ServerMapping("State")
                            .Type(ModelFieldType.String),
    
                        X.ModelField()
                            .Name("city")
                            .ServerMapping("City")
                            .Type(ModelFieldType.String),
                            
                            X.ModelField()
                            .Name("population")
                            .ServerMapping("Population")
                            .Type(ModelFieldType.String),
                            
                            X.ModelField()
                            .Name("men")
                            .ServerMapping("Men")
                            .Type(ModelFieldType.String),
                            
                            X.ModelField()
                            .Name("women")
                            .ServerMapping("Women")
                            .Type(ModelFieldType.String)
    
                        //X.ModelField()
                        //    .Name("region")
                        //    .ServerMapping("Region")
                        //    .Type(ModelFieldType.String)
                    )
                )
                //.DataSource(Model[0])
            )
            .ColumnModel(
                X.Column()
                    .DataIndex("country")
                    .Text("Country")
                    .Editor(X.ComboBox()
                        .QueryMode(DataLoadMode.Local)
                        .TriggerAction(TriggerAction.All)
                        .StoreID("CountryStore")
                        .ValueField("text")
                        .DisplayField("text")
                    ),
    
                X.Column()
                    .DataIndex("state")
                    .Text("State")
                    .Editor(X.ComboBox()
                        .ID("ddlstate")
                        .QueryMode(DataLoadMode.Remote)
                        .TriggerAction(TriggerAction.All)
                        .StoreID("StateStore")
                        .ValueField("text")
                        .DisplayField("text")
                        .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
                    ),
                    
                X.Column()
                    .DataIndex("city")
                    .Text("City")
                    .Editor(X.ComboBox()
                        .ID("ddlcity")
                        .QueryMode(DataLoadMode.Remote)
                        .TriggerAction(TriggerAction.All)
                        .StoreID("CityStore")
                        .ValueField("text")
                        .DisplayField("text")
                        .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
                    ),
                      X.Column()
                    .DataIndex("Population")
                    .Text("Population")
                    .Editor(X.TextField()
                        .ID("txtpopulation")
                        
                        .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
                    )
                    ,
                      X.Column()
                    .DataIndex("Men")
                    .Text("Men")
                    .Editor(X.TextField()
                        .ID("txtMen")
                        
                        .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
                    )
                    ,
                      X.Column()
                    .DataIndex("Women")
                    .Text("Wo-Men")
                    .Editor(X.TextField()
                        .ID("txtwomen")
                        
                        .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
                    )
                    
                //X.Column()
                //    .DataIndex("region")
                //    .Text("Region")
                //    .Editor(X.ComboBox()
                //        .QueryMode(DataLoadMode.Remote)
                //        .TriggerAction(TriggerAction.All)
                //        .StoreID("RegionStore")
                //        .ValueField("text")
                //        .DisplayField("text")
                //        .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
                //    )
            )
            .Plugins(X.CellEditing()
                .Listeners(events => {
                    events.BeforeEdit.Fn = "beforeEdit";
    //                events.Edit.Handler = @"if (e.field === 'country') {
    //                                           // e.record.set('test2', e.value);
    //                                            App.ddlstate.getStore().reload();
    //                                        }
    //                                        else if(e.field === 'state')
    //                                        {
    //                                            App.ddlcity.getStore().reload();
    //                                        }
    //                                        else if(e.field === 'city')
    //                                        {
    //                                        App.GridPanel1.getStore().reload();
    //                                        }
    //                                        ";
                })
                .DirectEvents(events => 
                {
                    events.Edit.Action = "Edit";
                    
                    events.Edit.EventMask.ShowMask = true;
                    events.Edit.EventMask.CustomTarget = "App.GridPanel1";
                    events.Edit.ExtraParams.Add(new Parameter { Name = "field", Value = "e.field", Mode = ParameterMode.Raw });
                    events.Edit.ExtraParams.Add(new Parameter { Name = "index", Value = "e.rowIdx", Mode = ParameterMode.Raw });
                    events.Edit.ExtraParams.Add(new Parameter { Name = "recordData", Value = "e.record.data", Mode = ParameterMode.Raw });
                })
            )
    
        )
    If you run this code you can see the design like attached image.but i need control one after another.means.
    By default first row is there and only country combo is fill.If i select a country then the sate combo is fill.
    After selecting state related cities are load in citycombo and after select a city Population,men and wo-men is populate
    the same process is for every row inside this grid.

    I cant figure out how to do this one after another field populate.in my case all fields populate from firs time. and all fields populate on click any fields inside the grid.
    Attached Thumbnails mastedetails.png  
    Last edited by Daniil; Jul 09, 2014 at 4:53 AM. Reason: [CLOSED]
  2. #2
    Hi @matrixwebtech,

    Is there any JavaScript errors? I guess, there is. The error message might be quite useful to read.
  3. #3
    Hi daniil
    I run this code and found no js error in firebug.
    can you please provide me a sample code for

    By default first row is there and only country combo is fill.If i select a country then the sate combo is fill.
    After selecting state related cities are load in citycombo and after select a city Population,men and wo-men is populate
    the same process is for every row inside this grid.
  4. #4
    You should revise this logic:
    List<string> fields = new List<string> { "country", "state", "city", "Population","Men","Women" };int startIndex = fields.IndexOf(field);
    ...
    
    
    for (int i = startIndex + 1; i < 6; i++)
    {
        switch (fields[i])
        {
            ...
        }
    }
    With this logic you populate everything from the current column to the last column. According to your requirement you should populate the next column only.
  5. #5
    Hi daniil
    Thanks for your reply.I know there are the logic, but its my fault I am not figure out the logic.Its very helpful for me if you kindly explain this in a simple way.
    Thank you
  6. #6
    Well, you might need to change the loop to something like this:
    for (int i = startIndex + 1; i < startIndex + 2; i++)
  7. #7
    ok,
    so the logic is which field i need ,I have to add that field index with startIndex.can you please explain what beforeEdit script for?
  8. #8
    Please read:
    http://docs.sencha.com/extjs/4.2.1/#...x-cfg-allQuery

    So, that "allQuery" goes to the controller actions of loading the data to the ComboBoxes' Stores.

    For example,
    public ActionResult GetStates(string query)
    This "query" parameter is what you set to the allQuery property in the beforeEdit handler.
  9. #9
    thanks daniil
    with help of your code I will produce what i need.

Similar Threads

  1. Replies: 6
    Last Post: Apr 30, 2013, 6:10 AM
  2. Replies: 18
    Last Post: Mar 13, 2013, 10:40 AM
  3. [CLOSED] Linked dynamic searches in grid
    By Z in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 11, 2013, 3:59 AM
  4. Replies: 0
    Last Post: Apr 04, 2011, 6:05 PM
  5. The example Linked combos in grid.
    By FreddeM in forum Examples and Extras
    Replies: 1
    Last Post: Jan 04, 2010, 2:41 PM

Posting Permissions