You can refer my previous post here on use cases of a CRUD application.
We will be illustrating the creation of a simple jade based delete user interface for an employee object using KendoUI grid in the following post:
|
extends layout
block content
script(type='text/javascript')
$(document).ready(function() {
var keyValuesResult = !{result};
<!-- Data source for outer grid
-->
var dataSource = new
kendo.data.DataSource({
pageSize:
6,
autoSync: true,
data: keyValuesResult,
schema: {
model: {
fields: {
updated: { type: "date" },
created: { type: "date" },
address:{ type: "string" },
name:{ type: "string" },
employeeid:{ type:
"string" },
_id:{type:"string"}
}
}
}
});
<!-- Define the grid and
attributes -->
var element =
$("#myGrid").kendoGrid({
dataSource:dataSource,
pageSize: 6,
serverPaging: true,
serverSorting: true,
databind:true,
height: 450,
sortable: true,
pageable: true,
selectable: true,
filterable: true,
resizable: true,
editable:true,
columns: [
{
field:"updated",title:"Updated
Date",attributes:{title:"ToolTip"}, width: 150 },
{
field:"created",title:"Created Date",width: 150 },
{
field:"address",title:"Address",width: 100 },
{
field:"name",title:"Name",width: 100 },
{ field:"employeeid",title:"Employee
Id",width: 50 },
{
field:"_id",title:"_id",width: 50},
{command:
{
name : "destroy",
text : "delete",
}
}
],
remove: deleteFunction
});
function deleteFunction(e){
<!-- delete handler -->
var selectedrow = $("#myGrid").find("tbody tr.k-state-selected");
var rowData =
$('#myGrid').data("kendoGrid").dataItem(selectedrow);
//alert("in here"+rowData._id);
var qString
="_id="+rowData._id;
$.ajax({
type:"GET",
dataType: "json",
url: '/deleteEmployee',
data:qString,
success:function(msg){
//translatedData=msg;
//dataSource1.data(translatedData);
//alert("translatedData..."+translatedData);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
//alert("error"+textStatus);
}
});//ajax ends here
}
});
h1= title
p Employee Details
#example.k-content
#myGrid
|
|
|
Summary of what is being done in the Delete user interface:
1) We create a KendoUI grid called "myGrid".
2) Ensure that you have added the KendoUI library from the official site.
3) Ensure that you have added any dependent library such as the Jquery library.
4) Create the datasource for the grid and bind this to the server side JSON object.
5) Define the attributes of the grid for pagination, filters, sorting etc.
6) In order to support the delete option, add appropriate command as follows under the grid column defination:
"{command:
{
name : "destroy",
text : "delete",
}
}"
This line provides a button on every row with label as delete.
7) Add the delete click handler by defining the function: under the grid attribute definition:
"remove: deleteFunction"
8) Another aliter worth mentioning is the method to extract the cell value of the selected row in the datagrid. This done as follows by identifying the selected row in the grid:
"var selectedrow = $("#myGrid").find("tbody tr.k-state-selected");
var rowData = $('#myGrid').data("kendoGrid").dataItem(selectedrow);"
12) The rest of the code within the deleteFunction is application related to create an Ajax call and send the required data for processing.
Userful & Great Article for NodeJS Development
ReplyDeleteNode js Course
Nodejs Training