This topic contains 4 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 12 months ago.
-
sorry for the late….this is my page.
when click “add button” the label “no data to display” move on the left.thanks in advance
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Il Gestionale</title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.10.2.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.pager.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.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/jqxcalendar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxwindow.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/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmaskedinput.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/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/jqxpanel.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxvalidator.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”scripts/gettheme.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<style>
html, body{width: 100%; height: 100%; overflow: hidden;}
</style><script type=”text/javascript”>
window.onresize = function(event) {
$(“#jqxgrid”).jqxGrid({height: $(window).height()-25});
}$(document).ready(function () {
var theme = getDemoTheme();var dynamic_height = $(window).height() – 25;
var hideLinkColum = true;
var manageCustomer = false;var query = window.location.search.substring(1);
var vars = query.split(“&”);
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split(“=”);
if (pair[0] == ‘clienti’) {
manageCustomer = pair[1];
}
if (pair[0] == ‘showLinkColum’) {
hideLinkColum = pair[1];
}
}// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘codice’, type: ‘string’ },
{ name: ‘descrizione’, type: ‘string’ }
],
url: ‘_data.php’,
updaterow: function (rowid, rowdata, commit) {var data = “update=true”;
data = data + “&codice=” + rowdata.codice;
data = data + “&descrizione=” + rowdata.descrizione;
$.ajax({
dataType: ‘json’,
url: ‘_data.php’,
data: data,
success: function (data, status, xhr) {
commit(true);
}
});},
deleterow: function (rowid, commit) {var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, rowid);
var codice = dataRecord.codice;
var data = “delete=true&codice=” + codice;
$.ajax({
dataType: ‘json’,
url: ‘_data.php’,
data: data,
success: function (data, status, xhr) {
commit(true);
}
});},
addrow: function (rowid, rowdata, position, commit) {
var data = “new=true”;
data = data + “&codice=” + rowdata.codice;
data = data + “&descrizione=” + rowdata.descrizione;
$.ajax({
dataType: ‘json’,
url: ‘_data.php’,
data: data,
success: function (data, status, xhr) {
rowdata.customerID = data;
commit(true);
}
});}
};var addfilter = function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = ”;
var filtercondition = ‘contains’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtervalue = ”;
filtercondition = ‘starts_with’;
var filter2 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
// add the filters.
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘firstname’, filtergroup);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}// initialize the input fields.
$(“#codice”).jqxInput({ theme: theme});
$(“#descrizione”).jqxInput({ theme: theme });$(“#codice”).width(80);
$(“#codice”).height(23);
$(“#descrizione”).width(250);
$(“#descrizione”).height(23);var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: ‘99%’,
height: dynamic_height,
source: dataAdapter,
theme: theme,
filterable: true,
sortable: true,
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 editButton = $(“<div style=’float: left; margin-left: 5px;’>
<span style=’margin-left: 4px; position: relative; top: -3px;’>Edit</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>”);
container.append(addButton);
container.append(editButton);
container.append(deleteButton);
container.append(reloadButton);
statusbar.append(container);
addButton.jqxButton({ theme: theme, width: 80, height: 20 });
editButton.jqxButton({ theme: theme, width: 80, height: 20 });
deleteButton.jqxButton({ theme: theme, width: 80, height: 20 });
reloadButton.jqxButton({ theme: theme, width: 80, height: 20 });// add new row.
addButton.click(function (event) {
$(“#popupWindow”).jqxWindow({ position: ‘center’ });
editrow = -1;
$(“#codice”).val(“”);
$(“#descrizione”).val(“”);
$(“#codice”).jqxInput({ disabled: false});
$(“#popupWindow”).jqxWindow(‘open’);
});editButton.click(function (event) {
editrow = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
$(“#popupWindow”).jqxWindow({ position: ‘center’ });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#codice”).val(dataRecord.codice);
$(“#descrizione”).val(dataRecord.descrizione);
$(“#codice”).jqxInput({ disabled: true});
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
});deleteButton.click(function (event) {
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
var row = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
if (row >= 0 && row < rowscount) {
$(“#jqxgrid”).jqxGrid(‘deleterow’, row);
} else {
alert(‘Rimuovere il filtro!’);
}
});reloadButton.click(function (event) {
$(“#jqxgrid”).jqxGrid({ source:dataAdapter});
});
},
ready: function () {
addfilter();
},
autoshowfiltericon: true,
columns: [
{ text: ‘Codice’, datafield: ‘codice’, width: 80},
{ text: ‘Descrizione’, datafield: ‘descrizione’}
]
});$(“#jqxgrid”).on(“celldoubleclick”, function (){
if (hideLinkColum == true) {
return;
}
var row = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);
//var codice = dataRecord.codice;
//parent.document.getElementById(“um_id”).value=dataRecord.codice;
parent.$(‘#um_id’).val(dataRecord.codice);
//parent.um_id.value=dataRecord.codice;
//parent.cognome.value=dataRecord.cognome;
//parent.nome.value=dataRecord.nome;
parent.$(‘#eventWindow’).jqxWindow(‘close’);});
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 400, height: 165, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
$(“#popupWindow”).on(‘open’, function () {
//$(“#popupWindow”).style.visibility=”visible”;
if (document.getElementById(‘popupWindow’).style.visibility==”hidden”){
document.getElementById(‘popupWindow’).style.visibility=”visible”
}
$(“#codice”).jqxInput(‘selectAll’);
});$(“#Cancel”).jqxButton({width: ’80px’, height: ’25px’, theme: theme });
$(“#Save”).jqxButton({width: ’80px’, height: ’25px’, theme: theme });$(“#Save”).click(function () {
var check = $(‘#inputForm’).jqxValidator(‘validate’);if (check == true) {
var row = { codice: $(“#codice”).val(),
descrizione: $(“#descrizione”).val(),
};
var rowID;if (editrow != -1) {
rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
} else {
$(‘#jqxgrid’).jqxGrid(‘addrow’, null, row);
}$(“#popupWindow”).jqxWindow(‘hide’);
}
});$(‘#inputForm’).jqxValidator({
rules: [
{ input: ‘#codice’, message: ‘Codice e obbligatorio’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#descrizione’, message: ‘Descrizione e obbligatoria!’, action: ‘keyup, blur’, rule: ‘required’ }],
theme: theme
});$(‘#inputForm’).jqxValidator( { scroll: false } );
});
</script>
</head>
<body class=’default'”>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
<div id=”popupWindow” style=”visibility:hidden”>
<div>Gestione Anagrafica Unita di Misura</div>
<div style=”overflow: hidden;” align=”center”>
<div>
</br>
<form id=”inputForm” action=”./” >
<table name=”mainTable” id=”mainTable”>
<tr>
<td align=”right”>Codice:</td>
<td align=”left”><input id=”codice” maxlength=”5″/></td>
</tr>
<tr>
<td align=”right”>Descrizione:</td>
<td colspan=”2″ align=”left”><input id=”descrizione” /></td>
</tr>
</table>
</form>
</div>
</br>
<div>
<div id=’Cancel’ style=’float: right;margin-right:5px;’>
<div style=’float: left; margin: 4px;’>
Cancel</div>
</div>
<div id=’Save’ style=’float: right;margin-right:5px;’>
<div style=’float: left; margin: 4px;’>
Save</div>
</div>
</div>
</div>
</body>
</html>
You must be logged in to reply to this topic.