Hi!
I have successfully done the code of inline editing (Add new row, update, delete), but I could not able to get date picker when editing date column. Instead getting simple text box.
Date validation is working fine.
Here is code :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NDB38a_add.aspx.cs" Inherits="WebApplication1.NDB38a_add" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--jQuery dependencies-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<!--PQ Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<script src="pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
<link rel="stylesheet" href="themes/office/pqgrid.css" />
<style type="text/css">
div.pq-grid *
{
font-size:12px;
}
button.delete_btn
{
margin:-2px 0px;
}
button.edit_btn
{
margin:-3px 0px;
}
tr.pq-grid-row td
{
color:#888;
}
tr.pq-row-edit > td
{
color:#000;
}
tr.pq-row-delete
{
text-decoration:line-through;
}
tr.pq-row-delete td
{
background-color:pink;
}
</style>
<script type="text/javascript">
var parentRow = "";
var rowIndexGlobal = "";
$(function () {
var accno = "";
//define common ajax object for addition, update and delete.
var ajaxObj = {
dataType: "JSON",
beforeSend: function () {
this.pqGrid("showLoading");
},
complete: function () {
this.pqGrid("hideLoading");
},
error: function () {
this.pqGrid("rollback");
}
};
//to check whether any row is currently being edited.
function isEditing($grid) {
var rows = $grid.pqGrid("getRowsByClass", { cls: 'pq-row-edit' });
if (rows.length > 0) {
//focus on editor if any
$grid.find(".pq-editor-focus").focus();
return true;
}
return false;
}
//called by add button in toolbar.
function addRow($grid) {
if (isEditing($grid)) {
return false;
}
//append empty row in the first row.
var rowData = { expno: 0, Accode: 0, Descriptn: "", ExpDate: "", Amount: 0.0, Note: "", RefNo: 0 }; //empty row template
$grid.pqGrid("addRow", { rowIndxPage: 0, rowData: rowData });
var $tr = $grid.pqGrid("getRow", { rowIndxPage: 0 });
if ($tr) {
//simulate click on edit button.
$tr.find("button.edit_btn").click();
}
}
//called by delete button.
function deleteRow(rowIndx, $grid) {
$grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
var rowData = $grid.pqGrid("getRowData", { rowIndx: rowIndx });
var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
if (ans) {
$grid.pqGrid("deleteRow", { rowIndx: rowIndx, effect: true });
var reportNo = $grid.pqGrid("getRecId", { rowIndx: rowIndx });
$.ajax($.extend({}, ajaxObj, {
context: $grid,
url: "WebForm2.aspx?methName=delete",
data: { reportNo: reportNo },
success: function () {
this.pqGrid("commit");
this.pqGrid("refreshDataAndView");
},
error: function () {
//debugger;
this.pqGrid("removeClass", { rowData: rowData, cls: 'pq-row-delete' });
this.pqGrid("rollback");
}
}));
}
else {
$grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
}
}
//called by edit button.
function editRow(rowIndx, $grid) {
$grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
//change edit button to update button and delete to cancel.
var $tr = $grid.pqGrid("getRow", { rowIndx: rowIndx }),
$btn = $tr.find("button.edit_btn");
$btn.button("option", { label: "Update", "icons": { primary: "ui-icon-check" } })
.unbind("click")
.click(function (evt) {
evt.preventDefault();
return update(rowIndx, $grid);
});
$btn.next().button("option", { label: "Cancel", "icons": { primary: "ui-icon-cancel" } })
.unbind("click")
.click(function (evt) {
$grid.pqGrid("quitEditMode");
$grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
$grid.pqGrid("refreshRow", { rowIndx: rowIndx });
$grid.pqGrid("rollback");
});
}
//called by update button.
function update(rowIndx, $grid) {
if ($grid.pqGrid("saveEditCell") == false) {
return false;
}
var isValid = $grid.pqGrid("isValid", { rowIndx: rowIndx }).valid;
if (!isValid) {
return false;
}
var isDirty = $grid.pqGrid("isDirty");
if (isDirty) {
var url,
rowData = $grid.pqGrid("getRowData", { rowIndx: rowIndx }),
recIndx = $grid.pqGrid("option", "dataModel.recIndx");
$grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
if (rowData[recIndx] == null) {
//url to add records.
url = "WebForm2.aspx?methName=add";
}
else {
//url to update records.
url = "WebForm2.aspx?methName=update";
}
$.ajax($.extend({}, ajaxObj, {
context: $grid,
url: url,
data: rowData,
success: function (response) {
var recIndx = this.pqGrid("option", "dataModel.recIndx");
if (rowData[recIndx] == null) {
rowData[recIndx] = response.recId;
}
this.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
this.pqGrid("commit");
}
}));
}
else {
$grid.pqGrid("quitEditMode");
$grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
$grid.pqGrid("refreshRow", { rowIndx: rowIndx });
}
}
var dateEditor = function (ui) {
var $inp = ui.$cell.find("input"),
$grid = $(this),
validate = function (that) {
var valid = $grid.pqGrid("isValid", { dataIndx: ui.dataIndx, value: $inp.val() }).valid;
if (!valid) {
that.firstOpen = false;
}
};
//initialize the editor
$inp
.on("input", function (evt) {
validate(this);
})
.datepicker({
changeMonth: true,
changeYear: true,
showAnim: '',
onSelect: function () {
this.firstOpen = true;
validate(this);
},
beforeShow: function (input, inst) {
return !this.firstOpen;
},
onClose: function () {
this.focus();
}
});
}
var colM = [
{ title: "expno", hidden: true, width: 0, dataType: "string", dataIndx: "expno", editable: false},
{ title: "Accode", width: 70, dataType: "string", dataIndx: "Accode", editable: false },
{ title: "Description", width: 200, dataType: "string", dataIndx: "Descriptn", editable: false },
{ title: "ExpDate", width: 70, dataType: "date", dataIndx: "ExpDate" ,
editor: {
type: 'textbox',
init: dateEditor
},
render: function (ui) {
//return "hello";
var cellData = ui.cellData;
if (cellData) {
return $.datepicker.formatDate('yy-mm-dd', new Date(cellData));
}
else {
return "";
}
},
validations: [
{ type: 'regexp', value: '^[0-9]{2}/[0-9]{2}/[0-9]{4}$', msg: 'Not in mm/dd/yyyy format' }
]
},
{
title: "Amount", width: 70, dataType: "float", align: "right", dataIndx: "Amount",
validations: [
{ type: 'gt', value: 1.0, msg: "should be > 1.0" }
]
},
{ title: "RefNo", width: 50, dataType: "integer", dataIndx: "RefNo"},
{ title: "Note", width: 200, dataType: "string", dataIndx: "Note" },
{
title: "", editable: false, minWidth: 165, sortable: false, render: function (ui) {
return "<button type='button' class='edit_btn'>Edit</button>\
<button type='button' class='delete_btn'>Delete</button>";
}
}
];
//Parent grid data
var data = [{ "expno": "14000001", "Accode": "3850010", "Descriptn": "TRAVELLING - COMMUNICATION", "ExpDate": "5/13/2014 ", "Amount": 1000.00, "Note": "", "RefNo": 0 }, { "expno": "14000001", "Accode": "3850004", "Descriptn": "TRAVELLING - ENTERTAINMENT", "ExpDate": "5/13/2014 ", "Amount": 250.00, "Note": "", "RefNo": 0 }, { "expno": "14000001", "Accode": "3850012", "Descriptn": "TRAVELLING - TOLL", "ExpDate": "4/30/2014 ", "Amount": 550.00, "Note": "", "RefNo": 0 }, { "expno": "14000001", "Accode": "3850008", "Descriptn": "TRAVELLING LODGING EXP", "ExpDate": "4/15/2014 ", "Amount": 4000.00, "Note": "", "RefNo": 0 }, { "expno": "14000001", "Accode": "3850010", "Descriptn": "TRAVELLING - COMMUNICATION", "ExpDate": "4/30/2014 ", "Amount": 200.00, "Note": "", "RefNo": 0 }];
//Child grid data
var accData = [{ "Accode": "385", "AcName": "TRAVELLING EXPENSES" }, { "Accode": "3850001", "AcName": "FOREIGN TRAVEL" }, { "Accode": "3850002", "AcName": "LOCAL CONVEYANCE" }, { "Accode": "3850003", "AcName": "TRAVELLING \u0026 CONVEYANCE" }, { "Accode": "3850004", "AcName": "TRAVELLING - ENTERTAINMENT" }, { "Accode": "3850005", "AcName": "TRAVELLING FARE-AIR" }, { "Accode": "3850006", "AcName": "TRAVELLING FARE-DOMESTIC" }, { "Accode": "3850007", "AcName": "TRAVELLING-FARE -OTHERS" }, { "Accode": "3850008", "AcName": "TRAVELLING LODGING EXP" }, { "Accode": "3850009", "AcName": "TRAVELLING MISC." }, { "Accode": "3850010", "AcName": "TRAVELLING - COMMUNICATION" }, { "Accode": "3850011", "AcName": "TRAVELLING - T. A." }, { "Accode": "3850012", "AcName": "TRAVELLING - TOLL" }, { "Accode": "3850013", "AcName": "TRAV - BOARDING" }, { "Accode": "3850014", "AcName": "TRAV- BUS EXPENSES" }, { "Accode": "3850015", "AcName": "CAR HIRE CHARGES" }, { "Accode": "3850016", "AcName": "PETROL \u0026 DIESEL EXPENSES" }, { "Accode": "3850017", "AcName": "TRAVELLING-TRAIN" }];
var dataModel = {
data: data,
location: "local",
sorting: "local",
dataType: "JSON",
rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],
recIndx: "Accode",
};
var $gridMain = $("#grid_json").pqGrid({
width: 860, height: 500,
dataModel: dataModel,
editable: true,
colModel: colM,
wrap: false,
columnBorders: false,
track: true, //to turn on the track changes.
flexHeight: true,
hwrap: false,
toolbar: {
cls: 'pq-toolbar-export',
items: [{
type: 'button',
label: "Export to CSV",
icon: 'ui-icon-document',
listeners: [{
"click": function (evt) {
$("#grid_export").pqGrid("exportCsv", { url: "/pro/demos/excel" });
}
}]
},
{
type: 'button', icon: 'ui-icon-plus', label: 'Add Expense', listeners: [
{
"click": function (evt, ui) {
var $grid = $(this).closest('.pq-grid');
addRow($grid);
//debugger;
}
}
]
}]
},
numberCell: { show: false },
title: "<b>Expense Report</b>",
resizable: true,
freezeCols: 1,
freezeRows: 0,
selectionModel: { type: 'none' },
scrollModel: {
autoFit: true
},
hoverMode: 'cell',
editModel: {
//onBlur: 'validate',
saveKey: $.ui.keyCode.ENTER
},
editor: { type: 'textbox', select: true, style: 'outline:none;' },
validation: {
icon: 'ui-icon-info'
},
pageModel: { type: "remote" },
cellBeforeSave: function (evt, ui) {
var $grid = $(this);
var isValid = $grid.pqGrid("isValid", ui);
if (!isValid.valid) {
return false;
}
},
//make rows editable selectively.
editable: function (ui) {
var $grid = $(this);
var rowIndx = ui.rowIndx;
if ($grid.pqGrid("hasClass", { rowIndx: rowIndx, cls: 'pq-row-edit' }) == true) {
return true;
}
else {
return false;
}
}
});
$gridMain.on('pqgridrefresh pqgridrefreshrow', function () {
//debugger;
var $grid = $(this);
//delete button
$grid.find("button.delete_btn").button({ icons: { primary: 'ui-icon-close' } })
.unbind("click")
.bind("click", function (evt) {
if (isEditing($grid)) {
return false;
}
var $tr = $(this).closest("tr"),
rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
deleteRow(rowIndx, $grid);
});
//edit button
$grid.find("button.edit_btn").button({ icons: { primary: 'ui-icon-pencil' } })
.unbind("click")
.bind("click", function (evt) {
if (isEditing($grid)) {
return false;
}
var $tr = $(this).closest("tr"),
rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
editRow(rowIndx, $grid);
return false;
});
//rows which were in edit mode before refresh, put them in edit mode again.
var rows = $grid.pqGrid("getRowsByClass", { cls: 'pq-row-edit' });
if (rows.length > 0) {
var rowIndx = rows[0].rowIndx;
editRow(rowIndx, $grid);
}
});
//details grid
var gridDetailModel = {
height: 300,
width: 280,
pageModel: { type: "local" }, //, rPP: 5, strRpp: "" },
dataModel: {
data: accData,
location: "local",
sorting: "local",
dataType: "JSON",
sortIndx: "Accode",
},
colModel: [
{ title: "Account Code", width: 80, dataIndx: "Accode",
filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] } },
{ title: "Description", width: 200, dataIndx: "AcName",
filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] } }
],
editable: false,
freezeCols: 0,
flexHeight: false,
flexWidth: true,
numberCell: { show: true },
filterModel: { on: true, mode: "AND", header: true, type: "local" },
title: "Account Details",
showTop: true,
showBottom: false,
draggable: true,
scrollModel: {horizontal: false }
};
var $gridMain1 = $("#grid_json1").pqGrid(gridDetailModel);
$("#grid_json1").hide();
$("#grid_json1").dialog({ autoOpen: false }); // Initialize dialog plugin
$("#grid_json1").dialog( "option", "width", 400 );
$( "#grid_json" ).pqGrid({
cellClick: function( event, ui ) { }
});
$( "#grid_json" ).on( "pqgridcellclick", function( event, ui ) {
var rowIndx = ui.rowIndxPage, colIndx = ui.colIndx;
rowIndexGlobal = rowIndx;
parentRow = ui.rowData;
if( colIndx==1 )
{
$("#grid_json1").dialog("open"); // Open pop
}
else
{
$("#grid_json1").dialog("close");
}
} );
$( "#grid_json1" ).on( "pqgridcellclick", function( event, ui ) {
parentRow.Accode = ui.rowData.Accode;
parentRow.Descriptn = ui.rowData.AcName;
$("#grid_json").pqGrid("updateRow", { rowIndx: rowIndexGlobal, row: parentRow } );
$("#grid_json").pqGrid("refreshRow", {rowIndx:rowIndexGlobal } );
$("#grid_json1").dialog("close");
rowIndexGlobal = "";
parentRow = "";
});
$("#grid_json").pqGrid("refresh");
});
</script>
<style type="text/css">
.style1
{
width: 31px;
height: 31px;
}
</style>
</head>
<body>
<div id="grid_json" style="margin:auto;"></div>
<div id="grid_json1" style="margin:auto;"></div>
</body>
</html>
If you need any additional information let me know.
