jquery - Rebind DropDownList in KendoGrid, depending on Value Selected in other DropDownList on the same row -
this common problem, dont know how figure out kendoui widgets , javascript. have kendogrid datasource coming ajax call web services. data bound columns. 2 columns (source , destination) 2 drop down lists:
each column defined
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 sourcedropdowneditor 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 done destination drop down list.
now, want is, when user clicks edit button (grid defined in-line edit) , choose source value source ddl; list destination ddl must change according value.
i wrote function retrieving correct list, depending value chosen in source ddl. cannot do, destion dll of row , set datasource accordingly.
more details requested:
grid 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 . reflects grid template , column fields
final solution
final solution here: dojo.telerik.com/uxeka/2 . don't need add edit function of grid. need implement onchange function of source ddl, , set datasource of destination.
please try 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: " " } ], 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 want 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 editor 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 concern.
Comments
Post a Comment