jQWidgets Forums
Forum Replies Created
-
$(document).ready(function () {
var source = {
datatype: “json”,
datafields: [{ name: ‘UserName’ },
{ name: ‘FirstName’ }, { name: ‘Phone’ }, { name: ‘City’ },
{ name: ‘Discontinued’, type: ‘bool’}],
url: ‘User/GetUsers’,
id: ‘UserID’,};
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
var editrow = -1;
var deleterow = -1;
$(“#jqxgrid”).jqxGrid({
width: 860,
source: dataAdapter,
editable: true,
theme: ‘darkblue’,
filterable: true,
sortable: true,
pageable: true,
selectionmode: ‘singlerow’,
editmode: ‘click’,
groupable: true,
enabletooltips: true,
autoshowfiltericon: true,
columns: [{ columntype: ‘checkbox’, datafield: ‘discontinued’, width: 100 },{ text: ‘UserName’, datafield: ‘UserName’, width: 150 },
{ text: ‘FirstName’, datafield: ‘FirstName’, width: 180 },
{ text: ‘Phone’, datafield: ‘Phone’, width: 200 },
{ text: ‘City’, datafield: ‘City’, width: 120 },
{ text: ‘Edit’, datafield: ‘Edit’, width: 60, cellsrenderer: function () {
return ‘
‘;
}
},{ text: ‘Delete’, datafield: ‘Image’, width: 60, cellsrenderer: function () {
return ‘
‘;
}
}]
});
$(“#discontinued”).jqxCheckBox({ theme: ‘darkblue’, checked: true });
$(‘#clearfilteringbutton’).jqxButton({ height: 25, theme: ‘darkblue’ });
$(‘#filterbackground’).jqxCheckBox({ checked: true, height: 25, theme: ‘darkblue’ });
$(‘#filtericons’).jqxCheckBox({ checked: false, height: 25, theme: ‘darkblue’ });
// clear the filtering.
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});
// show/hide filter background
$(‘#filterbackground’).bind(‘change’, function (event) {
$(“#jqxgrid”).jqxGrid({ showfiltercolumnbackground: event.args.checked });
});
// show/hide filter icons
$(‘#filtericons’).bind(‘change’, function (event) {
$(“#jqxgrid”).jqxGrid({ autoshowfiltericon: !event.args.checked });
});// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 250, height: 230, resizable: true, theme: ‘darkblue’, isModal: true, autoOpen: false, saveButton: $(“#Save”), cancelButton: $(“#Cancel”), modalOpacity: 0.01 });
$(“#popupWindow1”).jqxWindow({ width: 250, height: 230, resizable: true, theme: ‘darkblue’, isModal: true, autoOpen: false, cancelButton: $(“#CancelD”), modalOpacity: 0.01 });
$(“#Cancel”).jqxButton({ theme: ‘darkblue’ });
$(“#Save”).jqxButton({ theme: ‘darkblue’ });
$(“#CancelD”).jqxButton({ theme: ‘darkblue’ });
$(“#Delete”).jqxButton({ theme: ‘darkblue’ });
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { UserName: $(“#UserName”).val(), FirstName: $(“#FirstName”).val(), City: $(“#City”).val(),
Phone: parseInt($(“#Phone”).jqxNumberInput(‘decimal’))
};
$(‘#jqxgrid’).jqxGrid(‘updaterow’, editrow, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}$(“#Delete”).click(function () {
if (deleterow >= 0) {
var row = { UserName: $(“#UserNameD”).val(), FirstName: $(“#FirstNameD”).val(), City: $(“#CityD”).val(),
Phone: parseInt($(“#PhoneD”).jqxNumberInput(‘decimal’))
};
$(‘#jqxgrid’).jqxGrid(‘deleterow’, deleterow, row);
$(“#popupWindow1”).jqxWindow(‘hide’);
}
});});
});var buttonClickDelete = function (event, row) {
// open the popup window when the user clicks a button.
alert(‘HereDelete’);
deleterow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow1”).jqxWindow({ position: { x: parseInt(offset.right) + 60, y: parseInt(offset.top) + 60} });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, deleterow);
$(“#UserNameD”).val(dataRecord.UserName);
$(“#FirstNameD”).val(dataRecord.FirstName);
$(“#PhoneD”).val(dataRecord.Phone);
$(“#CityD”).val(dataRecord.City);
// show the popup window.
$(“#popupWindow1”).jqxWindow(‘show’);
}
var buttonClickEdit = function (event, row) {
// open the popup window when the user clicks a button.
alert(event);
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.right) + 60, y: parseInt(offset.top) + 60} });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#UserName”).val(dataRecord.UserName);
$(“#FirstName”).val(dataRecord.FirstName);
$(“#Phone”).val(dataRecord.Phone);
$(“#City”).val(dataRecord.City);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}EditDeleteFilter BackgroundShow All Filter Icons