how to use script variable in kendo datasource

Question

i have a one dropdown and one tree view drag and drop. @Html.DropDownListFor(model => model.xyz, Model.xyzlist, new { id = "dropdownid" })

now i want to call controller action method on dropdown change event in jquery.

<script>
var id = 0;
      $('#dropdownid').change(function(){
         id= $('#dropdownid').val();
     });

how to use id variable in URL of read :{ } perameter

datasource= new kendo.data.HierarchicalDataSource({
                                    transport: {
                                        read: {
                                            url: "@Html.Raw(Url.Action("actionmethod", "controllername", new { @ID= id }))",
                                            type: "POST",
                                            dataType: "json"
                                        }
                                    },
                                    schema: {
                                        model: {
                                            id: "id",
                                            hasChildren: "hasChildren",
                                            //expanded: true
                                        }
                                    }
                                });



 $(document).ready( function(){
                                $("#CountryZone-treeview").kendoTreeView({
                                    loadOnDemand: false,
                                    dataSource: datasource,
                                    dataTextField: "Name",
                                    dragAndDrop: true,..................etc

</script>

please help me.

Answer 1

You can send additional data with the transport.read.data object (see Kendo documentation here). Your datasource might look like this:

datasource = new kendo.data.HierarchicalDataSource({
                                    transport: {
                                        read: {
                                            url: "@Html.Raw(Url.Action("actionmethod", "controllername", new { @ID= id }))",
                                            type: "POST",
                                            dataType: "json"
                                            data: { data: $('#dropdownid').val() }
                                        }
                                    },
                                    schema: {
                                        model: {
                                            id: "id",
                                            hasChildren: "hasChildren",
                                            //expanded: true
                                        }
                                    }
                                });

You could also provide a function name to data (for example getDropDownId()), rather than $('#dropdownid').val() to provide more robust code (null checks, etc).