jQWidgets Forums
This topic contains 4 replies, has 2 voices, and was last updated by Hristo 8 years, 8 months ago.
-
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In this sample is demonstrated how to display status bar in
jqxGrid.</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.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/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.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/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var getAdapter = function () {
// prepare the data
var data = generatedata(5);
var rowsIndex = 0;
var rIndex = ‘1’;
var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘available’, type: ‘bool’ }
],
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};var dataAdapter = new $.jqx.dataAdapter(source);
return dataAdapter;
}// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
editable: true,
selectionmode: ‘multiplecellsadvanced’,
source: getAdapter(),
showstatusbar: true,
renderstatusbar: function (statusbar) {
// appends buttons to the status bar.
var container = $(“<div style=’overflow: hidden; position: relative; margin: 5px;’></div>”);
var addButton = $(“<div style=’float: left; margin-left: 5px;’>
<span style=’margin-left: 4px; position: relative; top: -3px;’>Add</span></div>”);
var deleteButton = $(“<div style=’float: left; margin-left: 5px;’>
<span style=’margin-left: 4px; position: relative; top: -3px;’>Delete</span></div>”);
var reloadButton = $(“<div style=’float: left; margin-left: 5px;’>
<span style=’margin-left: 4px; position: relative; top: -3px;’>Reload</span></div>”);
var searchButton = $(“<div style=’float: left; margin-left: 5px;’>
<span style=’margin-left: 4px; position: relative; top: -3px;’>Find</span></div>”);
container.append(addButton);
container.append(deleteButton);
container.append(reloadButton);
container.append(searchButton);
statusbar.append(container);
addButton.jqxButton({ width: 60, height: 20 });
deleteButton.jqxButton({ width: 65, height: 20 });
reloadButton.jqxButton({ width: 65, height: 20 });
searchButton.jqxButton({ width: 50, height: 20 });
// add new row.
addButton.click(function (event) {
var datarow = generatedata(1);
$(“#jqxgrid”).jqxGrid(‘addrow’, null, datarow[0]);
});
// delete selected row.
deleteButton.click(function (event) {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rk =’2′;
alert(rk);if ( selectedrowindex < 0 )
{
selectedrowindex = rowsIndex ;
}var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
$(“#jqxgrid”).jqxGrid(‘deleterow’, id);
});
// reload grid data.
reloadButton.click(function (event) {
$(“#jqxgrid”).jqxGrid({ source: getAdapter() });
});
// search for a record.
searchButton.click(function (event) {
var offset = $(“#jqxgrid”).offset();
$(“#jqxwindow”).jqxWindow(‘open’);
$(“#jqxwindow”).jqxWindow(‘move’, offset.left + 30, offset.top + 30);
});
},
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 120 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 120 },
{ text: ‘Product’, datafield: ‘productname’, width: 170 },
{ text: ‘In Stock’, datafield: ‘available’, columntype: ‘checkbox’, width: 125 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 85, cellsalign: ‘right’, cellsformat: ‘n2’ },
{ text: ‘Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});// create jqxWindow.
$(“#jqxwindow”).jqxWindow({ resizable: false, autoOpen: false, width: 210, height: 180 });
// create find and clear buttons.
$(“#findButton”).jqxButton({ width: 70});
$(“#clearButton”).jqxButton({ width: 70});
// create dropdownlist.
$(“#dropdownlist”).jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23,
source: [
‘First Name’, ‘Last Name’, ‘Product’, ‘Quantity’, ‘Price’
]
});if (theme != “”) {
$(“#inputField”).addClass(‘jqx-input-‘ + theme);
}// clear filters.
$(“#clearButton”).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});// find records that match a criteria.
$(“#findButton”).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
var searchColumnIndex = $(“#dropdownlist”).jqxDropDownList(‘selectedIndex’);
var datafield = “”;
switch (searchColumnIndex) {
case 0:
datafield = “firstname”;
break;
case 1:
datafield = “lastname”;
break;
case 2:
datafield = “productname”;
break;
case 3:
datafield = “quantity”;
break;
case 4:
datafield = “price”;
break;
}var searchText = $(“#inputField”).val();
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = searchText;
var filtercondition = ‘contains’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
$(“#jqxgrid”).jqxGrid(‘addfilter’, datafield, filtergroup);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
});// events
$(“#jqxgrid”).on(‘cellbeginedit’, function (event) {
var args = event.args;
rowIndex = args.rowindex;
$(“#cellbegineditevent”).text(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});$(“#jqxgrid”).on(‘cellendedit’, function (event) {
var args = event.args;
rowsIndex = args.rowindex;
$(“#cellendeditevent”).text(“Event Type: cellendedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”>
</div>
<div id=”jqxwindow”>
<div>
Find Record</div>
<div style=”overflow: hidden;”>
<div>
Find what:</div>
<div style=’margin-top:5px;’>
<input id=’inputField’ type=”text” class=”jqx-input” style=”width: 200px; height: 23px;” />
</div>
<div style=”margin-top: 7px; clear: both;”>
Look in:</div>
<div style=’margin-top:5px;’>
<div id=’dropdownlist’>
</div>
</div>
<div>
<input type=”button” style=’margin-top: 15px; margin-left: 50px; float: left;’ value=”Find” id=”findButton” />
<input type=”button” style=’margin-left: 5px; margin-top: 15px; float: left;’ value=”Clear” id=”clearButton” />
</div>
</div>
</div>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
</body>
</html>
You must be logged in to reply to this topic.