Controlling Kendo Grid using Drop Down List by Jquery

Question

I have this problem where i need to Control the Kendo Grid when i change the value of my drop down list using jquery

I need to change the Values inside the kendo grid on every drop down change

Thanks

This is my Drop down list Onchange Event

$("#ddlRadius").live("change", function () {
            var selectValue = "";
            selectValue = $("#ddlRadius option:selected").val();

            if (selectValue == "77") {
                Rad = 5;

            }
            else if (selectValue == "78") {
                Rad = 10;

            }
            else if (selectValue == "79") {
                Rad = 25;


            }
            else if (selectValue == "80") {
                Rad = 50;

            }
            else if (selectValue == "81") {
                Rad = 100;

            }
            else {

            }
        });

This is my Kendo Grid

$("#workerGrid").kendoGrid({
            scrollable: false,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true
            },
            dataSource: {
                transport: {
                    read: {
                        url: '/Maps/LoadList?ID=' + ID + '&radius=' + Rad,
                        dataType: "json",
                        type: "POST"
                    }
                },
                pageSize: 10
            },
            rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
            altRowTemplate: kendo.template($("#rowTemplate").html())
        });

see my answer .. since you are passing your parameter right in the url, all you need to do is just change the read url for your grid .. there are better ways to do this( especially since you are doing a post ) but my answer should work for you. — G-Man

G-Man G-Man · Accepted Answer · 2014-03-18T02:38:47

Try the following

    $("#ddlRadius").live("change", function () {
            var selectValue = "";
            selectValue = $("#ddlRadius option:selected").val();
            var grid = $("#workerGrid").data('kendoGrid');
            if (selectValue == "77") {
                Rad = 5;
                grid.dataSource.transport.options.read.url = '/Maps/LoadList?ID=' + ID + '&radius=' + Rad;
                grid.dataSource.read();
            }

..
..
..

Controlling Kendo Grid using Drop Down List by Jquery

1 Answers