[CLOSED] Ajax Linked Combobox SetValue()

[matrixwebtech]

I take an example of ajax linked combo in MVC Razor.No problem in Load but when I set value click on Set button,both city and country field get blank.
may be I am doing some mistake,please suggest me how do I do this.

View

@model System.Collections.IEnumerable


   
@Html.X().ResourceManager()
@(Html.X().FormPanel().ID("f").Items

(
Html.X().ComboBox()
        .ID("ComboBoxCountry")
        .Editable(false)
        .QueryMode(DataLoadMode.Local)
        .TriggerAction(TriggerAction.All)
        .EmptyText("Select a country")
        .DisplayField("Name")
        .ValueField("Id")
        .FieldLabel("Country")
        
        .ForceSelection(true)
        .Listeners(ls =>
        {
            ls.Select.Handler = "App.ComboBoxCity.clearValue(); App.ComboBoxCity.getStore().load()";
        })
        .Store(Html.X().Store()
            
             
            .Model(Html.X().Model()
                .IDProperty("Id")
                .Fields(
                    
                    Html.X().ModelField().Name("Id").Type(ModelFieldType.String),
                    Html.X().ModelField().Name("Name").Type(ModelFieldType.String)
                )
                
            )
            .DataSource(ViewBag.country)
           
            )
       


,
 Html.X().ComboBox()
        .ID("ComboBoxCity")
        .TypeAhead(true)
        .QueryMode(DataLoadMode.Local)
        .ForceSelection(true)
        .FieldLabel("City")
        .TriggerAction(TriggerAction.All)
        .DisplayField("name")
        .ValueField("id")
        .EmptyText("Loading...")
        .ValueNotFoundText("Loading...")
        .Store(Html.X().Store()
            .AutoLoad(false)
            .Model(Html.X().Model()
                .IDProperty("Id")
                .Fields(
                    new ModelField("id", ModelFieldType.String) { Mapping = "Id" },
                    new ModelField("name", ModelFieldType.String) { Mapping = "Name" }
                )
            )
            .Proxy(Html.X().AjaxProxy()
                .Url(Url.Action("GetCities"))
                .Reader(Html.X().JsonReader().Root("data"))
            )
            .Parameters(ps =>
                ps.Add(new StoreParameter("country", "App.ComboBoxCountry.getValue()", ParameterMode.Raw))
            )
            .Listeners(ls =>
                ls.Load.Handler = @"var combo = App.ComboBoxCity;
                                    combo.setValue(records[0].get(combo.valueField));"
            )
        )
    )
    .Buttons
    (
    Html.X().Button().Text("set")
    .DirectEvents(de =>
        {
            de.Click.FormID = "f";
            de.Click.Action = "set";
        })
    )
    )

CONTROLLER

public ActionResult Index()
        {
            loadcountry();
            return View();
        }

        public ActionResult GetCities(string country)
        {
            return this.Store(Cities(country));
        }

        public void loadcountry()
        {
            List<object> country = new List<object>(10);
            
                country.Add(new { Id = 1, Name = " Country 1"  });
                country.Add(new { Id = 2, Name = " Country 2" });
           
            ViewBag.country = country;
        }

        public object Cities(string country)
        {

            List<object> cities = new List<object>(10);
            for (int i = 1; i <= 10; i++)
            {
                cities.Add(new { Id = i.ToString() + i,Name= i.ToString()+" City of "+country });
            }

            return cities;


        }

        public DirectResult set()
        {
            X.GetCmp<ComboBox>("ComboBoxCountry").SetValue(1);
            X.GetCmp<ComboBox>("ComboBoxCity").SetValue(1);
            return this.Direct();
        }

[Daniil]

Hi @matrixwebtech,

You are using a ModelFieldType.String, so, you should use a string "1" instead of a number 1.

Also, I think, you should avoid setting a value of the second ComboBox since it depends on the first one.

So, I would use this code:

public DirectResult Set()
{
    X.GetCmp<ComboBox>("ComboBoxCountry").SetValueAndFireSelect("1");

    return this.Direct();
}

[matrixwebtech]

I cant avoid setting a value of the second ComboBox since it depends on the first one,because I have 2 fields like CountryID and CityID I save value from combobox and when I want to view I need to set value each combo from data base?please suggest me what to do?

[Daniil]

Then you should preload the data to a ComboBox's Store before setting a value.

[matrixwebtech]

Is Preload the linked combo is only option?

I change ComboBoxCountry from Setvalue() property to SetValueAndFireSelect

X.GetCmp<ComboBox>("ComboBoxCountry").SetValueAndFireSelect("1");

and change

  
public DirectResult set()
        {
            X.GetCmp<ComboBox>("ComboBoxCountry").SetValueAndFireSelect("1");
            GetCities("1");
            X.GetCmp<ComboBox>("ComboBoxCity").SetValue("2");
            return this.Direct();
        }

and called GetCities("1"); which load ComboBoxCity city again,are you talking about this preload?but ComboBoxCity not set with value=2.

I think this is very common situation,which I have to handle.
Suppose I have 3 comboboxes,C1,C2 and C3.Initially C1 is contain values,on basis of C1 selection C2 populate, and then C3 populate on C2 selection.
all value save in database.when when I again come to this page I need to populate combos with database value.

[Daniil]

By "preload" I meant

comboBox.getStore().load();

and setting a value after a load request.

[matrixwebtech]

Hi Daniil I try do as per your suggestion but fail,I try set "preload"

comboBox.getStore().load();

Using button click Listeners and DirectEvents,

.Listeners(l => { l.Click.Handler = "App.ComboBoxCity.getStore().load()"; })

and

de.Click.Before = "App.ComboBoxCity.getStore().load()";

I post sample code after changing as per your suggestion,please check.I comment Button de.Click.Before
event,if you required this please uncomment.

View

@model System.Collections.IEnumerable
 
    
@Html.X().ResourceManager()
@(Html.X().FormPanel().ID("f").Items
 
(
Html.X().ComboBox()
        .ID("ComboBoxCountry")
        .Editable(false)
        .QueryMode(DataLoadMode.Local)
        .TriggerAction(TriggerAction.All)
        .EmptyText("Select a country")
        .DisplayField("Name")
        .ValueField("Id")
        .FieldLabel("Country")
         
        .ForceSelection(true)
        .Listeners(ls =>
        {
            ls.Select.Handler = "App.ComboBoxCity.clearValue(); App.ComboBoxCity.getStore().load()";
        })
        .Store(Html.X().Store()
             
              
            .Model(Html.X().Model()
                .IDProperty("Id")
                .Fields(
                     
                    Html.X().ModelField().Name("Id").Type(ModelFieldType.String),
                    Html.X().ModelField().Name("Name").Type(ModelFieldType.String)
                )
                 
            )
            .DataSource(ViewBag.country)
            
            )
        
 
 
,
 Html.X().ComboBox()
        .ID("ComboBoxCity")
        .TypeAhead(true)
        .QueryMode(DataLoadMode.Local)
        .ForceSelection(true)
        .FieldLabel("City")
        .TriggerAction(TriggerAction.All)
        .DisplayField("name")
        .ValueField("id")
        .EmptyText("Loading...")
        .ValueNotFoundText("Loading...")
        .Store(Html.X().Store()
            .AutoLoad(false)
            .Model(Html.X().Model()
                .IDProperty("Id")
                .Fields(
                  new ModelField("id", ModelFieldType.String) { Mapping = "Id" },
                    new ModelField("name", ModelFieldType.String) { Mapping = "Name" }
                )
            )
            .Proxy(Html.X().AjaxProxy()
                .Url(Url.Action("GetCities"))
                .Reader(Html.X().JsonReader().Root("data"))
            )
            .Parameters(ps =>
                ps.Add(new StoreParameter("country", "App.ComboBoxCountry.getValue()", ParameterMode.Raw))
            )
            .Listeners(ls =>
                ls.Load.Handler = @"var combo = App.ComboBoxCity;
                            combo.setValue(records[0].get(combo.valueField));"
            )
        )
    )
    .Buttons
    (
    Html.X().Button().Text("set")
    .Listeners(l => { l.Click.Handler = "App.ComboBoxCity.getStore().load()"; })
    .DirectEvents(de =>
        {
           // de.Click.Before = "App.ComboBoxCity.getStore().load()";
            de.Click.FormID = "f";
            de.Click.Action = "set";
            
        })
    )
    )

Controller

public ActionResult Index()
        {
            loadcountry();
            return View();
        }

        public ActionResult GetCities(string country)
        {
            return this.Store(Cities(country));
        }

        public void loadcountry()
        {
            List<object> country = new List<object>(10);

            country.Add(new { Id = 1, Name = "Country 1" });
            country.Add(new { Id = 2, Name = "Country 2" });

            ViewBag.country = country;
        }

        public object Cities(string country)
        {

            List<object> cities = new List<object>(10);
            for (int i = 1; i <= 10; i++)
            {
                cities.Add(new { Id = i.ToString() + i, Name = i.ToString() + " City of " + country });
            }

            return cities;


        }

        public DirectResult set()
        {
            X.GetCmp<ComboBox>("ComboBoxCountry").SetValueAndFireSelect("1");
            X.GetCmp<ComboBox>("ComboBoxCity").SetValue("2");
            return this.Direct();
        }

[Daniil]

There are two issues in your code, at least.

1. I don't think you should use .SetValueAndFireSelect() if you need .SetValue() for the second ComboBox. The Select event of the first ComboBox causes loading of the Store of the second ComboBox. And you load it manually to preload the data before .SetValue(). Too many load requests. It might break the things.

2. So, you call .load() in a Click listener of a DirectEvent's Before. It doesn't guarantee that it loads the data before a .SetValue() call, because both the operations (a load request and a set DirectEvent) are asynchronous. You should use a .load()'s callback.

[matrixwebtech]

thanks for reply ,I understand the issues which you explain,but not able to do

.load()'s callback.

can you please provide some sample ,so that I can solve my problem.because 90% page in my application has that kind of functionality.

I found a post http://forums.ext.net/showthread.php...ng-Problem,but I dont understand in store where and how I mention the callback function.
I try some thing like bellow.
Add in ComboBoxCity store Listeners

ls.Load.Fn = "callback";

<script>
    var callback = function (records, operation, success) {
        
        App.ComboBoxCity.setValue(records);
      
    }

</script>

and change

public DirectResult set()
        {
            X.GetCmp<ComboBox>("ComboBoxCountry").SetValue("1");
            X.GetCmp<ComboBox>("ComboBoxCity").SetValue("2");
            
            return this.Direct();
        }

but not working

[Daniil]

I would try this:

public DirectResult Set()
{
    X.GetCmp<ComboBox>("ComboBoxCountry").SetValue("1");
        
    var store = X.GetCmp<Store>("StoreCity"); // Set .ID("StoreCity") for the Store

    store.LoadProxy(new
    {
        callback = new JRawValue("function() { App.ComboBoxCity.setValue('2'); }")
    });

    return this.Direct();
}