Thursday, 15 March 2012

Adding a row with a button in Kendo Grid -



Adding a row with a button in Kendo Grid -

i'm trying add together additional row top of table 3 side side buttons. need add together html or somehow dynamically added via js? sort of url below it's button (possibly image) , not dropdown (these controls edit, delete , add together columns buttons):

http://demos.kendoui.com/web/grid/toolbar-template.html

<!doctype html> <head> <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="styles/kendo.blueopal.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.web.min.js" type="text/javascript"></script> </head> <body> <div id="grid"></div> <script> $(function(){ var people = [{patientname: "john doe", mrn: "464684778", account: "56765765224768", dateofbirth: "01/06/2013", room: 403, bed: 22, admitdate: "01/15/2013" }, {patientname: "john doe", mrn: "464684778", account: "56765765224768", dateofbirth: "01/06/2013", room: 403, bed: 22, admitdate: "01/15/2013" }, {patientname: "jane doe", mrn: "464684778", account: "56765765224768", dateofbirth: "01/06/2013", room: 403, bed: 22, admitdate: "01/15/2013" }, {patientname: "bert jones", mrn: "464684778", account: "56765765224768", dateofbirth: "01/06/2013", room: 403, bed: 22, admitdate: "01/15/2013" }, ]; $("#grid").kendogrid({ columns: [{field: "patientname", title: "patient name"}, {field: "mrn", title: "mrn"}, {field: "account", title: "account#"}, {field: "dateofbirth", title: "date of birth"}, {field: "room", title: "room"}, {field: "bed", title: "bed"}, {field: "admitdate", title: "admit date" }], datasource: { data:people }, height:300, scrollable:true, pageable: true, pagesize: 2, sortable: true }); }); </script> </body> </html>

you can add together toolbar section kendogrid config, , supply list of buttons want add:

$("#grid").kendogrid({ columns: [{field: "patientname", title: "patient name"}, {field: "mrn", title: "mrn"}, {field: "account", title: "account#"}, {field: "dateofbirth", title: "date of birth"}, {field: "room", title: "room"}, {field: "bed", title: "bed"}, {field: "admitdate", title: "admit date" }], toolbar: [ {"name": "create"}, {"name": "save"}, {"name": "cancel"} ], datasource: { data:people }, height:300, scrollable:true, pageable: true, pagesize: 2, sortable: true });

if can't things way want toolbar, can supply own html option:

toolbar: "<div>stuff here</div>"

there's more info in docs, here: http://docs.kendoui.com/api/web/grid#toolbar-array

kendo-ui

No comments:

Post a Comment