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

[matrixwebtech]

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.

[Daniil]

Hi @matrixwebtech,

Is there any JavaScript errors? I guess, there is. The error message might be quite useful to read.

[matrixwebtech]

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.

[Daniil]

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.

[matrixwebtech]

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

[Daniil]

Well, you might need to change the loop to something like this:

for (int i = startIndex + 1; i < startIndex + 2; i++)

[matrixwebtech]

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?

[Daniil]

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.

[matrixwebtech]

thanks daniil
with help of your code I will produce what i need.