[AntonyMember]

It would be a very useful feature to assign custom data to a grid column, especially while developing business applications. Would you please consider this in your development plan?

[AntonyMember]

Adding splitter inside a Tab control is working fine. There is no issue on that. Problem is that splitter layout does not persist when there are splitters on multiple tabs of the same tab control. Please help.

[AntonyMember]

Thank you very much for your quick reply. This demo does not have splitter control. Problem is that splitter layout does not persist when there are splitters on multiple tabs of a tab control. Please help.

[AntonyMember]

This is the same code as in your demo. I just changed the event to rowdoubleclick.

————————————

Right-Click on a jqxGrid Row to open a Context Menu.

$(document).ready(function () {
var theme = getTheme();

// prepare the data
var data = generatedata(25);

var source =
{
localdata: data,
datatype: “array”,
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);
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};

// initialize the input fields.
$(“#firstName”).addClass(‘jqx-input’);
$(“#lastName”).addClass(‘jqx-input’);
$(“#product”).addClass(‘jqx-input’);
$(“#firstName”).width(150);
$(“#firstName”).height(23);
$(“#lastName”).width(150);
$(“#lastName”).height(23);
$(“#product”).width(150);
$(“#product”).height(23);

if (theme.length > 0) {
$(“#firstName”).addClass(‘jqx-input-‘ + theme);
$(“#lastName”).addClass(‘jqx-input-‘ + theme);
$(“#product”).addClass(‘jqx-input-‘ + theme);
}

$(“#quantity”).jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
$(“#price”).jqxNumberInput({ width: 150, height: 23, theme: theme, spinButtons: true });

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
pageable: true,
autoheight: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 100 },
{ text: ‘Product’, datafield: ‘productname’, width: 190 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 90, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});

// create context menu
var contextMenu = $(“#Menu”).jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: ‘popup’, theme: theme });

$(“#jqxgrid”).bind(‘contextmenu’, function () {
return false;
});

// handle context menu clicks.
$(“#Menu”).bind(‘itemclick’, function (event) {
var args = event.args;
var rowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
if ($(args).text() == “Edit Selected Row”) {
editrow = rowindex;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#firstName”).val(dataRecord.firstname);
$(“#lastName”).val(dataRecord.lastname);
$(“#product”).val(dataRecord.productname);
$(“#quantity”).jqxNumberInput({ decimal: dataRecord.quantity });
$(“#price”).jqxNumberInput({ decimal: dataRecord.price });

// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
else {
var rowid = $(“#jqxgrid”).jqxGrid(‘getrowid’, rowindex);
$(“#jqxgrid”).jqxGrid(‘deleterow’, rowid);
}
});

$(“#jqxgrid”).bind(‘rowdoubleclick’, function (event) {
//if (event.args.rightclick) {
$(“#jqxgrid”).jqxGrid(‘selectrow’, event.args.rowindex);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);

return false;
//}
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01 });
$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });

// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { firstname: $(“#firstName”).val(), lastname: $(“#lastName”).val(), productname: $(“#product”).val(),
quantity: parseInt($(“#quantity”).jqxNumberInput(‘decimal’)), price: parseFloat($(“#price”).jqxNumberInput(‘decimal’))
};
var rowid = $(“#jqxgrid”).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowid, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});
});

Edit

First Name:

Last Name:

Product:

Quantity:

Price:

Edit Selected Row
Delete Selected Row

[AntonyMember]

Hi Dimitar,

Thank you very much for the answer.

Can you also please let me know how I can give the same formatting as that of the column to the aggregate value.
Also please help me to get the group aggregates. Currently I see only count for groups.

Thanks and regards
Antony

[AntonyMember]

Hi Peter,

Please help me to get removeItem working. As mentioned earlier after setting innerHTML=””, getItems still returns all removed items.

[AntonyMember]

Hi Peter,

Thank you very much for your reply. I tried the code provided by you. The tree gets empty, but ‘getItems’ method still returns the removed children also.

Thanks and regards
Antony

[AntonyMember]

Thank you for your help.

[AntonyMember]

correction: disabled was set to true, but mouse pointer does not change.

[AntonyMember]

Hi Milen,

Thank you very much for your quick reply. Setting the visibility property hides the arrow, but does not move items to left. Please look into the matter and help.

[AntonyMember]

Thank you Steve. I got it working using cellsrenderer setting. However it would be more appreciated if you could have an inbuilt setting for this as serial number always starts with 1.

[AntonyMember]

I tried columntype: ‘number’ and it works fine. But number starts from 0. Is there a way to make number start from 1 instead?

[AntonyMember]

Thank you very much Peter. I tested and it works.

[Author]

Posts