jquery - How to two have a field in my pop up editor which is not my grid -
in kendo grid popup editor in need 2 have drop down list mix of(concat somehow) 2 fields in grid,so how can have that?in following want have drop down list shows(model & producer) in pop editor, @ time of saving each part should seat in field
$("#turbingrid").kendogrid({ // debugger; datasource: datasource, scrollable: false, columns: [ { field: 'deviceip', title: 'deviceip', width: '100px', id: 'deviceip' }, { field: 'producer', title: 'producer', width: '80px', editor: productnamedropdowneditor, }, { field: 'model', title: 'model', width: '220px' }, { field: 'devicetype', title: 'devicetype', width: '100px',editor: devicetypeslist }, { field: 'description', title: 'description', width: '220px' }, { field: 'username', title: 'username', width: '120px' }, { field: 'password', title: 'password', width: '100px' }, { field: 'publicip', title: 'publicip', width: '120px' }, { field: 'device_id', title: 'device_id', width: '120px',hidden:true }, { command: ["edit"], title: " " }], editable: "popup", //edit: // function () { // document.getelementsbyname("deviceip")[0].disabled = true; // }, edit: function(e) { e.container.find("label[for='device_id']").parent().hide(); e.container.find("div[data-container-for='device_id']").hide(); } });
look @ following code. i've used text box instead of drop-down , made crude demo split
point more important.
you can use beforeedit
event prepare data edit popup , place in new field on model, use new field in template , use save
event apply changes made custom field original fields.
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>kendo ui snippet</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script> </head> <body> <script id="popup-editor" type="text/x-kendo-template"> <h3>edit person</h3> <p> <label>name:<input name="name" /></label> </p> <p> <label>age: <input type="text" name="test" /></label> </p> </script> <div id="grid"></div> <script> $("#grid").kendogrid({ columns: [ { field: "name" }, { field: "age" }, { command: "edit" } ], datasource: { data: [ { id: 1, name: "jane doe", age: 30 }, { id: 2, name: "john doe", age: 33 } ], schema: { model: { id: "id" } } }, editable: { mode: "popup", template: kendo.template($("#popup-editor").html()) }, beforeedit: function(e) { e.model.test = e.model.name + ", " + e.model.age.tofixed(); }, save: (e) => { let values = e.model.test.split(", "); e.model.name = values[0]; e.model.age = parseint(values[1]); } }); </script> </body> </html>
Comments
Post a Comment