i have kendogrid want edit external form. on external form have dropdownlist bound odata service serverfiltering=true, problem dropdownlist not show selected item value grid model. here script:
<div class="k-edit-label"> <label for="contract_title">contract title:</label> </div> <input id="contract_title" class="k-input" data-type="string" data-bind="value: selected.title" /> </li> <li> <div class="k-edit-label"> <label for="contract_contractnumber">contract number:</label> </div> <input id="contract_contractnumber" class="k-input" data-type="string" data-bind="value: selected.contractnumber" /> </li> <li> <div class="k-edit-label"> <label for="contract_contractdate">contract date:</label> </div> <input id="contract_contractdate" data-format="yyyy/mm/dd" data-bind="value: selected.contractdate" data-role="datepicker" data-parse-formats="yyyy-mm-dd" /> </li> <li> <div class="k-edit-label"> <label for="contract_contractamount">contract amount:</label> </div> <input id="contract_contractamount" class="k-input" data-type="number" data-role="numerictextbox" data-decimals="0" data-format="n0" data-bind="value: selected.contractamount" /> </li> <li> <div class="k-edit-label"> <label for="contract_subcontractor">sub contractor:</label> </div> <input id="contract_subcontractor" class="k-input" data-text-field="name" data-value-field="id" data-value-primitive="true" data-role="dropdownlist" data-bind="value: selected.subcontractorid, source: companies" /> </li> </ul> </div> <div id="contractgrid"> </div> <script> projectid = 34; var viewmodel = null; jquery(function () { viewmodel = kendo.observable({ datasource: getcontractdatasource(), selected: {}, haschanges: false, sync: function () { }, cancel: function () { this.datasource.cancelchanges(); } , compainies: getcontract_subcontractorsdatasource() }); kendo.bind($("#aecontract"), viewmodel); // validator = $("#editform").kendovalidator().data("kendovalidator"); var contract_companiesddl = $("#contract_subcontractor").kendodropdownlist({ filter: "startswith", datatextfield: "name", datavaluefield: "id", datasource: viewmodel.compainies , select: function (e) { var dataitem = this.dataitem(e.item); console.log("event :: select (" + dataitem.text + " : " + dataitem.value + ")"); }, change: function () { console.log("event :: change"); } //,autobind: false }); jquery("#contractgrid").kendogrid({ columns: [ { title: "contract number", "width": "140px", "field": "contractnumber", "encoded": true, "editor": null }, { title: "title", "width": "180px", "field": "title", "encoded": true, "editor": null }, { title: "sub contractor", "width": "190px", "field": "subcontractorname", "encoded": true, "editor": null }, { title: "project", "width": "140px", "field": "projectname", "encoded": true, "editor": null }, { "width": "180px", "command": [{ "name": "edit", "buttontype": "imageandtext", "text": "edit" }, { "name": "destroy", "buttontype": "imageandtext", "text": "delete" }] }], pageable: { "buttoncount": 10 }, sortable: true, selectable: "single, row", height: 350, filterable: true, excel: { "proxyurl": "/contracts/excel_export_save", "filename": "kendo ui grid export.xlsx", "filterable": true }, pdf: { "proxyurl": "/contracts/pdf_export_save", "filename": "kendo ui grid export.pdf" }, columnmenu: true, editable: { confirmation: "are sure want delete record?", confirmdelete: "delete", canceldelete: "cancel", window: { title: "edit", modal: true, draggable: true, resizable: false }, create: true, update: true, destroy: true }, // toolbar: ["create", "cancel"], // specify toolbar commands, datasource: viewmodel.datasource , navigatable: true, change: oncontractgridchange }); }); function getcontractdatasource() { return new kendo.data.datasource({ type: (function () { if (kendo.data.transports['webapi']) { return 'webapi'; } else { throw new error('the kendo.aspnetmvc.min.js script not included.'); } })(), transport: { read: { url: "/api/contracts", data: listcontractparams() }, prefix: "", create: { url: "/api/contracts/postcontract", type: "post" }, update: { url: "/api/contracts/putcontract/{0}", type: "put" }, destroy: { url: "/api/contracts/{0}" }, idfield: "id" }, pagesize: 10, page: 1, total: 0, serverpaging: true, serversorting: true, serverfiltering: true, servergrouping: true, serveraggregates: true, filter: [], schema: { "data": "data", "total": "total", "errors": "errors", "model": { "id": "id"} }, change: function () { if (viewmodel) { viewmodel.set("haschanges", this.haschanges()); } } } ); } function getcontract_subcontractorsdatasource() { return new kendo.data.datasource( { type: 'odata', serverfiltering: true, transport: { read: { url: "api/companies/getcompanies", datatype: 'json' } , parametermap: function (options, type) { var parammap = kendo.data.transports.odata.parametermap(options); delete parammap.$inlinecount; // <-- remove inlinecount parameter. delete parammap.$format; // <-- remove format parameter. return parammap; } } , schema: { data: function (data) { return data; // <-- result data, doesn't need unpacked. }, total: function (data) { return data.length; // <-- total items count data length, there no .count unpack. }, model: { id: "id", fields: { id: { type: "number" }, name: { type: "string" } } } } , idfield: "id" } ); } function oncontractgridchange(arg) { grid = arg.sender; var currentdataitem = grid.dataitem(this.select()); viewmodel.set("selected", currentdataitem); } function listcontractparams() { if (projectid === null) { return null; } else { return { projectid: json.stringify(projectid) }; } } </script>
Comments
Post a Comment