This topic contains 5 replies, has 2 voices, and was last updated by Hristo 3 years, 9 months ago.
-
here is code I Use (your sample add one material css)
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/everpresentrowcustomwidgets.htm<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>The sample shows how to customize fields in the ever present row. The first Text Field in the ever present row is disabled.</title>
<link rel=”stylesheet” href=”../../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../../../jqwidgets/styles/jqx.material.css” type=”text/css” /><meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
<script type=”text/javascript” src=”../../../scripts/jquery-1.12.4.min.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../../jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../../../scripts/demos.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script src=”../../../jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var data = generatedata(20);
var source =
{
localdata: data,
datafields:
[
{ name: ‘name’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘date’, type: ‘date’ },
{ name: ‘quantity’, type: ‘number’ }
],
datatype: “array”
};var dataAdapter = new $.jqx.dataAdapter(source);
var getSourceAdapter = function (name) {
var source =
{
localdata: data,
datafields:
[
{ name: ‘name’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ }
],
datatype: “array”
};
var fields = new Array();
fields.push(name);
var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, autoSort: true, uniqueDataFields: fields, autoSortField: name });
return dataAdapter.records;
}$(“#grid”).jqxGrid(
{
width: getWidth(‘Grid’),
filterable: true,
source: dataAdapter,
showeverpresentrow: true,
everpresentrowposition: “top”,
editable: true,
everpresentrowactionsmode: “columns”,
columns: [
{
text: ‘Name’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘name’, width: 215,
createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<input style=’box-sizing: border-box; border: none;’/>”).appendTo(htmlElement);
inputTag.jqxInput({ popupZIndex: 99999999, placeHolder: “Enter Name: “, source: getSourceAdapter(“name”), displayMember: ‘name’, width: ‘100%’, height: 30 });
$(document).on(‘keydown.name’, function (event) {
if (event.keyCode == 13) {
if (event.target === inputTag[0]) {
addCallback();
}
}
});
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) {
},
validateEverPresentRowWidgetValue: function (datafield, value, rowValues) {
if (!value || (value && value.length < 5)) {
return { message: “Entered value should be more than 5 characters”, result: false };
}
return true;
},
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
var value = htmlElement.val();
return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.val(“”);
}
},
{
text: ‘Product’, filtertype: ‘checkedlist’, datafield: ‘productname’, width: 220,
createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
inputTag.jqxComboBox({ popupZIndex: 99999999, placeHolder: “Enter Product: “, source: getSourceAdapter(“productname”), displayMember: ‘productname’, width: ‘100%’, height: 30 });
$(document).on(‘keydown.productname’, function (event) {
if (event.keyCode == 13) {
if (event.target === inputTag[0]) {
addCallback();
}
else if ($(event.target).ischildof(inputTag)) {
addCallback();
}
}
});
return inputTag;
},
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
var selectedItem = htmlElement.jqxDropDownList(‘getSelectedItem’);
if (!selectedItem)
return “”;var value = selectedItem.label;
return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.jqxDropDownList(‘clearSelection’);
}
},
{
text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘range’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’,
createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
inputTag.jqxDateTimeInput({ value: null, popupZIndex: 99999999, placeHolder: “Enter Date: “, width: ‘100%’, height: 30 });
$(document).on(‘keydown.date’, function (event) {
if (event.keyCode == 13) {
if (event.target === inputTag[0]) {
addCallback();
}
else if ($(event.target).ischildof(inputTag)) {
addCallback();
}
}
});
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) {
},
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
var value = htmlElement.val();
return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.val(null);
}
},
{
text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘number’, cellsalign: ‘right’,
createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
inputTag.jqxNumberInput({ inputMode: ‘simple’, decimalDigits: 0, width: ‘100%’, height: 30 });
$(document).on(‘keydown.qty’, function (event) {
if (event.keyCode == 13) {
if (event.target === inputTag[0]) {
addCallback();
}
else if ($(event.target).ischildof(inputTag)) {
addCallback();
}
}
});
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) {
},
validateEverPresentRowWidgetValue: function (datafield, value, rowValues) {
if (parseInt(value) < 0) {
return { message: “Entered value should be positive number”, result: false };
}
return true;
},
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
var value = htmlElement.val();
if (value == “”) value = 0;
return parseInt(value);
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.val(“”);
}
},
{ text: ”, datafield: ‘addButtonColumn’, width: 50 },
{ text: ”, datafield: ‘resetButtonColumn’, width: 50 }
]
});$(“#top”).jqxRadioButton({ checked: true });
$(“#bottom”).jqxRadioButton();
$(“#top”).on(‘checked’, function () {
$(“#grid”).jqxGrid(‘everpresentrowactions’, ‘add reset’);
});
$(“#bottom”).on(‘checked’, function () {
$(“#grid”).jqxGrid(‘everpresentrowactions’, ‘addBottom reset’);
});
});
</script>
</head>
<body>
<div id=”grid”>
</div>
<br />
<div id=”top”>Add New Row to Top</div>
<div id=”bottom”>Add New Row to Bottom</div><div style=”position: absolute; bottom: 5px; right: 5px;”>
</div>
</body>
</html>
You must be logged in to reply to this topic.