jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Nested grid
This topic contains 1 reply, has 1 voice, and was last updated by hardcode 12 years, 2 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorNested grid Posts
-
Hello
I have a nested grid that is working good but I have a problem. Could you please demonstrate to me how i can fetch the row details of the inner grid when a row in the inner grid is clicked. I want to get the row details of a clicked row or selected row in the inner grid.
here is my code//review grid begins here var url = "../php/reviewGrid.php"; var source = { datatype: "json", async:false, datafields: [ { name: 'item' }, { name: 'source' }, { name: 'riskRanking'}, { name: 'actionPlan'}, { name: 'who'}, { name: 'when'} ], beforeprocessing: function (data) { source.totalrecords = data[0].TotalRows; }, id: 'item', url: url, root: 'Rows', cache: false }; var psource =source; var dataAdapter = new $.jqx.dataAdapter(source); //Inner grid var reviewDetailUrl = "../php/loadReviewDetailGrid.php"; var reviewDetailSource = { datafields: [ { name: 'id' }, { name: 'item' }, { name: 'reviewDate' }, { name: 'reviewStatus' }, { name: 'statusOnTargetDate' } ], datatype: "json", url: reviewDetailUrl, async: false }; var reviewRenderer = function (row, datafield, value) { var textBox = '<textarea cols="82" rows="3" class="txtArea">'+ value+ '</textarea>'; return '<div style="text-align:left; margin:2px; height:inherit;">' + textBox + '</div>'; } var addReviewDateClickRenderer = function (id) { return '<input style="margin-top:4px;" type="button" value="Add Review Date" onClick="addReviewDateClick(event)" class="addReviewDateClick" id="btn'+id+ '"/>' } var saveClickRenderer = function (row, datafield, value) { return '<input style="margin-top:20px;" type="button" value="Save Review" onClick="saveClick(event)" id="btnx'+row+ '"/>' } var riskRankingRenderer = function (row, datafield, value) { var divColor = ''; if(value == 'High'){ divColor = 'background-color:#F00; color:#FFF' } if(value == 'Medium'){ divColor = 'background-color:#FF0' } if(value == 'Low'){ divColor = 'background-color:#063; color:#FFF' } return '<div style="text-align:left; height:inherit; '+ divColor +';"> '+ value + '</div>'; } var reviewDetailDataAdapter = new $.jqx.dataAdapter(reviewDetailSource, { autoBind: true }); var reviewDetailRecords = reviewDetailDataAdapter.records; 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 reviewDetailById = [ ]; for (var m = 0; m < reviewDetailRecords.length; m++) { var result = filter.evaluate(reviewDetailRecords[m]["item"]); if (result) reviewDetailById.push(reviewDetailRecords[m]); } var reviewDetailSource1 = { datafields: [ { name: 'id' }, { name: 'item' }, { name: 'reviewDate' }, { name: 'reviewStatus' }, { name: 'statusOnTargetDate' } ], id: 'id', localdata: reviewDetailById } if (grid != null) { grid.jqxGrid({ source: reviewDetailSource1, theme: theme, width: 940, height: 268,rowsheight: 60, editable: true, columns: [ { text: 'Review Date', datafield: 'reviewDate', width: 100,columntype: 'datetimeinput',cellsformat:'dd/MM/yyyy' }, { text: 'Status On Target Date', datafield: 'revstatusOnTargetDateiewDate', width: 510,cellsrenderer: reviewRenderer }, { text: 'Status', datafield: 'reviewStatus', columntype:'dropdownlist', width: 100, createeditor: function (row, column, editor) { // assign a new data source to the dropdownlist. var list = ['Done', 'Ongoing', 'Not Done']; editor.jqxDropDownList({ source: list });} }, { text: '', width: 100, cellsrenderer: saveClickRenderer }, ] }); } } $("#reviewGrid").jqxGrid( { width:990, autoheight: true, source: dataAdapter, sortable:true, editable: false, pageable: true, pagesize:10, altrows:true, pagesizeoptions:['10', '30', '50'], selectionmode: 'singlerow', columnsresize: true, columnsheight:30, virtualmode:true, theme: theme, rowsheight: 25, rowdetails: true, rendergridrows: function(obj){ return obj.data }, initrowdetails: initrowdetails, rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 8px;'></div>", rowdetailsheight: 300, rowdetailshidden: true }, columns: [ { text: 'Item', dataField: 'item', columntype: 'textbox', width: 60}, { text: 'Source', dataField: 'source', columntype: 'textbox', width: 200}, { text: 'Risk Ranking', dataField: 'riskRanking', columntype: 'textbox', width: 150, cellsrenderer: riskRankingRenderer}, { text: 'Action Plan', dataField: 'actionPlan', width: 150, columntype: 'textbox'}, { text: 'Who',dataField: 'who', columntype: 'textbox', width: 150}, { text: 'When', dataField: 'when', columntype: 'datetimeinput', width: 100, cellsformat:'dd/MM/yyyy' }, { text: '', dataField: 'item', width: 120,cellsrenderer: addReviewDateClickRenderer }, ] }); /* review grid ends*/
Hello,
Have you been able to get a solution for me ? -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.