Filter Kendo Dropdownlist values within a kendo grid row based on value from another row

Question

I have Kendo Grid, inside which I have dropdown input [editable]. Now I want to filter the values in dropdown based on value present in row next to it. For ex:

_________________________________________
Column 1 | Column 2 (this is a dropdown)
_________________________________________
A        | Show only values relevant to A
__________________________________________
B        | Show values relevant to B
_____________________________________________
C        | Show values relevant to C
_________________________________________

Answer 1

you can do the following

1. On editing the row get the name from the first column
2. filter the second column based on the first column value
3. In the given sample below, I edited an existing sample provided by the Kendo UI for cascading dropdowns, so I wrote extra codes to get the Id of the first column, so in your case you can exclude the additional steps

The HTML needed

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

The scripts needed

<script>
    // array of all brands
    var brands = [
        { brandId: 1, name: "Ford" },
        { brandId: 2, name: "BMW" }
    ];

    // array of all models
    var models = [
        { modelId: 1, name: "Explorer", brandId: 1},
        { modelId: 2, name: "Focus", brandId: 1},
        { modelId: 3, name: "X3", brandId: 2},
        { modelId: 4, name: "X5", brandId: 2}
    ];

    $("#grid").kendoGrid({
        dataSource: {
            data: [
                { id: 1, brandId: 1, modelId: 2 }, // initial data item (Ford, Focus)
                { id: 2, brandId: 2, modelId: 3 } // initial data item (BMW, X3)
            ],
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false }, // the id field is not editable
                        brandId: {editable: false}
                    }
                }
            }
        },
        editable: "inline", // use inline mode so both dropdownlists are visible (required for cascading)
        columns: [
        { field: "id" },
        {
            // the brandId column
            title: "Brand",
            field: "brandId", // bound to the brandId field
            template: "#= brandName(brandId) #", // the template shows the name corresponding to the brandId field

        },
        {
            //The modelId column
            title: "Model",
            field: "modelId",  // bound to the modelId field
            template: "#= modelName(modelId) #", //the template shows the name corresponding to the modelId field
            editor: function(container) { // use a dropdownlist as an editor
                var input = $('<input id="modelId" name="modelId">');
                input.appendTo(container);
                input.kendoDropDownList({
                    dataTextField: "name",
                    dataValueField: "modelId",
                    //cascadeFrom: "brandId", // cascade from the brands dropdownlist
                    dataSource: filterModels() // bind it to the models array
                }).appendTo(container);
            }
        },
        { command: "edit" }
        ]
    });

    function brandName(brandId) {
        for (var i = 0; i < brands.length; i++) {
            if (brands[i].brandId == brandId) {
                return brands[i].name;
            }
        }
    }

    function brandId(brandName) {
        for (var i = 0; i < brands.length; i++) {
            if (brands[i].name == brandName) {
                return brands[i].brandId;
            }
        }
    }

    function modelName(modelId) {
        for (var i = 0; i < models.length; i++) {
            if (models[i].modelId == modelId) {
                return models[i].name;
            }
        }
    }

    // this function will be used by the drop down to filter the data based on the previous column value
    function filterModels()
    {
        // bring the brand name from previous column
        var brandName = $('#modelId').closest('td').prev('td').text();
        // additional work in this sample to get the Id
        var id =  brandId(brandName);
        // filter the data of the drop down list
        var details= $.grep(models, function(n,i){
             return n.brandId==id;
        });
        return details;
    }
</script>

here a working demo

hope it will help you