jQuery UI Widgets › Forums › Grid › nestedGrid
Tagged: angular js grid, angularjs data grid, angularjs grid, data grid, javascript data grid, jquery data grid, jqxgrid
This topic contains 4 replies, has 2 voices, and was last updated by reyhane90 9 years, 1 month ago.
-
AuthornestedGrid Posts
-
I have a nestedGrid I can not bind inside the grid
this is my code$(document).ready(function () {
var data=[{“Counter”:”1″,”countIndex”:”5″,”P_Index”:””,”EFQMPivotID”:”1″,”Title”:”برنامه نقش و ساختار دولت”,”Weight”:”240.00000000″,”Description”:””,”id1″:”1″},{“Counter”:”2″,”countIndex”:”8″,”P_Index”:””,”EFQMPivotID”:”2″,”Title”:”برنامه دولت الكترونيك و هوشمندسازی اداری”,”Weight”:”200.00000000″,”Description”:””,”id1″:”2″},{“Counter”:”3″,”countIndex”:”12″,”P_Index”:””,”EFQMPivotID”:”3″,”Title”:”برنامه مدیریت سرمایه انسانی”,”Weight”:”200.00000000″,”Description”:””,”id1″:”3″},{“Counter”:”4″,”countIndex”:”5″,”P_Index”:””,”EFQMPivotID”:”4″,”Title”:”برنامه فناوریهای مدیریتی”,”Weight”:”115.00000000″,”Description”:””,”id1″:”4″},{“Counter”:”5″,”countIndex”:”9″,”P_Index”:””,”EFQMPivotID”:”5″,”Title”:”برنامه صیانت از حقوق مردم و سلامت اداری”,”Weight”:”175.00000000″,”Description”:””,”id1″:”5″},{“Counter”:”6″,”countIndex”:”3″,”P_Index”:””,”EFQMPivotID”:”6″,”Title”:”برنامه استقرار نظام جامع مديريت عملكرد”,”Weight”:”70.00000000″,”Description”:””,”id1″:”6″}];
var source = { datatype: ‘json’,
datafields: [{ name: ‘countIndex’, type: ‘int’ },{ name: ‘Title’, type: ‘string’ },{ name: ‘Weight’, type: ‘string’ }, ],
localdata: data,
root: ‘dataid’,
// record: ‘TopsisID’,
// id: ‘id1’,
// async: false,
//////////////////////////////////button/////////////////////////////////////
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
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);
// },
updaterow: function (rowid, newdata, 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);
},
//////////////////////////////////end button/////////////////////////////////////deleterow: function (row, commit) {
$.ajax({
type: ‘POST’,
url: ‘Frmperformanceevaluation.aspx/DeleteTopsisRow’,
data: ‘{Id:’+row.id1+’}’,
contentType: ‘application/json; charset=utf-8’,
dataType: ‘json’,
success: function (msg) {
alert(msg.d);
},});
commit(true);
},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);
}
};var dataindex=[{“Counter”:”1″,”id1″:”1″,”I_Index”:””,”Priority”:””,”Func”:””,”EFQMIndexID”:”1″,”Title”:”تهیه برنامه واگذاری تصدیها “,”Weight”:”35.00000000″,”Evaluation”:”درصد”,”Standard”:”100.00000000″,”queryId”:””,”TypeOfValue”:”کمی”,”Veracity”:”فعال”,”Type”:”روش دستی (صفحه امتیازدهی)”,”Navigate”:”مثبت”,”Standard2″:””,”Standard3″:””,”Url”:””,”TypeValueFormula”:””},{“Counter”:”2″,”id1″:”1″,”I_Index”:””,”Priority”:””,”Func”:””,”EFQMIndexID”:”2″,”Title”:”تهیه و اجرای برنامه ظرفیت سازی و توانمندسازی بخش غیردولتی برای اجرای تصدی ها”,”Weight”:”25.00000000″,”Evaluation”:”درصد”,”Standard”:”100.00000000″,”queryId”:””,”TypeOfValue”:”کمی”,”Veracity”:”فعال”,”Type”:”روش دستی (صفحه امتیازدهی)”,”Navigate”:”مثبت”,”Standard2″:””,”Standard3″:””,”Url”:””,”TypeValueFormula”:””},{“Counter”:”3″,”id1″:”1″,”I_Index”:””,”Priority”:””,”Func”:””,”EFQMIndexID”:”3″,”Title”:”واگذاری حداقل ده درصد از خدمات و واحدهای عملیاتی”,”Weight”:”80.00000000″,”Evaluation”:”درصد”,”Standard”:”10.00000000″,”queryId”:””,”TypeOfValue”:”کمی”,”Veracity”:”فعال”,”Type”:”روش دستی (صفحه امتیازدهی)”,”Navigate”:”مثبت”,”Standard2″:””,”Standard3″:””,”Url”:””,”TypeValueFormula”:””},{“Counter”:”4″,”id1″:”1″,”I_Index”:””,”Priority”:””,”Func”:””,”EFQMIndexID”:”4″,”Title”:”انجام اصلاحات در ساختار سازمانی مطابق با ضوابط مصوب”,”Weight”:”60.00000000″,”Evaluation”:”درصد”,”Standard”:”100.00000000″,”queryId”:””,”TypeOfValue”:”کمی”,”Veracity”:”غیر فعال”,”Type”:”روش دستی (صفحه امتیازدهی)”,”Navigate”:”مثبت”,”Standard2″:””,”Standard3″:””,”Url”:””,”TypeValueFormula”:””},{“Counter”:”5″,”id1″:”1″,”I_Index”:””,”Priority”:””,”Func”:””,”EFQMIndexID”:”5″,”Title”:”پیشنهاد تعیین سقف پستهای سازمانی با رعایت راهبردهای فصل دوم قانون مدیریت خدمات کشوری”,”Weight”:”40.00000000″,”Evaluation”:”درصد”,”Standard”:”100.00000000″,”queryId”:””,”TypeOfValue”:”کمی”,”Veracity”:”غیر فعال”,”Type”:”روش دستی (صفحه امتیازدهی)”,”Navigate”:”مثبت”,”Standard2″:””,”Standard3″:””,”Url”:””,”TypeValueFormula”:””}];
var ordersbyid = { datatype: ‘json’,
datafields: [{ name: ‘countIndex’, type: ‘int’ },{ name: ‘Title’, type: ‘string’ },{ name: ‘Weight’, type: ‘string’ },{ name: ‘Veracity’, type: ‘int’ },{ name: ‘TypeOfValue’, type: ‘int’ },{ name: ‘TypeValueFormula’, type: ‘int’ },{ name: ‘Type’, type: ‘int’ }, ],
localdata: dataindex,
// root: ‘Order’,
// record: ‘Order’,
async: false
};var ordersDataAdapter = new $.jqx.dataAdapter(ordersbyid, { autoBind: true });
orders = ordersDataAdapter.records;
var nestedGrids = new Array();
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.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][‘id1’]);
var select=orders[m][‘TopsisID’];
// alert (filter.evaluate(orders[m][‘TopsisID’]));
if (result)
ordersbyid.push(orders[select]);
}var orderssource = { datatype: ‘json’, datafields: [{ name: ‘countIndex’, type: ‘int’ },{ name: ‘Title’, type: ‘string’ },{ name: ‘Weight’, type: ‘string’ },{ name: ‘Veracity’, type: ‘int’ },{ name: ‘TypeOfValue’, type: ‘int’ },{ name: ‘TypeValueFormula’, type: ‘int’ },{ name: ‘Type’, type: ‘int’ }, ],
id: ‘id1’,localdata: ordersbyid
}
////////////////////////////////////////////////////////////////////////////////// var ordersbyid3 = { datatype: ‘json’,
// datafields: [
// { name: ‘Title’, type: ‘string’ },
// { name: ‘TermGrant’, type: ‘Date’ },
// { name: ‘TopsisID’, type: ‘string’},
// { name: ‘TermGrant1’, type: ‘Date’ },
// { name: ‘TopsisID1’, type: ‘string’}
// ],
// localdata: data,
// // root: ‘Order’,
// // record: ‘Order’,
// async: false
// };
//
//
// var ordersDataAdapter3 = new $.jqx.dataAdapter(ordersbyid3, { autoBind: true });
//
//
//
// orders = ordersDataAdapter3.records;
// var nestedGrids = new Array();
// // create nested grid.
// var initrowdetails = function (index, parentElement, gridElement, record) {
// var id = record.uid.toString();
// var gridinside = $($(parentElement).children()[0]);
// nestedGrids[index] = gridinside;
// 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 ordersbyid3 = [];
// for (var m = 0; m < orders.length; m++) {
// var result = filter.evaluate(orders[m][‘id1’]);
// var select=orders[m][‘TopsisID’];
//
// if (result)
// //alert (filter.evaluate(orders[m][‘id1’]));
// ordersbyid3.push(orders[select]);
// }
// var orderssource3 = { datafields: [
// { name: ‘Title’, type: ‘string’ },
// { name: ‘TermGrant’, type: ‘Date’ },
// { name: ‘TopsisID’, type: ‘string’},
// { name: ‘TermGrant1’, type: ‘Date’ },
// { name: ‘TopsisID1’, type: ‘string’}
// ],
// id: ‘OrderID’,
//
// localdata: ordersbyid3
// }/////////////////////////////ساخت گرید دوم////////////////////////////////
var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
if (grid != null) {
var containergrid = $(“<div style=’margin: 0px; float:right; ‘></div>”);
grid.append(containergrid);
grid.jqxGrid({
source: nestedGridAdapter, width: 1255,
rtl:true,
autoheight: true,showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin: 5px; float:right;’></div>”);
toolbar.append(container);
container.append(‘<input style=”margin-right: 5px;” id=”addrowbutton” type=”button” value=”افزودن شاخص” />’);
container.append(‘<input style=”margin-right: 5px;” id=”addmultiplerowsbutton” type=”button” value=”انتخاب شاخص” />’);
container.append(‘<input style=”margin-right: 5px;” id=”deleterowbutton” type=”button” value=” داده انتخاب” />’);
container.append(‘<input style=”margin-right: 5px;” id=”updaterowbutton” type=”button” value=”افزودن داده” />’);
$(‘#addrowbutton’).jqxButton();
$(‘#addmultiplerowsbutton’).jqxButton();
$(‘#deleterowbutton’).jqxButton();
$(‘#updaterowbutton’).jqxButton();
},
columns: [{ text: ‘شناسه’,datafield: ‘countIndex’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘ عنوان’,datafield: ‘Title’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘وزن’,datafield: ‘Weight’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘عدم مصداق’,datafield: ‘Veracity’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘نوع’,datafield: ‘TypeOfValue’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘ماهیت’,datafield: ‘TypeValueFormula’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘نوع مقدار دهی’,datafield: ‘Type’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },
{ text: ‘حذف’, datafield: ‘delete’, columntype: ‘button’, cellsrenderer: function () {return “حذف” },buttonclick: function (row) {
editrow = row;
var selectedrowindex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);
var rowscount = $(‘#jqxgrid’).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(‘#jqxgrid’).jqxGrid(‘getrowid’, selectedrowindex);
var dataRecord = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, editrow);
var commit = $(‘#jqxgrid’).jqxGrid(‘deleterow’, dataRecord);
}
}},
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {return “Edit” },// open the popup window when the user clicks a button.
buttonclick: function (row) {
editrow = 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);
$(‘#countIndex’).val(dataRecord.Title);
$(‘#Title’).val(dataRecord.id1);
// show the popup window.
$(‘#popupWindow’).jqxWindow(‘open’);
}
},
]
});
}
}////////////////////////////////////// ویرایش ///////////////////////
$(‘#countIndex’).jqxInput({ theme: theme }); $(‘#countIndex’).width(150);$(‘#countIndex’).height(23);$(‘#Title’).jqxInput({ theme: theme }); $(‘#Title’).width(150);$(‘#Title’).height(23);//////////////////ویرایش/////////////////////////////
///////////////////////’گرید اول///////////////////////
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;
$(‘#jqxgrid’).jqxGrid(
{
width: 1300,
source: dataAdapter,
columnsresize: true,
showtoolbar: true,
rtl:true,
sortable: true,
pageable: true,
autoheight: true,
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);
},
////////////////////////////toolbar////////////////////////////////
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin: 5px; float:right;’></div>”);
toolbar.append(container);
container.append(‘<input style=”margin-right: 5px;” id=”addrowbutton” type=”button” value=”افزودن شاخص” />’);
container.append(‘<input style=”margin-right: 5px;” id=”addmultiplerowsbutton” type=”button” value=”انتخاب شاخص” />’);
container.append(‘<input style=”margin-right: 5px;” id=”deleterowbutton” type=”button” value=” داده انتخاب” />’);
container.append(‘<input style=”margin-right: 5px;” id=”updaterowbutton” type=”button” value=”افزودن داده” />’);
$(‘#addrowbutton’).jqxButton();
$(‘#addmultiplerowsbutton’).jqxButton();
$(‘#deleterowbutton’).jqxButton();
$(‘#updaterowbutton’).jqxButton();$(‘#addrowbutton’).on(‘click’, function () {
//editrow = 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);
$(‘#countIndex’).val(”);
$(‘#countIndex’).hidden=’hidden’;
// $(‘#TopsisID1’).val(”);
// show the popup window.
$(‘#popupWindow’).jqxWindow(‘open’);// var commit = $(‘#jqxgrid’).jqxGrid(‘addrow’, null, datarow);
});
// create new rows.},
//////////////////////end toolbar//////////////////////////////
columns: [
{
text: ‘ردیف’, sortable: false, filterable: false, editable: false,
groupable: false, draggable: false, resizable: false,
datafield: ”, columntype: ‘number’, width: 50, cellsalign: ‘center’ , align: ‘center’,
cellsrenderer: function (row, column, value) {
return “<div style=’margin:4px;’>” + (value + 1) + “</div>”;
}
},{ text: ‘شناسه’,datafield: ‘countIndex’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘ عنوان’,datafield: ‘Title’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘وزن’,datafield: ‘Weight’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },
{ text: ‘حذف’, datafield: ‘delete’, columntype: ‘button’, cellsrenderer: function () {return “حذف” },
buttonclick: function (row) {
editrow = row;
var selectedrowindex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);
var rowscount = $(‘#jqxgrid’).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(‘#jqxgrid’).jqxGrid(‘getrowid’, selectedrowindex);
var dataRecord = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, editrow);
var commit = $(‘#jqxgrid’).jqxGrid(‘deleterow’, dataRecord);
}
}},
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {return “Edit” },// open the popup window when the user clicks a button.
buttonclick: function (row) {
editrow = 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);
$(‘#countIndex’).val(dataRecord.countIndex);
$(‘#Title’).val(dataRecord.Title );
// show the popup window.
$(‘#popupWindow’).jqxWindow(‘open’);
}
},
],});
/////////////////////////////////// پنجره پاپاپ برای ویرایش///////////////////////////////////
$(‘#popupWindow’).jqxWindow({
width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $(‘#Cancel’), modalOpacity: 0.01
});
$(‘#popupWindow’).on(‘open’, function () {
$(‘#countIndex’).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 = { Title: $(‘#Title’).val(), TopsisID1: $(‘#Title’).val()
};
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(‘#popupWindow’).jqxWindow(‘hide’);
}
});});
Hi,
In order to learn how to data bind jqxGrid and the Grids displayed within the Row Details area, please look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/nestedgrids.htm?arctic
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi peter
I did as the same but is does not work. In fact the inner grid does not bind.
Thank you
Hi,
The demo is online and it seems to work in any browser I test it with so I suggest you to debug your code and see what’s different on your side.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.commy code does not work and I do not now Problem
Please your check my code
Thank you
-
AuthorPosts
You must be logged in to reply to this topic.