jQuery UI Widgets › Forums › Grid › How can i add a delete column to a jqxgrid
This topic contains 17 replies, has 5 voices, and was last updated by Dimitar 9 years, 3 months ago.
-
Author
-
Hi
I want to add delete column to a jqxgrid and when i click on particular delete button of a row then it want to show a popup yes and no like
Are You sure to delete? when i press on yes it will delete from jqxgrid
Plz provide me solution…
Thanks in advance………
Hello narendra.pvnb,
Here is the solution:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes click the 'Cancel' button in the popup dialog.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../../scripts/jquery-1.8.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/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="../../scripts/gettheme.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; // prepare the data var data = generatedata(200); 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' } ], 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 failder. commit(true); } }; // initialize the input fields. $("#firstName").addClass('jqx-input'); $("#lastName").addClass('jqx-input'); $("#product").addClass('jqx-input'); $("#firstName").addClass('jqx-rc-all'); $("#lastName").addClass('jqx-rc-all'); $("#product").addClass('jqx-rc-all'); $("#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); $("#firstName").addClass('jqx-rc-all-' + theme); $("#lastName").addClass('jqx-rc-all-' + theme); $("#product").addClass('jqx-rc-all-' + theme); } $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true }); $("#price").jqxNumberInput({ symbol: '$', width: 150, height: 23, theme: theme, spinButtons: true }); var dataAdapter = new $.jqx.dataAdapter(source); var id; // 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', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Delete', datafield: 'Delete', columntype: 'button', cellsrenderer: function () { return "Delete row"; }, buttonclick: function (row) { // open the popup window when the user clicks a button. id = $("#jqxgrid").jqxGrid('getrowid', row); var offset = $("#jqxgrid").offset(); $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} }); // show the popup window. $("#popupWindow").jqxWindow('show'); } }, ] }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#del").jqxButton({ theme: theme }); $("#cancel").jqxButton({ theme: theme }); $("#del").click(function () { $('#jqxgrid').jqxGrid('deleterow', id); $("#popupWindow").jqxWindow('hide'); }); $("#cancel").click(function () { $("#popupWindow").jqxWindow('hide'); }); }); </script></head><body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> <div style="margin-top: 30px;"> <div id="cellbegineditevent"> </div> <div style="margin-top: 10px;" id="cellendeditevent"> </div> </div> <div id="popupWindow"> <div> Delete row</div> <div style="overflow: hidden;"> <p> Are you sure you would like to delete the selected row?</p> <button id="del"> Yes</button> <button id="cancel"> No</button> </div> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks for reply.
Its working………!
How Can I add a link button to Jqxgrid row. I should get a popup window which should display another grid on button click
Hello fresher,
Please take a look at the following example, based on the demo Popup Editing:
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes click the 'Cancel' button in the popup dialog.</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/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="../../scripts/gettheme.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; // prepare the data var data = generatedata(200); 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' } ], 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 failder. commit(true); } }; // initialize the input fields. $("#firstName").jqxInput({ theme: theme }); $("#lastName").jqxInput({ theme: theme }); $("#product").jqxInput({ theme: theme }); $("#firstName").width(150); $("#firstName").height(23); $("#lastName").width(150); $("#lastName").height(23); $("#product").width(150); $("#product").height(23); $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true }); $("#price").jqxNumberInput({ symbol: '$', width: 150, height: 23, theme: theme, spinButtons: true }); var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; openPopup = function (row) { // open the popup window when the user clicks a button. editrow = row; var offset = $("#jqxgrid").offset(); $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 120, 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('open'); }; var linkrenderer = function (row, column, value) { return "<a href='#' onclick='openPopup(" + row + ")'>" + value + "</a>"; }; // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, columns: [ { text: 'First Name', datafield: 'firstname', width: 100, cellsrenderer: linkrenderer }, { 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', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () { return "Edit"; }, buttonclick: function (row) { openPopup(row); } } ] }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#popupWindow").on('open', function () { $("#firstName").jqxInput('selectAll'); }); $("#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'); } }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> <div style="margin-top: 30px;"> <div id="cellbegineditevent"> </div> <div style="margin-top: 10px;" id="cellendeditevent"> </div> </div> <div id="popupWindow"> <div> Edit</div> <div style="overflow: hidden;"> <table> <tr> <td align="right"> First Name: </td> <td align="left"> <input id="firstName" /> </td> </tr> <tr> <td align="right"> Last Name: </td> <td align="left"> <input id="lastName" /> </td> </tr> <tr> <td align="right"> Product: </td> <td align="left"> <input id="product" /> </td> </tr> <tr> <td align="right"> Quantity: </td> <td align="left"> <div id="quantity"> </div> </td> </tr> <tr> <td align="right"> Price: </td> <td align="left"> <div id="price"> </div> </td> </tr> <tr> <td align="right"> </td> <td style="padding-top: 10px;" align="right"> <input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /> </td> </tr> </table> </div> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank You sir, but this is not which I exactly needed. In the below code it is for nested grid , the same I need in pop up window . How can i bind up another XML data corresponding to that row . In my Case to get product details when i click on product.
<script type=”text/javascript”>
$(document).ready(function () {
var theme = getDemoTheme();
var url = “../sampledata/employees.xml”;
var source =
{
datafields: [
{ name: ‘FirstName’ },
{ name: ‘LastName’ },
{ name: ‘Title’ },
{ name: ‘Address’ },
{ name: ‘City’ }
],
root: “Employees”,
record: “Employee”,
id: ‘EmployeeID’,
datatype: “xml”,
async: false,
url: url
};
var employeesAdapter = new $.jqx.dataAdapter(source);
var orderdetailsurl = “../sampledata/orderdetails.xml”;
var ordersSource =
{
datafields: [
{ name: ‘EmployeeID’, type: ‘string’ },
{ name: ‘ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, type: ‘string’ },
{ name: ‘ShippedDate’, type: ‘date’ }
],
root: “Orders”,
record: “Order”,
datatype: “xml”,
url: orderdetailsurl,
async: false
};
var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
orders = ordersDataAdapter.records;
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“EmployeeID”]);
if (result)
ordersbyid.push(orders[m]);
}
var orderssource = { datafields: [
{ name: ‘EmployeeID’, type: ‘string’ },
{ name: ‘ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, type: ‘string’ },
{ name: ‘ShippedDate’, type: ‘date’ }
],
id: ‘OrderID’,
localdata: ordersbyid
}
if (grid != null) {
grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
columns: [
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
{ text: ‘Ship Address’, datafield: ‘ShipAddress’, width: 200 },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 150 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 150 },
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 200 }
]
});
}
}
var photorenderer = function (row, column, value) {
var name = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, row).FirstName;
var imgurl = ‘../../images/’ + name.toLowerCase() + ‘.png’;
var img = ‘<div style=”background: white;”></div>’;
return img;
}
var renderer = function (row, column, value) {
return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
}
// creage jqxgrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
height: 365,
source: source,
theme: theme,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
},
columns: [
{ text: ‘Photo’, width: 50, cellsrenderer: photorenderer },
{ text: ‘First Name’, datafield: ‘FirstName’, width: 100, cellsrenderer: renderer },
{ text: ‘Last Name’, datafield: ‘LastName’, width: 100, cellsrenderer: renderer },
{ text: ‘Title’, datafield: ‘Title’, width: 180, cellsrenderer: renderer },
{ text: ‘Address’, datafield: ‘Address’, width: 300, cellsrenderer: renderer },
{ text: ‘City’, datafield: ‘City’, width: 170, cellsrenderer: renderer }
]
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>
</body>Hello fresher,
Do you wish to load a grid in the popup window with the same data as the nested grid’s in the above example? Instead of opening in nested grid, you want it in a separate grid in the popup window? Have I understood your requirement correctly?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Yes Sir.
Thank You .Please provide a resource to expertise in using jqxgrids and jqxcharts.Hi fresher,
Please refer to the jqxGrid and jqxChart sections of the Documentation. The online grid and chart demos may also be helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Ok sir, please help me out for binding a grid in popup instead of nested
Hi fresher,
Here is an example, based on the demos Nested Grids and Popup Editing. We hope it is helpful to you.
<!DOCTYPE html> <html lang="en"> <head> <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.selection.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/jqxwindow.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; var url = "../sampledata/employees.xml"; var source = { datafields: [ { name: 'FirstName' }, { name: 'LastName' }, { name: 'Title' }, { name: 'Address' }, { name: 'City' } ], root: "Employees", record: "Employee", id: 'EmployeeID', datatype: "xml", async: false, url: url }; var employeesAdapter = new $.jqx.dataAdapter(source); var orderdetailsurl = "../sampledata/orderdetails.xml"; var ordersSource = { datafields: [ { name: 'EmployeeID', type: 'string' }, { name: 'ShipName', type: 'string' }, { name: 'ShipAddress', type: 'string' }, { name: 'ShipCity', type: 'string' }, { name: 'ShipCountry', type: 'string' }, { name: 'ShippedDate', type: 'date' } ], root: "Orders", record: "Order", datatype: "xml", url: orderdetailsurl, async: false }; var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true }); orders = ordersDataAdapter.records; var photorenderer = function (row, column, value) { var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName; var imgurl = '../../images/' + name.toLowerCase() + '.png'; var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>'; return img; } var renderer = function (row, column, value) { return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>'; } // create main grid $("#jqxgrid").jqxGrid( { width: 800, autoheight: true, source: source, theme: theme, rowsheight: 35, columns: [ { text: 'Photo', cellsrenderer: photorenderer }, { text: 'First Name', width: 75, datafield: 'FirstName', cellsrenderer: renderer }, { text: 'Last Name', datafield: 'LastName', cellsrenderer: renderer }, { text: 'Title', datafield: 'Title', cellsrenderer: renderer }, { text: 'Address', datafield: 'Address', cellsrenderer: renderer }, { text: 'City', datafield: 'City', cellsrenderer: renderer }, { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () { return "View details grid"; }, buttonclick: function (row) { // open the popup window when the user clicks a button. var offset = $("#jqxgrid").offset(); $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} }); // show the popup window. $("#popupWindow").jqxWindow('open'); var id = (row + 1).toString(); loadDetailsGrid(id); } } ] }); // create popup window $("#popupWindow").jqxWindow({ width: 850, maxWidth: 850, height: 300, resizable: false, theme: theme, isModal: true, autoOpen: false, modalOpacity: 0.01 }); // create details grid $("#detailsGrid").jqxGrid({ theme: theme, width: 800, autoheight: true, columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 200 }, { text: 'Ship Address', datafield: 'ShipAddress', width: 200 }, { text: 'Ship City', datafield: 'ShipCity', width: 150 }, { text: 'Ship Country', datafield: 'ShipCountry', width: 150 }, { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 } ] }); var loadDetailsGrid = function (id) { var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = id; var filtercondition = 'equal'; var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); // fill the orders depending on the id. var ordersbyid = []; for (var m = 0; m < orders.length; m++) { var result = filter.evaluate(orders[m]["EmployeeID"]); if (result) ordersbyid.push(orders[m]); } var orderssource = { datafields: [ { name: 'EmployeeID', type: 'string' }, { name: 'ShipName', type: 'string' }, { name: 'ShipAddress', type: 'string' }, { name: 'ShipCity', type: 'string' }, { name: 'ShipCountry', type: 'string' }, { name: 'ShippedDate', type: 'date' } ], id: 'OrderID', localdata: ordersbyid } var dataAdapter = new $.jqx.dataAdapter(orderssource); $("#detailsGrid").jqxGrid({ source: dataAdapter }); }; }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> <div id="popupWindow"> <div> Details Grid</div> <div> <div id="detailsGrid"> </div> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi, I went through all these links. I have been able to create a nested grid.Also I have been able to create a popup window when the edit button is clicked for the nested grid. But my problem is data is not being loaded on the popup window. Please help me to find what is missing or where am I mistaken.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’> nested Grid plugins.</title>
<link rel=”stylesheet” href=”~/Scripts/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=”~/Scripts/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.sort.js”></script><script type=”text/javascript”>
$(document).ready(function () {
var url = “/Merchant1/GetRequestTypeList”;var source =
{
datafields: [
{ name: ‘RequestTypeId’ },
{ name: ‘RequestTypeName’ }
],
//root: “Employees”,
//record: “Employee”,
id: ‘RequestTypeId’,
datatype: “json”,
async: false,
url: url
};// initialize the input fields.
var employeesAdapter = new $.jqx.dataAdapter(source);
var orderdetailsurl = “/Merchant1/GetRequestTypeList”;
var ordersSource =
{
datafields: [
{ name: ‘RequestTypeId’, type: ‘integer’ },
{ name: ‘RequestDetailId’, type: ‘integer’ },
{ name: ‘RequestDetailName’, type: ‘string’ }],
//root: “Orders”,
records: “RequestDetailId”,
datatype: “json”,
url: orderdetailsurl,
async: false
};var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
var editrow = -1;
orders = ordersDataAdapter.records;
var nestedGrids = new Array();// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, records) {
var id = records.uid.toString();
var grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“RequestTypeId”]);
if (result)
ordersbyid.push(orders[m]);
}var orderssource = {
datafields: [
{ name: ‘RequestTypeId’, type: ‘integer’ },
{ name: ‘RequestDetailId’, type: ‘integer’ },
{ name: ‘RequestDetailName’, type: ‘string’ },],
id: ‘RequestDetailId’,
localdata: ordersbyid
}
// initialize the input fields.
$(“#RequestDetailName”).jqxInput();
$(“#RequestDetailName”).width(150);
$(“#RequestDetailName”).height(23);$(“#RequestDetailId”).jqxNumberInput({ spinMode: ‘simple’, width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: true });
var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
var editrow = -1;
var idd;
if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter, width: 780, height: 200,columns: [
{ text: ‘RequestDetailId’, datafield: ‘RequestDetailId’, width: 200 },
{ text: ‘RequestDetailName’, datafield: ‘RequestDetailName’, width: 200 },
{
text: ‘Edit’, datafield: ‘Edit’, width: 80, columntype: ‘button’, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
idd = $(“#jqxgrid”).jqxGrid(‘getrowid’, row);
// openPopup(row);
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);
$(“#RequestDetailName”).val(dataRecord.RequestDetailName);
$(“#RequestDetailId”).jqxNumberInput({ decimal: dataRecord.RequestDetailId });// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
//var id = (row + 1).toString();
//loadDetailsGrid(id);
}
}
]
});
}
}
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 350, resizable: true, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});$(“#popupWindow”).on(‘open’, function () {
$(“#RequestDetailName”).jqxInput(‘selectAll’);
});$(“#Cancel”).jqxButton();
$(“#Save”).jqxButton();
var renderer = function (row, column, value) {
return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
}// creage jqxgrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
height: 365,
source: source,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
},
columns: [{ text: ‘RequestTypeId’, datafield: ‘RequestTypeId’, width: 150, cellsrenderer: renderer },
{ text: ‘RequestTypeName’, datafield: ‘RequestTypeName’, width: 150, cellsrenderer: renderer }
]
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
<div style=”margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”>RequestDetailName:</td>
<td align=”left”><input id=”RequestDetailName” /></td>
</tr><tr>
<td align=”right”>RequestDetailId:</td>
<td align=”left”><div id=”RequestDetailId”></div></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>`Thank you in advance.
Hello learner,
Please re-post your code as it is in your development environment and remember to format it by selecting it and clicking the
code
button from the toolbar.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/This is my formatted code. Please look at it.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'> nested Grid plugins.</title> <link rel="stylesheet" href="~/Scripts/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="~/Scripts/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "/Merchant1/GetRequestTypeList"; var source = { datafields: [ { name: 'RequestTypeId' }, { name: 'RequestTypeName' } ], //root: "Employees", //record: "Employee", id: 'RequestTypeId', datatype: "json", async: false, url: url }; // initialize the input fields. var employeesAdapter = new $.jqx.dataAdapter(source); var orderdetailsurl = "/Merchant1/GetRequestTypeList"; var ordersSource = { datafields: [ { name: 'RequestTypeId', type: 'integer' }, { name: 'RequestDetailId', type: 'integer' }, { name: 'RequestDetailName', type: 'string' } ], //root: "Orders", records: "RequestDetailId", datatype: "json", url: orderdetailsurl, async: false }; var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true }); var editrow = -1; orders = ordersDataAdapter.records; var nestedGrids = new Array(); // create nested grid. var initrowdetails = function (index, parentElement, gridElement, records) { var id = records.uid.toString(); var grid = $($(parentElement).children()[0]); nestedGrids[index] = grid; var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = id; var filtercondition = 'equal'; var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); // fill the orders depending on the id. var ordersbyid = []; for (var m = 0; m < orders.length; m++) { var result = filter.evaluate(orders[m]["RequestTypeId"]); if (result) ordersbyid.push(orders[m]); } var orderssource = { datafields: [ { name: 'RequestTypeId', type: 'integer' }, { name: 'RequestDetailId', type: 'integer' }, { name: 'RequestDetailName', type: 'string' }, ], id: 'RequestDetailId', localdata: ordersbyid } // initialize the input fields. $("#RequestDetailName").jqxInput(); $("#RequestDetailName").width(150); $("#RequestDetailName").height(23); $("#RequestDetailId").jqxNumberInput({ spinMode: 'simple', width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: true }); var nestedGridAdapter = new $.jqx.dataAdapter(orderssource); var editrow = -1; var idd; if (grid != null) { grid.jqxGrid({ source: nestedGridAdapter, width: 780, height: 200, columns: [ { text: 'RequestDetailId', datafield: 'RequestDetailId', width: 200 }, { text: 'RequestDetailName', datafield: 'RequestDetailName', width: 200 }, { text: 'Edit', datafield: 'Edit', width: 80, columntype: 'button', cellsrenderer: function () { return "Edit"; }, buttonclick: function (row) { // open the popup window when the user clicks a button. editrow = row; idd = $("#jqxgrid").jqxGrid('getrowid', row); // openPopup(row); 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); $("#RequestDetailName").val(dataRecord.RequestDetailName); $("#RequestDetailId").jqxNumberInput({ decimal: dataRecord.RequestDetailId }); // show the popup window. $("#popupWindow").jqxWindow('open'); //var id = (row + 1).toString(); //loadDetailsGrid(id); } } ] }); } } // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: 350, resizable: true, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#popupWindow").on('open', function () { $("#RequestDetailName").jqxInput('selectAll'); }); $("#Cancel").jqxButton(); $("#Save").jqxButton(); var renderer = function (row, column, value) { return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>'; } // creage jqxgrid $("#jqxgrid").jqxGrid( { width: 850, height: 365, source: source, rowdetails: true, rowsheight: 35, initrowdetails: initrowdetails, rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true }, ready: function () { $("#jqxgrid").jqxGrid('showrowdetails', 1); }, columns: [ { text: 'RequestTypeId', datafield: 'RequestTypeId', width: 150, cellsrenderer: renderer }, { text: 'RequestTypeName', datafield: 'RequestTypeName', width: 150, cellsrenderer: renderer } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"></div> <div style="margin-top: 30px;"> <div id="cellbegineditevent"></div> <div style="margin-top: 10px;" id="cellendeditevent"></div> </div> <div id="popupWindow"> <div>Edit</div> <div style="overflow: hidden;"> <table> <tr> <td align="right">RequestDetailName:</td> <td align="left"><input id="RequestDetailName" /></td> </tr> <tr> <td align="right">RequestDetailId:</td> <td align="left"><div id="RequestDetailId"></div></td> </tr> <tr> <td align="right"></td> <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td> </tr> </table> </div> </div> </div> </body> </html>
Hello Dimitar or someone else there to help?
-
AuthorPosts
You must be logged in to reply to this topic.