What's New?

[CLOSED] Load combobox dynamically inside gridpanel editorfield

Page 1 of 2 12 LastLast
  1. #1
    Jul 09, 2014, 7:16 PM

    [CLOSED] Load combobox dynamically inside gridpanel editorfield

    Hi
    I write code as bellow

    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 "stateid":
                    field.allQuery = e.record.get('countryid');

                    break;
                case "cityid":
                    field.allQuery = e.record.get('stateid');
                    break;



            }
        };

        var countryRenderer = function (value) {
           // alert(value)
            var r = App.CountryStore.getById(value);
           
            if (Ext.isEmpty(r)) {
                return "";
            }
          //  alert(r.data.Text)
            //console.log(r.data.Text)
            return r.data.Text;
        };
        var stateRenderer = function (value) {
            var r = App.StateStore.getById(value);
            console.log(r)
            if (Ext.isEmpty(r)) {
                return "";
            }
            //  alert(r.data.Text)
            console.log(r)
            return r.data.state;
        };
        var cityRenderer = function (value) {
            var r = App.CityStore.getById(value);
            console.log(r)
            if (Ext.isEmpty(r)) {
                return "";
            }
            //  alert(r.data.Text)
           // console.log(r.data.city)
            return r.data.city;
        };

    </script>
 
 
@X.ResourceManager()

   @(X.Store()
        .ID("CountryStore")
        .Model(
            X.Model()
            .IDProperty("countryid")
            .Fields(
                       X.ModelField()
                       .Name("Text")
                       .ServerMapping("Text")
                       .Type(ModelFieldType.String)
                       ,
                       X.ModelField()
                       .Name("countryid")
                       .ServerMapping("countryid")
                       .Type(ModelFieldType.String)
                
            )
        )
        .DataSource(Model[1])
    )
 
    @(X.Store()
        .ID("StateStore")
        .Model(X.Model()
        .IDProperty("stateid")
            .Fields(
                X.ModelField()
                .Name("stateid")
                .Mapping("stateid")
                .Type(ModelFieldType.String)
                ,
                 X.ModelField()
                .Name("state")
                .Mapping("state")
                .Type(ModelFieldType.String)
            )
        )
        
        .Proxy(X.AjaxProxy()
            .Url(Url.Action("GetStates"))
            .Reader(X.JsonReader().Root("data"))
        )
    )
 
   @(X.Store()
        .ID("CityStore")
        .Model(X.Model()
            .IDProperty("cityid")
            .Fields(
                X.ModelField()
                .Name("cityid")
                .Mapping("cityid")
                .Type(ModelFieldType.String)
                ,
                 X.ModelField()
                .Name("city")
                .Mapping("city")
                .Type(ModelFieldType.String)
            )
        )
        .Proxy(X.AjaxProxy()
            .Url(Url.Action("GetCities"))
            .Reader(X.JsonReader().Root("data"))
        )
    )
 
 
  
 
    @(X.GridPanel()
        .ID("GridPanel1")
                .TopBarItem(X.Button().Text("Add").Listeners(le => { le.Click.Fn = "addPlant"; }).Icon(Icon.Add)
                  )
        .Listeners(l =>
                        {
                            l.ViewReady.Fn = "addPlant";
                            l.ViewReady.Delay = 1;
                        })
        .Frame(true)  
        .Features(X.Summary())              
        .Height(300)
        .Width(600)
        .Title("Grid")
        .ForceFit(true)
        .Store(X.Store()
            .ID("Store1")
            .Model(X.Model()
                .Name("pr")
                .Fields(
                
                    X.ModelField()
                        .Name("countryid")
                        .Type(ModelFieldType.String),
                        X.ModelField()
                        .Name("Text")
                        .Type(ModelFieldType.String),
                        
                    X.ModelField()
                        .Name("stateid")
                        .Type(ModelFieldType.String),
                        X.ModelField()
                        .Name("state")
                        .Type(ModelFieldType.String),
 
                   
 
                    X.ModelField()
                        .Name("cityid")
                       
                        .Type(ModelFieldType.String),
                         X.ModelField()
                        .Name("city")
                       
                        .Type(ModelFieldType.String),
                         
                        X.ModelField()
                        .Name("population")
                        
                        .Type(ModelFieldType.Int),
                         
                        X.ModelField()
                        .Name("men")
                       
                        .Type(ModelFieldType.String),
                         
                        X.ModelField()
                        .Name("women")
                        
                        .Type(ModelFieldType.String)
 
                    
                )
            )
            .DataSource(Model[0])
            
        )
        .View(
                Html.X().GridView().MarkDirty(false)
            )
             
        .ColumnModel(
            X.Column()
                .DataIndex("countryid")
                .Text("Country")
                .Renderer("countryRenderer")
                .Editor(X.ComboBox()
                    .QueryMode(DataLoadMode.Local)
                    //.TriggerAction(TriggerAction.All)
                    .StoreID("CountryStore")
                    .ValueField("countryid")
                    .DisplayField("Text")
                ),
 
            X.Column()
                .DataIndex("stateid")
                .Text("State")
                .Renderer("stateRenderer")
                .Editor(X.ComboBox()
                    .ID("ddlstate")
                    .QueryMode(DataLoadMode.Remote)
                    .TriggerAction(TriggerAction.All)
                    .StoreID("StateStore")
                    .ValueField("stateid")
                    .DisplayField("state")
                    .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
                ),
                 
            X.Column()
                .DataIndex("cityid")
                .Text("City")
                .Renderer("cityRenderer")
                .Editor(X.ComboBox()
                    .ID("ddlcity")
                    .QueryMode(DataLoadMode.Remote)
                    .TriggerAction(TriggerAction.All)
                    .StoreID("CityStore")
                    .ValueField("cityid")
                    .DisplayField("city")
                    .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
                ),
                 
                 Html.X().SummaryColumn()
                    .Width(75)
                    .Text("Population")
                    .DataIndex("population")
                    .SummaryType(SummaryType.Sum)
                    .Renderer("return value ;")
                    .SummaryRenderer("return value ;")
                    .Editor(
                        Html.X().NumberField().AllowBlank(false).MinValue(0).StyleSpec("text-align:left")
                    ),
                 
                  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 }))
                )
                ,
                 Html.X().ImageCommandColumn()
                    .Width(30)
                    .Commands(
                        Html.X().ImageCommand()
                            .Icon(Icon.Bin)
                            .ToolTip(t =>
                            {
                                t.Text = "Delete plant";
                                
                            })
                            .CommandName("delete")
                    )
                    .Listeners(l =>
                    {
                        l.Command.Handler = "this.up('gridpanel').store.removeAt(recordIndex);";

                    })


                 
             
        )
        .Plugins(X.CellEditing()
            .Listeners(events => {
                events.BeforeEdit.Fn = "beforeEdit";
            })
            .ClicksToEdit(1)
            .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 });
            })
        )
        
 
    )
@(X.Button().Text("Save").Icon(Icon.DatabaseSave).DirectEvents(d =>
             {
 
                 d.Click.Action = "save";
 
                 d.Click.ExtraParams.Add(new Parameter
                 {
                     Name = "values",
                     Value = "Ext.encode(#{GridPanel1}.getRowsValues())",
                     Mode = ParameterMode.Raw
                 });
 
 
             })
             )

    CONTROLLER CODE

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
using System.Text;
namespace ERP_test.Controllers
{
    public class masterdetailsController : Controller
    {
        //
        // GET: /masterdetails/
        
        public ActionResult Index(string id)
        {
            List<object> countries = new List<object>(10);
            List<object> states = new List<object>(10);
            for (int i = 1; i <= 10; i++)
            {
                countries.Add(new { Text = "C" + i,countryid=i });
            }
            
            if (id == "edit")
            {
               
                return View(new IEnumerable<object>[]
                        {
                             new List<object>
                            {
                                new {countryid = "1", stateid = "1",state="C1_S1", cityid = "1", population = "25",men="58",women="25"},
                                new {countryid = "1", stateid = "1",state="C1_S1", cityid = "1", population = "65",men="45",women="65"},
                                new {countryid = "1", stateid = "1",state="C1_S1", cityid = "2", population = "56",men="67",women="89"},
                            },
                            countries
                        });
            }
            else
            {
                return View(new IEnumerable<object>[]
                        {
                             new List<object>
                            {
                                
                                new {country = "", state = "", city = "", population = "0",men="0",women="0"},
                            },
                            countries
                        });
            }
        }

        public ActionResult GetStates(string query)
        {
            List<object> states = new List<object>(10);
            if (string.IsNullOrEmpty(query) == false)
            {
                for (int i = 1; i <= 10; i++)
                {
                    states.Add(new { stateid=i,state = query + "_S" + i });
                }
            }
          

            return this.Store(states);
        }

        public ActionResult GetCities(string query)
        {
            List<object> cities = new List<object>(10);
            if (string.IsNullOrEmpty(query) == false)
            {
                for (int i = 1; i <= 10; i++)
                {
                    cities.Add(new { cityid=i,city= query + "_C" + i });
                }
            }

            return this.Store(cities);
        }



        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);
            Random r = new Random();
            switch (field)
            {
                case "cityid":
                    record.Set(fields[3], r.Next(10, 200).ToString());
                    record.Set(fields[4], r.Next(10, 200).ToString());
                    record.Set(fields[5], r.Next(10, 200).ToString());
                    break;
            }



            return this.Direct();
        }

        public ActionResult save(string values)
        {
            string json = values;
            Dictionary<string, string>[] companies = JSON.Deserialize<Dictionary<string, string>[]>(json);
            StringBuilder sb = new StringBuilder();
            foreach (Dictionary<string, string> row in companies)
            {
                foreach (KeyValuePair<string, string> keyValuePair in row)
                {
                    sb.Append(keyValuePair.Key);
                }
                foreach (KeyValuePair<string, string> keyValuePair in row)
                {
                    sb.Append(keyValuePair.Value);
                }
            }
            return this.Direct();
        }

    }
}
    run this and go to edit mode [http://localhost:####/masterdetails/index/edit]

    I am trying to load this grid if the page open as edit mode,for that I write bellow code

    if (id == "edit")
            {
               
                return View(new IEnumerable<object>[]
                        {
                             new List<object>
                            {
                                new {countryid = "1", stateid = "1",state="C1_S1", cityid = "1", population = "25",men="58",women="25"},
                                new {countryid = "1", stateid = "1",state="C1_S1", cityid = "1", population = "65",men="45",women="65"},
                                new {countryid = "1", stateid = "1",state="C1_S1", cityid = "2", population = "56",men="67",women="89"},
                            },
                            countries
                        });
            }
    but state and city combo not fill with these value.
    I click on save button , and debug 
    public ActionResult save(string values)
    values parameter and found stateid and cityid present ,that means the value I send to view on edit time is bind with combo but not displaying.
    please let me know what is the best ay to do this.
    Last edited by Daniil; Jul 11, 2014 at 3:15 PM. Reason: [CLOSED]
  2. #2
    Jul 10, 2014, 9:21 AM
    Hi @matrixwebtech,

    but state and city combo not fill with these value.
    I don't see where you populate the ComboBoxes' Stores? As far as I can understand you don't. So, the Stores are empty and this code of stateRenderer and cityRenderer is being executed:
    if (Ext.isEmpty(r)) {
    return "";
}
    I would say you should populate the ComboBoxes' Stores.
  3. #3
    Jul 10, 2014, 10:15 AM
    Hi daniil
    thanks for reply

    If you run this code as edit mode ,I try to populate grid view
    combobox(state and city combo) with that list data,which I pass into view on edit mode.

    As per you Store not populate for state and city combobox.

    so my question is how I populate store for that situation?

    now I populate store with bellow code.and i think this is need for the lienked field functionality.

    .Proxy(X.AjaxProxy()
            .Url(Url.Action("GetStates"))
            .Reader(X.JsonReader().Root("data"))
    so can you please tell how do i populate stores on edit mode situation of my sample.
    Last edited by Daniil; Jul 10, 2014 at 10:24 AM. Reason: Please use [CODE] tags
  4. #4
    Jul 10, 2014, 10:25 AM
    I would try with a Store's .DataSource(data) as you do with other Stores.
  5. #5
    Jul 10, 2014, 10:46 AM
    can you please provide me some sample code for this situation
  6. #6
    Jul 10, 2014, 10:54 AM
    Well, you already have it in your code for other Stores.
  7. #7
    Jul 10, 2014, 11:31 AM
    If i use this code then its work fine and edit mode and data load in combos,but other functionality like populate sate according country not done.

    X.Column()
                .DataIndex("stateid")
                .Text("State")
                .Renderer("stateRenderer")
                
                .Editor(X.ComboBox()
                    .ID("ddlstate")
                                   
                    .QueryMode(DataLoadMode.Remote)
                    .TriggerAction(TriggerAction.All)
                    //.StoreID("StateStore")
                    .Listeners(l => { l.AfterRender.Handler = "stateRenderer"; })
                    .ValueField("stateid")
                    .DisplayField("state")
                    .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
                    .Store
                    (
                        X.Store()
                                .ID("StateStore")
                                .Model(X.Model()
                                .IDProperty("stateid")
                                    .Fields(
                                        X.ModelField()
                                        .Name("stateid")
                                        .Mapping("stateid")
                                        .Type(ModelFieldType.String)
                                        ,
                                         X.ModelField()
                                        .Name("state")
                                        .Mapping("state")
                                        .Type(ModelFieldType.String)
                                    )
                                )
                                .DataSource(Model[2])
         
  
                    )
                )
    and if i use bellow code 

    X.Column()
                .DataIndex("stateid")
                .Text("State")
                .Renderer("stateRenderer")
                
                .Editor(X.ComboBox()
                    .ID("ddlstate")
                                   
                    .QueryMode(DataLoadMode.Remote)
                    .TriggerAction(TriggerAction.All)
                    //.StoreID("StateStore")
                    .Listeners(l => { l.AfterRender.Handler = "stateRenderer"; })
                    .ValueField("stateid")
                    .DisplayField("state")
                    .CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
                    .Store
                    (
                        X.Store()
                                .ID("StateStore")
                                .Model(X.Model()
                                .IDProperty("stateid")
                                    .Fields(
                                        X.ModelField()
                                        .Name("stateid")
                                        .Mapping("stateid")
                                        .Type(ModelFieldType.String)
                                        ,
                                         X.ModelField()
                                        .Name("state")
                                        .Mapping("state")
                                        .Type(ModelFieldType.String)
                                    )
                                )
                                .DataSource(Model[2])
         
                               .Proxy(X.AjaxProxy()
            .Url(Url.Action("GetStates"))
            .Reader(X.JsonReader().Root("data"))
            )
                    )
                )
    state load according to country but edit mode state combo not populate.can you please give me a solution for that.
  8. #8
    Jul 10, 2014, 12:15 PM
    Please demonstrate how you have changed the Index controller action.
  9. #9
    Jul 10, 2014, 12:32 PM
    Hi daniil

    For better understanding this situation please run my code(which i provide at no #1) at your end once,
    If you follow my code at Index action you can see I use an edit parameter .you please run this code with and without edit

    run this without edit mode http://localhost:####/masterdetails/index (From here user will entry data.)

    run this and go to edit mode http://localhost:####/masterdetails/index/edit (From here user can edit previous data and can insert new data also.for that i need to display data entered previously.)


    I think you will understand what I actually want to do.
  10. #10
    Jul 10, 2014, 12:48 PM
    Well, I think I more or less understand what you need. Could you, please, do that?
    Please demonstrate how you have changed the Index controller action.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] How to use DirectMethod inside userControl (ascx) and load another usercontrol dynamically inside tab
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 19, 2012, 9:58 AM
  2. Color Palette inside Button Menu - Don't load value in page load.
    By Sérgio in forum 1.x Help
    Replies: 1
    Last Post: Dec 12, 2012, 3:21 PM
  3. [CLOSED] gridpanel store does not load dynamically from javascript
    By pattake in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 21, 2011, 6:31 PM
  4. [CLOSED] [1.0] How to load a page inside a tabpanel dynamically.
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 28, 2010, 3:37 PM
  5. [CLOSED] Load GridPanel dynamically
    By methode in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: May 13, 2010, 4:46 AM

Posting Permissions