Rebind DropDownList in KendoGrid, depending on Value Selected in other DropDownList on the same row

Question

This is a common problem, but i dont know how to figure it out with KendoUI widgets and Javascript. I have a KendoGrid whose datasource is coming from an AJAX call to a Web Services. Data is bound to the columns. Two columns (Source and Destination) are two drop down lists:

Each column is defined as

 if (stringStartsWith(colTitle, 'Source')) {
                    columns.push({
                        field: dataItem.replace(/\s+/g, ''),
                        title: colTitle,
                        width: 150,
                        locked: false,
                        editor: sourceDropDownEditor,
                        //template: "#=SourcetankIdentifier#",
                        attributes: { style: "text-align: left" },
                        type: "text"
                    });
                }

And the SourceDropDownEditor is as follow:

function sourceDropDownEditor(container, options) {
    $('<input id="sourcesDropDownList" required data-text-field="Source" data-value-field="Source" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "Source",
            dataValueField: "Source",
            dataSource: Sources           
        });
}

The same is done for the Destination Drop Down List.

Now, what i want is, when the user clicks into the Edit button (Grid is defined with In-Line Edit) and choose a certain Source Value from the Source DDL; the list into the Destination DDL must change according to this value.

I wrote a function for retrieving the correct list, depending from the value chosen in the Source DDL. But what i CANNOT do, is to get the Destion DLL of THAT row and to set the Datasource accordingly.

More Details as requested:

Grid is built dynamically:

function generateGrid(JSONData) {

    var model = generateModel(JSONData, selectedMenu);
    var columns = generateColumns(model);
    var data = generateData(gridData, columns);  

   var grid = $("#mainGrid").kendoGrid({              
        edit: function (e) {            
           ..
        },
        dataSource: {
            data: data,
            schema: {
                model: model
            },
            sort:   {
                field: defaultSort.replace(/\s+/g, ''),
                dir: "desc"               
            }
        },
        toolbar: [
            ..
        ],
        columns: columns,        
        editable: "inline",       
        sortable: true,                 
        resizable: true,
        filterable: true,
        selectable: "multiple",
        cancel: function(e) {
            $('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
        },

KENDO DOJO

Here dojo.telerik.com/uXeKa . It reflects basically the grid template and the column fields

FINAL SOLUTION

Final solution is here: dojo.telerik.com/uXeKa/2 . Don't need to add anything into the Edit function of the Grid. Just need to implement onChange function of the Source DDL, and to set the datasource of the destination.

Isocrates

Could you please provide some more code? I required it to identify the below things, 1. Dropdown is display on normal mode or on edit mode. 2. how are you binding datasource to dropdownlist. – Fuzzy

1. Dropdown is displayed on edit mode. 2. The datasource "Sources" is a static array and it is bound into the "SourceDDL" as described into the second segment code. While the first segment code is part of the "generateColumns" method described into the Grid definition. – Isocrates

I really start to believe, that it is actually not possible to achieve. Because the Datasource is actually bound to the "Column", not to the element in each single row. – Isocrates

My apologies but right now I am out of town so most probably on Friday will try to resolve your issue. – Fuzzy

I'm not sure if it could be done with the In-Line edit... but without the In-Line edit, it could be done. – Claptrap

Answer 1

Please try with the below code snippet.

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="grid">
    </div>
    <script>



        var sources = [];
        var destinations = [];

        var products = [{
            ProductID: 1,
            ProductName: "Chai",
            SourceID: 1,
            DestinationID: 1,

        }, {
            ProductID: 2,
            ProductName: "Chang",
            SourceID: 2,
            DestinationID: 1,

        }, {
            ProductID: 3,
            ProductName: "Aniseed Syrup",
            SourceID: 3,
            DestinationID: 2,

        }, {
            ProductID: 4,
            ProductName: "Chef Anton's Cajun Seasoning",
            SourceID: 4,
            DestinationID: 2,
        }, {
            ProductID: 5,
            ProductName: "Chef Anton's Gumbo Mix",
            SourceID: 4,
            DestinationID: 2,
        }];

        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductName: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10
                },
                sortable: true,
                edit: onGridEdit,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    { field: "ProductName" },
                     { field: "SourceID", title: "SourceID", values: sources },
                     { field: "DestinationID", title: "DestinationID", values: destinations },
                     { command: ["edit", "destroy"], title: "&nbsp;" }

                ],
                editable: "inline"
            });
        });

        var destinationID = 0;

        function onGridEdit(arg) {
            destinationID = arg.model.DestinationID;
            $.ajax({
                url: "http://localhost:3470/Home/GetSource",
                type: 'GET',
                success: function (data) {
                    var sourceDDL = $(arg.container).find("select[name^='SourceID']").data("kendoDropDownList");
                    sourceDDL.bind("change", onChange);
                    sourceDDL.setDataSource(data);
                    sourceDDL.value(arg.model.SourceID);
                    onChange();
                }
            });

        }

        function onChange(arg) {
            var sourceid = $("select[name^='SourceID']").data("kendoDropDownList").value();



            $.ajax({
                url: "http://localhost:3470/Home/GetDestination",
                type: 'GET',
                data: { SourceID: sourceid },
                success: function (data) {
                    var destinationDDL = $("select[name^='DestinationID']").data("kendoDropDownList");
                    destinationDDL.setDataSource(data);

                    if (arg) {
                        // Please uncomment below code if you want to reset ddl value on sourceDDl value change
                        // destinationDDL.select(-1);
                    }
                    else {
                        destinationDDL.value(destinationID);
                        destinationID = 0;
                    }
                }
            });
        }
    </script>
</body>
</html>

For reference:-

public class Source
{
    public int value { get; set; }
    public string text { get; set; }
}

public class Destination
{
    public int value { get; set; }
    public string text { get; set; }
}

.....
.....
public ActionResult GetSource()
{
    List<Source> list = new List<Source>();

    list.Add(new Source() { value = 1, text = "cat1" });
    list.Add(new Source() { value = 2, text = "cat2" });
    list.Add(new Source() { value = 3, text = "cat3" });
    list.Add(new Source() { value = 4, text = "cat4" });
    list.Add(new Source() { value = 5, text = "cat5" });

    return Json(list, JsonRequestBehavior.AllowGet);
}

public ActionResult GetDestination(int? SourceID)
{
    List<Destination> list = new List<Destination>();

    list.Add(new Destination() { value = 1, text = "des1_" + Convert.ToString(SourceID) });
    list.Add(new Destination() { value = 2, text = "des2_" });
    list.Add(new Destination() { value = 3, text = "des3_" });
    list.Add(new Destination() { value = 4, text = "des4_" });
    list.Add(new Destination() { value = 5, text = "des5_" });

    return Json(list, JsonRequestBehavior.AllowGet);
}

Update 1: (Based on your editor I have updated jquery selector statement)

function onGridEdit(arg) {
    var sourceDDL = $(arg.container).find("input[id^='sourcesDropDownList']").data("kendoDropDownList");
}
function onChange(arg) {
    var sourceid = $("input[id^='sourcesDropDownList']").data("kendoDropDownList").value(); 
    var destinationDDL = $("input[id^='destinationsDropDownList']").data("kendoDropDownList");  
}

Let me know if any concern.

Fuzzy

Hi Jayesh, thanks for your answer. Unfortunately, $(arg.container).find("select[name^='<fieldName>']") return null. If you see the first code, my DDL are not "Select" fields. Look at the SourceDropDownEditor code please. – Isocrates

It would be nice if you can provide jsfilldle/kendo dogo, where I can reproduce this issue. – Fuzzy

Hi Jayesh, here is the Kendo Dojo: dojo.telerik.com/uXeKa It reflects the Grid Model and Fields. Hope it helps – Isocrates

I have updated my above code snippet. I have added coded which will help you to resolve the error which you have mentioned in your first comment. – Fuzzy

It helped. Final solution is here: dojo.telerik.com/uXeKa/2 . Don't need to add anything into the Edit function of the Grid. Just need to implement onChange function of the Source DDL, and to set the datasource of the destination. But your solution helped, tnx – Isocrates

Answer 2

You could do two editors (DropDownLists) for source and destination columns. For destination editor you can use cascadeFrom property, of which holds source dropdown id. Destination is filtered according to the selected options in the source DropDownLists. This is Kendo UI built in functionality and you can read more form here.

Moser