Validation message display on the bottom of the grid.
Below is my code:-=
=====================================================
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery.fn.bootstrapBtn = jQuery.fn.button.noConflict();
jQuery.fn.bootstrapTooltip = jQuery.fn.tooltip.noConflict();
</script>
<link rel='stylesheet' href='~/Scripts/pqselect.min.css' />
<script src="~/Scripts/pqselect.min.js"></script>
<link href="~/Content/pqgrid.dev.css" rel="stylesheet" />
<link href="~/Content/pqgrid.ui.min.css" rel="stylesheet" />
<link rel='stylesheet' href='~/Content/themes/office/pqgrid.css' />
<script src="~/Scripts/pqgrid.min.js"></script>
<script src="~/Scripts/5.1.0.1.min.js"></script>
<script src="~/Scripts/touch-punch.min.js"></script>
<script src="~/Scripts/jszip.min.js"></script>
<script src="~/Scripts/filesaver.js"></script>
var autoCompleteEditor = function (ui) {
var $inp = ui.$cell.find("input");
//initialize the editor
$inp.autocomplete({
appendTo: ui.$cell, //for grid in maximized state.
source: Resource,
selectItem: { on: true }, //custom option
highlightText: { on: true }, //custom option
minLength: 1
}).focus(function () {
//open the autocomplete upon focus
jQuery(this).autocomplete("search", "");
});
}
obj = {
rowBorders: true,
trackModel: { on: true },
showHeader: true,
showFooter: true,
resizable:true,
scrollModel:{autoFit:true, theme:true},
MinHeight: '800px',
toolbar: {
items: [
{
type: 'button',
icon: 'ui-icon-plus',
label: 'New Record',
listener: function () {
//append empty row at the end.
var rowData = { Id: 0 }; //empty row
var rowIndx = grid.addRow({ rowData: rowData, rowIndxPage: 0 });
grid.goToPage({ rowIndx: rowIndx });
grid.editFirstCellInRow({ rowIndx: rowIndx, rowIndxPage: 0 });
}
},
{
type: 'button',
icon: 'ui-icon-disk',
label: 'Save Changes',
cls: 'changes',
listener: function () {
saveChanges1();
},
options: { disabled: true }
},
{
type: 'button',
icon: 'ui-icon-cancel',
label: 'Reject Changes',
cls: 'changes',
listener: function () {
grid.rollback();
grid.history({ method: 'resetUndo' });
},
options: { disabled: true }
},
{
type: 'button',
icon: 'ui-icon-arrowreturn-1-s',
label: 'Undo',
cls: 'changes',
listener: function () {
grid.history({ method: 'undo' });
},
options: { disabled: true }
},
{
type: 'button',
icon: 'ui-icon-arrowrefresh-1-s',
label: 'Redo',
listener: function () {
grid.history({ method: 'redo' });
},
options: { disabled: true }
},
{
type: 'button',
label: 'Reset filters',
listener: function () {
this.reset({ filter: true });
}
},
{
type: 'button',
label: "Export To Excel",
icon: 'ui-icon-arrowthickstop-1-s',
listener: function () {
blob = this.exportData({
format: 'xlsx',
render: true
});
if (typeof blob === "string") {
blob = new Blob([blob]);
}
saveAs(blob, "RCCP-MasterData-Pack" + Today + ".xlsx");
}
}
]
},
filterModel: { on: true, mode: "AND", header: true },
editor: { type: 'textbox', style: 'border-radius:5px;' },
title: "<b>" + "Pack Master Data Editing</b>",
history: function (evt, ui) {
var jQuerytb = this.toolbar();
if (ui.canUndo != null) {
jQuery("button.changes", jQuerytb).button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
jQuery("button:contains('Redo')", jQuerytb).button("option", "disabled", !ui.canRedo);
}
jQuery("button:contains('Undo')", jQuerytb)
.button("option", { label: 'Undo (' + ui.num_undo + ')' });
jQuery("button:contains('Redo')", jQuerytb)
.button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
numberCell: { show: false },
colModel: [
{ title: "Id", dataType: "int", dataIndx: "Id", editable: false, width: 40 },
{
title: "Product Code",
width: 105,
dataType: "string",
dataIndx: "ProductCode",
editable: true,
filter: { type: "textbox", condition: 'begin', listener: 'keyup' },
validations: [
{ type: 'minLen', value: 6, msg: "Required" }
]
},
{
title: "Product Desc",
width: 350,
dataType: "string",
align: "left",
dataIndx: "ProductDesc",
editable: false,
cls:"readonly",
filter: { type: "textbox", condition: 'begin', listener: 'keyup' },
},
{
title: "Primary Line",
rowHt: 10,
width: 80,
rowHtHead: 35,
dataType: "string",
align: "left",
dataIndx: "PrimaryLine",
editable: true,
editor: {
type: "textbox",
init: autoCompleteEditor
},
filter: { type: "textbox", condition: 'begin', listener: 'keyup' },
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{ type: function (ui) {
var value = ui.value,
_found = false;
//remote validation
//debugger;
jQuery.ajax({
url: CheckResource,
data: { 'Pline': value},
async: false,
success: function (response) {
if (response == "true") {
_found = true;
}
}
});
if (!_found) {
ui.msg = value + "of PrimaryLine not found in list";
return false;
}
}
},
{
type: function (ui) {
var value = ui.value,
_found = false;
var Pcode = ui.rowData.ProductCode;
var Id = ui.rowData.Id;
if (Id == 0)
{
jQuery.ajax({
url: GetDuplicateRecord,
data: { 'ProductCode': Pcode, 'WcName': value, 'Type': TypeToGet },
async: false,
success: function (response) {
if (response == "true") {
_found = true;
}
}
});
if (_found) {
swal("Can't insert duplicate Product Code " + Pcode);
jQuery("#grid_editingPack").pqGrid("rollback");
jQuery("#grid_editingPack").pqGrid("refreshDataAndView");
}
}
}
}
]
},
{
title: "Bags per Ctn",
width: 95,
align: "right",
dataType: "int",
dataIndx: "BagsperCtn",
editable: false,
cls:"readonly",
},
{
title: "Business Area",
width: 95,
dataType: "string",
dataIndx: "BusinessArea",
editable: false,
cls:"readonly",
filter: { type: "textbox", condition: 'begin', listener: 'keyup' }
},
{
title: "Bag Rate",
width: 70,
dataType: "int",
align: "right",
dataIndx: "BagRate",
editable: true,
editor: {
type: "textbox"
}
},
{
title: "Daily Change Over",
width: 95,
dataType: "int",
align: "right",
dataIndx: "DailyChangeOver",
editable: true,
editor: {
type: "textbox"
}
},
{
title: "Weekly Change Over",
width: 95,
dataType: "int",
align: "right",
dataIndx: "WeeklyChnageOverTime",
editor: {
type: "textbox"
}
},
{
title: "Utilization",
width: 70,
dataType: "float",
align: "right",
dataIndx: "Utilization",
editor: {
type: "textbox"
}
},
{
title: "",
maxWidth:20,
editable: false,
sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>X</button>";
},
postRender: function (ui) {
var rowIndx = ui.rowIndx,
grid = this,
$cell = grid.getCell(ui);
$cell.find("button").button({ icons: { primary: 'ui-icon-scissors' } })
.bind("click",
function () {
grid.addClass({ rowIndx: ui.rowIndx, cls: 'pq-row-delete' });
var ans = window.confirm("Are you sure to delete row No " +
(rowIndx + 1) +
"?");
grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-delete' });
if (ans) {
grid.deleteRow({ rowIndx: rowIndx });
}
});
}
}
],
postRenderInterval: -1, //call postRender synchronously.
pageModel: { type: "local", rPP: 20 },
//create: function () {
// this.widget().pqTooltip();
//},
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "Id",
postData: { Site: Site[0], Type: TypeToGet },
url: getUrl,
getData: function (response) {
return { data: response.data };
}
}
};
grid = pq.grid("#grid_editingPack", obj);
