Cascading ComboBox Persistencecy with AJAX data binding passing selected value (MVC4)

2 posts, 0 answers
  1. Jono
    Jono avatar
    2 posts
    Member since:
    Aug 2012

    Posted 23 Apr 2013 Link to this post

    I wanted some persistence with Cascading Combo Boxes when using an AJAX data binding.
    The solution also needed to be able to pass a 'selected value from the controller handling the data retrieval.

    This is what i came up with, hopefully this is useful to someone else aswell
    cshtml
    Only thing of note here is the jQuery DataBound event that will handle getting the selected value and setting it
    <label for="Client">Client</label>
                @(Html.Kendo().ComboBox()
                    .Name("Client")
                    .Placeholder("Select Client...")
                    .DataTextField("ClientName")
                    .DataValueField("ClientID")
                    .Events(e => e.DataBound("onDataBoundClient"))
                    .DataSource(source =>
                        {
                            source.Read(read =>
                                {
                                    read.Action("GetClientsCombo", "Tools");
                                });
                        })
                    )
                <label for="Package">Package</label>
                @(Html.Kendo().ComboBox()
                    .Name("Package")
                    .Placeholder("Select Package...")
                    .DataTextField("PackageName")
                    .DataValueField("PackageID")
                    .Events(e => e.DataBound("onDataBoundPackage"))
                    .DataSource(source =>
                        {
                            source.Read(read =>
                                {
                                    read.Action("GetPackagesCombo", "Tools")
                                        .Data("filterPackages");
                                })
                                .ServerFiltering(true);
                        })
                    .Enable(false)
                    .AutoBind(false)
                    .CascadeFrom("Client")
                  )
    ToolsController.cs
    Additional bool coloumn in select that will return true only if selected Client/Package Id is = to session var
    public JsonResult GetClientsCombo()
            {
                    int selectedClientId = Session["selectedClientId"];
                    var query = //Linq Query to get results
                                select new
                                    {
                                        ClientID = LinqClientIdColumn,
                                        ClientName =  LinqClientNameColumn,
                                        Selected = LinqClientIdColumn == selectedClientId
                                    };
                    return Json(query, JsonRequestBehavior.AllowGet);
            }
     
            public JsonResult GetPackagesCombo(int clients, string packageFilter)
            {
                    int selectedPackageId = Session["selectedPackageId"];
                    var query = //Linq Query to get results
                                select new
                                {
                                    PackageID = LinqPackageIdColumn,
                                    PackageName = LinqPackageNameColumn,
                                    Selected = LinqPackageIdColumn == selectedPackageId
                                };
               
                    return Json(query, JsonRequestBehavior.AllowGet);
     
            }
    JS ondatabound events
    These functions are called when data is bound to the combo boxes. They get the data object from the AJAX call and return an array of objects, using jQuery Grep, where selected is === true then use the first object found to populate select a default value from the combo.

    I initially tried compacting these two functions into one abstracted function and passing the jquery selector reference and selectedObject[].property as variables in the event handler. Evidently passing variable eg (.Events(e => e.DataBound("onDataBoundPackage('var1', 'var2')")) in the databound event handler breaks the databinding.
    function onDataBoundClient() {
                        var DataObject = $("#Client").data("kendoComboBox").dataSource.data();
                        var selectedObject = $.grep(DataObject, function (obj) {
                            return obj.Selected === true;
                        });
                        $("#Client").data('kendoComboBox').value(selectedObject[0].ClientID);
                    };
                    function onDataBoundPackage() {
                        var DataObject = $("#Package").data("kendoComboBox").dataSource.data();
                        var selectedObject = $.grep(DataObject, function (obj) {
                            return obj.Selected === true;
                        });
                        $("#Package").data('kendoComboBox').value(selectedObject[0].PackageID);
                    };

  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 11 Jun 2013 Link to this post

    Hello,

    Please try with below code snippet.
    $("#Client").data('kendoComboBox').value(selectedObject[0].ClientID);
    $("#Client").data("kendoComboBox").trigger("change");
    As per my thought issue is after settings the value in combobox change event is not fired.
    Let me know if i am not understand your requirement.

    Thanks,
    Jayesh Goyani
  3. Kendo UI is VS 2017 Ready
Back to Top