asp.net mvc - How to create Kendo Context Menu? -
i need create context menu in kendo ui , need add functionality context menu. saw similar post in jqgrid, how create jqgrid context menu? . same need implement in kendo.its urgent.please me in this, thanks
kendogrid
<script type="text/javascript"> $(document).ready(function () { //bind initial data var people = [ { firstname: "hasibul", lastname: "haque", email: "hasibul2363@gmail.com" } , { firstname: "jane", lastname: "smith", email: "jane.smith@kendoui.com" } ]; $('#grid').kendogrid({ scrollable: true, sortable: true, pageable: true, selectable: "row",//""multiple row"", filterable: true , datasource: { data: people, pagesize: 10 } , columns: [ { field: "firstname", title: "first name" } , { field: "lastname", title: "last name" } , { field: "email", title: "email" } , { title: "action", template: ' <input type="button" value="delete" onclick="removeselectedrow()" />' , filterable: false } ] }); $(".k-content").dblclick(doubleclickaction); }); function rebind() { var people = [ { firstname: "robin", lastname: "hood", email: "robin@gmail.com" } , { firstname: "hasibul", lastname: "haque", email: "hasibul@gm.com" } , { firstname: "fauzul", lastname: "hossain", email: "fauzul@gmail.com" } ]; var grid = $("#grid").data("kendogrid"); grid.datasource.data(people); } function insertnewrow() { var grid = $("#grid").data("kendogrid"); var anis = { firstname: "anisur", lastname: "rahaman", email: "anis.com" }; grid.datasource.insert(anis); } function removeselectedrow() { var grid = $("#grid").data("kendogrid"); var selectedrow = grid.dataitem(grid.select()); grid.datasource.remove(selectedrow); } function iteratethroughallrows() { var items = $("#grid").data("kendogrid").datasource.data(); (i = 0; < items.length; i++) { alert(items[i].firstname); } } function doubleclickaction() { var grid = $("#grid").data("kendogrid"); var selectedrow = grid.dataitem(grid.select()); alert("you have double click on " + selectedrow.firstname); } function readselectedrow() { var grid = $("#grid").data("kendogrid"); var selectedrow = grid.dataitem(grid.select()); alert("you have selected firstname: " + selectedrow.firstname + " , last name: " + selectedrow.lastname); } function enableselectedindexchangeevent() { var grid = $("#grid").data("kendogrid"); grid.bind("change", rowselectionchangeevent); } function rowselectionchangeevent() { readselectedrow(); } </script>
<div> <input type="button" value="rebind" onclick="rebind()" /> <input type="button" value="insert new record" onclick="insertnewrow()" /> <input type="button" value="remove selected row" onclick="removeselectedrow()" /> <input type="button" value="iterate" onclick="iteratethroughallrows()" /> <input type="button" value="read selected row" onclick="readselectedrow()" /> <input type="button" value="enable selected index chnage event" onclick="enableselectedindexchangeevent()" /> </div> <div id="grid" class="k-content" > </div>
i think can this jsfiddle.
<ul id="testmenu"> <li value=1> <img src="someurl" /> test 1 </li> <li value=2> <img src="someurl" /> test 2 </li> <li value=3> <img src="someurl" /> test 3 </li> </ul>
li
s in ul
used context menu items.. hope helps...
Comments
Post a Comment