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 update user interface for an employee object using KendoUI grid in the following post:
|
extends layout
block content
<!-- popup editor template -->
script(id="popup_editor" ,
type='text/x-kendo-template')
table.form_table(cellpadding='5', cellspacing='5', border='0')
tr
td
div
label(for='address') Address
td
input(name='text', class='k-textbox',name="address",data-bind='value:address',data-value-field='address',data-text-field='address',data-role='textbox',
required="true")
tr
td
div
label(for='name') Name
td
input(type='text', class='k-textbox',
name='name', data-bind='value:name', data-role='textbox',
required="true")
tr
td
div
label(for='employeeid')
EmployeeID
td
input(type='text', class='k-textbox',
name='employeeid', data-type='textbox',
data-bind='value:employeeid', data-role='textbox', readonly, disabled='disabled')
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,
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 : "edit",
text : "update",
}
}
],
editable: {
mode: "popup",
template:
kendo.template($("#popup_editor").html())
},
edit: editFunction
});
function editFunction(e){
<!-- Edit handler -->
var popUpContainer = e.container;
var selectedrow = $("#myGrid").find("tbody tr.k-state-selected");
var rowData =
$('#myGrid').data("kendoGrid").dataItem(selectedrow);
$(e.container).on('click',
'.k-grid-update', function(e) {
var updatedName =
$(popUpContainer).find("input[name='name']").val();
var updatedAddress =
$(popUpContainer).find("input[name='address']").val();
var updateQueryString =
"name="+updatedName+"&address="+updatedAddress+"&_id="+rowData._id;
if(updatedName!=""
&& updatedName!=undefined){
$.ajax({
type:"GET",
dataType: "json",
url: '/updateEmployee',
data:updateQueryString,
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 Update 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 update option, add appropriate command as follows under the grid column defination:
"{command:
{
name : "edit",
text : "update",
}
}"
This line provides a button on every row with label as update.
7) Add the edit click handler by defining the function: under the grid attribute defination:
"edit: editFunction"
8) Configure the editing style (popup or inline). I am using the popup style with a custom template defined as "popup_editor".
This ensures the use of popup style editting followed by use of custom template defined:
"editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},"
9) The popup editor template created, basically defines a table and binding the data values from the table column to the corresponding element defined. We can selectively set the read attribute, required attribute and so on.
10) 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);"
11) The rest of the code within the editFunction is application related to create an Ajax call and send the required data for processing.
Userful & Great Article for NodeJS Development
ReplyDeleteNode.js Essential Training
Node.js Online Training