jQWidgets Forums
jQuery UI Widgets › Forums › Grid › A problem about row details column
Tagged: jqxgrid, rowdetails
This topic contains 5 replies, has 2 voices, and was last updated by debug 12 years ago.
Viewing 6 posts - 1 through 6 (of 6 total)
-
Author
-
Hello.
I want to show row details when a row is clicked. I managed this by setting ‘rowdetails: true’ and setting ‘$(‘#jqxgrid’).on(‘rowselect’, function (event) { … });’ When I do this rowdetails column is also visible which I dont need in this case. So I set ‘showrowdetailscolumn: false’. But this makes filter box at first row invisible.
Here is what I have so far.
var initrowdetails = function (index, parentElement, gridElement, record) { var grid = $($(parentElement).children()[0]); detailsHtml = '<div style="width: 100%;height: 70px;float: left;margin-top: 20px">' + '<div style="width: 150px;height: 100%;float: left;margin-left: 10px">' + '<span style="width: 100%;height: 50%;float: left">Customer:</span>' + '<span style="width: 100%;height: 50%;float: left">{CustomerName1}</span>' + '</div>' + '<div style="width: 150px;height: 100%;float: left">' + '<span style="width: 100%;height: 50%;float: left">Porting Customer Id:</span>' + '<span style="width: 100%;height: 50%;float: left">{PortingCustomerId}</span>' + '</div>' + '<div style="width: 150px;height: 100%;float: left;margin-right: 200px">' + '<span style="width: 100%;height: 50%;float: left">Date Initiated:</span>' + '<span style="width: 100%;height: 50%;float: left">{CreationDate}</span>' + '</div>' + '<a href="#">Porting History</a> <a href="#">Edit</a>' + '<div style="width: 100%"></div>' + '</div>'; detailsHtml = detailsHtml .replace('{MSISDN}', record.MSISDN) .replace('{MxneName}', record.MxneName) .replace('{ICCID}', record.ICCID) .replace('{CreationDate}', record.CreationDate) .replace('{TemporaryMSISDN}', record.TemporaryMSISDN) .replace('{CustomerName}', record.CustomerName) .replace('{CustomerName1}', record.CustomerName) .replace('{UserName}', record.UserName) .replace('{PortingCustomerId}', record.PortingCustomerId) .replace('{PxsStatusCode}', record.PxsStatusCode) .replace('{hid}', record.Id) .replace('{Id}', record.Id);// this part is out of case. var historybtn = $(detailsHtml).find("#show" + record.Id); if (historybtn) { var history = $(detailsHtml).find("#history" + record.Id); for (var i = 0; i < record.PortInRequestAuditTrailList.length; i++) { var trail = record.PortInRequestAuditTrailList[i]; $(history).append("<div style='width: 100%;height: 20px;float: left'>" + trail.ChangedBy + ""); } var parent = $(history).parent(); var h = $(parent).height(); $(history).css("height", (h + 20 * record.PortInRequestAuditTrailList.length) + "px"); } grid.html(detailsHtml); }; // initialize jqxGrid $("#jqxgrid").jqxGrid($.extend({ }, CommonGridOptions, { source: dataadapter, pagerrenderer: pagerrenderer, initrowdetails: initrowdetails, rowdetailstemplate: { rowdetails: "<div style='width: 100%;height: auto;background-color: #F5ECEE;float: left;padding-top: 5px'></div>", rowdetailsheight: 110, rowdetailshidden: true }, selectionmode: 'singlerow', rowdetails: true, //enablerowdetailsindent: false, showrowdetailscolumn: false, // fix for invisible right border when table is empty. _renderemptyrow: renderEmptyRow, rendergridrows: function () { for (var i = 0; i < dataadapter.records.length; i++) { var record = dataadapter.records[i]; record.PortingDate = new Date(parseInt(record.PortingDate.replace(/\/Date\((\d+)\)\//gi, "$1"))); record.ModificationDate = new Date(parseInt(record.ModificationDate.replace(/\/Date\((\d+)\)\//gi, "$1"))); record.CreationDate = new Date(parseInt(record.CreationDate.replace(/\/Date\((\d+)\)\//gi, "$1"))); } return dataadapter.records; }, columns: [ //{ text: 'User', datafield: 'asd', width: 10, columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains' }, { text: 'User', datafield: 'UserName', width: 150, columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains' }, { text: 'MSISDN', datafield: 'MSISDN', width: 150, columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains' }, { text: 'Network', datafield: 'MxneName', width: 150, filtertype: 'list', filteritems: [@Html.Raw(ViewBag.MxNEs)], createfilterwidget: function(column, columnElement, widget) { widget.jqxDropDownList({ dropDownWidth: ($('#hiddenSpan').width() + 30) }) } }, { text: 'Porting Date', datafield: 'PortingDate', width: 100, columntype: 'textbox', filterable: false, sortable: false }, { text: 'Modified', datafield: 'ModificationDate', width: 100, columntype: 'textbox', filterable: false, sortable: false }, { text: 'Temporary MSISDN', datafield: 'TemporaryMSISDN', width: 150, columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains' }, { text: 'Status', datafield: 'PxsStatusCode', width: 110, filtertype: 'list', filteritems: ['CMP', 'CNC', 'BLC', 'AGR', 'RQS', 'HLD'] } ] })); $('#jqxgrid').on('rowselect', function (event) { var args = event.args; var index = args.rowindex; var details = $('#jqxgrid').jqxGrid('getrowdetails', index); var col = $('#jqxgrid').jqxGrid('getcolumnat', 0); $('#jqxgrid').jqxGrid('showrowdetails', index); }); $('#jqxgrid').on('rowexpand', function (event) { var args = event.args; var details = args.details; var index = args.rowindex; var rows = $('#jqxgrid').jqxGrid('getrows'); var row = rows[index]; $(row).css("background-color", "#F5ECEE"); });</div>Hi,
I cannot reproduce the reported behavior using jQWidgets 2.8.3. Filtering is also not enabled in the provided code.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Thanks for reply. I am posting more detailed js. I am using jQWidgets v2.5.5 by the way.
// prepare the data var source = { datatype: "json", datafields: [ { name: 'Id'}, { name: 'MSISDN' }, { name: 'MxneName' }, { name: 'ICCID' }, { name: 'TemporaryMSISDN' }, { name: 'PxsStatusCode' }, { name: 'ProductId' }, { name: 'XspName' }, { name: 'CoinPortingId' }, { name: 'PortingId' }, { name: 'PortingCustomerId' }, { name: 'Note' }, { name: 'ChangeNote' }, { name: 'PxsBlockingNote' }, { name: 'PxsHoldNote' }, { name: 'PxsNote' }, { name: 'PxsPortingPerformedNote' }, { name: 'RequestedDate' }, { name: 'CreationDate' }, { name: 'ChangeDate' }, { name: 'ModificationDate' }, { name: 'ActualPerformedDate' }, { name: 'DonorNetworkOperatorId' }, { name: 'DonorServiceProviderId' }, { name: 'CustomerName' }, { name: 'UserName' }, { name: 'PortInRequestAuditTrailList' }, { name: 'PortingDate' } ], id: 'Id', root: 'Rows', url: 'NumberPortIn/GetPortInRequestsByXsp', sort: function () { $("#jqxgrid").jqxGrid('updatebounddata','sort'); }, filter: function () { $("#jqxgrid").jqxGrid('updatebounddata','filter'); }, beforeprocessing: function (data) { source.totalrecords = data.TotalRows; } }; var dataadapter = new $.jqx.dataAdapter(source); var detailsHtml = ""; var initrowdetails = function (index, parentElement, gridElement, record) { var grid = $($(parentElement).children()[0]); detailsHtml = '<div style="width: 100%; height: 100%; float: left;">' + '<div style="width: 150px; height: 30%; float: left; margin-left: 10px;">' + '<span style="width: 100%; height: 50%; float: left;">Customer:</span>' + '<span style="width: 100%; height: 50%; float: left;">{CustomerName1}</span>' + '</div>' + '<div style="width: 150px; height: 30%; float: left;">' + '<span style="width: 100%; height: 50%; float: left;">Porting Customer Id:</span>' + '<span style="width: 100%; height: 50%; float: left;">{PortingCustomerId}</span>' + '</div>' + '<div style="width: 150px; height: 30%; float: left; margin-right: 200px;">' + '<span style="width: 100%; height: 50%; float: left;">Date Initiated:</span>' + '<span style="width: 100%; height: 50%; float: left;">{CreationDate}</span>' + '</div>' + '<a href="#" id="show{hid}" class="btn" style="margin-top: 20px;">Porting History</a> <a href="#" class="btn" style="margin-top: 20px;">Edit</a>' + '<div id="history{Id}" style="display: none; width: 99%; overflow: auto; height: 66%; margin-left: 10px; width: 98%; float: left">{content}</div>' + '</div>'; var historyContent = ""; for (var i = 0; i < record.PortInRequestAuditTrailList.length; i++) { var trail = record.PortInRequestAuditTrailList[i]; var changes = ""; for (var j = 0; j < trail.Changes.length; j++) { var change = trail.Changes[j]; changes += change.Target; if (j < trail.Changes.length - 1) { changes += ", "; } } historyContent += "<div style='width: 100%; height: 20px; float: left;'>" + "<span style='font-weight: bold;'>Changed By: </span>" + "<span style='margin-right: 20px;'>" + trail.ChangedBy + "</span>" + "<span style='font-weight: bold;'>Date: </span>" + "<span style='margin-right: 20px;'>" + getDateFromJson(trail.Date) + "</span>" + "<span style='font-weight: bold;'>Changes: </span>" + "<span style='margin-right: 20px;'>" + changes + "</span>" + "</div>"; } detailsHtml = detailsHtml .replace('{MSISDN}', record.MSISDN) .replace('{MxneName}', record.MxneName) .replace('{ICCID}', record.ICCID) .replace('{CreationDate}', getDateFromJson(record.CreationDate)) .replace('{TemporaryMSISDN}', record.TemporaryMSISDN) .replace('{CustomerName}', record.CustomerName) .replace('{CustomerName1}', record.CustomerName) .replace('{UserName}', record.UserName) .replace('{PortingCustomerId}', record.PortingCustomerId) .replace('{PxsStatusCode}', record.PxsStatusCode) .replace('{hid}', record.Id) .replace('{Id}', record.Id) .replace('{content}', historyContent); grid.html(detailsHtml); var historybtn = $(detailsHtml).find("#show" + record.Id); if (historybtn) { $(historybtn).click(function (event) { event.preventDefault(); $("#history" + record.Id).slideToggle(); }); } }; function getDateFromJson(jsonDate) { try { var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)")); return date.format('dd-mm-yyyy'); } catch (ex) { return ''; } } // initialize jqxGrid $("#jqxgrid").jqxGrid({ width: 912, autoheight: true, rowsheight: 31, filterrowheight: 31, pagerheight: 32, theme: 'firmtel', sortable: true, filterable: true, pageable: true, pagesize: 10, pagesizeoptions: ['10', '20', '50', '100'], virtualmode: true, autoheight: false, columnsresize: false, showfilterrow: true, selectionmode: "multiplerowsextended", showdefaultloadelement: true, source: dataadapter, pagerrenderer: pagerrenderer, initrowdetails: initrowdetails, rowdetailstemplate: { rowdetails: "<div style='width: 100%; height: 98%; background-color: #F5ECEE; float: left; padding-top: 5px;'></div>", rowdetailsheight: 150, rowdetailshidden: true }, selectionmode: 'singlerow', rowdetails: true, //enablerowdetailsindent: false, showrowdetailscolumn: false, // fix for invisible right border when table is empty. _renderemptyrow: renderEmptyRow, rendergridrows: function () { for (var i = 0; i < dataadapter.records.length; i++) { var record = dataadapter.records[i]; record.PortingDate = getDateFromJson(record.PortingDate); record.ModificationDate = getDateFromJson(record.ModificationDate); record.CreationDate = getDateFromJson(record.CreationDate); } return dataadapter.records; }, columns: [ //{ text: 'User', datafield: 'asd', width: 10, columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains' }, { text: 'User', datafield: 'UserName', width: 150, columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains' }, { text: 'MSISDN', datafield: 'MSISDN', width: 150, columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains' }, { text: 'Network', datafield: 'MxneName', width: 150, filtertype: 'list', filteritems: [@Html.Raw(ViewBag.MxNEs)], createfilterwidget: function(column, columnElement, widget) { widget.jqxDropDownList({ dropDownWidth: ($('#hiddenSpan').width() + 30) }) } }, { text: 'Porting Date', datafield: 'PortingDate', width: 100, columntype: 'textbox', filterable: false, sortable: false }, { text: 'Modified', datafield: 'ModificationDate', width: 100, columntype: 'textbox', filterable: false, sortable: false }, { text: 'Temporary MSISDN', datafield: 'TemporaryMSISDN', width: 150, columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains' }, { text: 'Status', datafield: 'PxsStatusCode', width: 110, filtertype: 'list', filteritems: ['CMP', 'CNC', 'BLC', 'AGR', 'RQS', 'HLD'] } ] })); $('#jqxgrid').on('rowselect', function (event) { var args = event.args; var index = args.rowindex; var details = $('#jqxgrid').jqxGrid('getrowdetails', index); var col = $('#jqxgrid').jqxGrid('getcolumnat', 0); $('#jqxgrid').jqxGrid('showrowdetails', index); }); $('#jqxgrid').on('rowunselect', function (event) { var args = event.args; var index = args.rowindex; $('#jqxgrid').jqxGrid('hiderowdetails', index); }); $('#jqxgrid').on('rowunexpand', function (event) { var args = event.args; var details = args.details; var index = args.rowindex; }); $('#jqxgrid').on('rowexpand', function (event) { var args = event.args; var details = args.details; var index = args.rowindex; var rows = $('#jqxgrid').jqxGrid('getrows'); var row = rows[index]; $(row).css("background-color", "#F5ECEE"); });I tried with latest version jQWidgets v2.8.3. but result was same.
Hi,
Thanks for the updating the code snippet. I tried it and reproduce the issue. I also created a work item about it. A fix will be provided in the next release.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Thank you Peter.
I made a workaround. I added additional column before 1rst column. then I hide it. now problem with invisible filter box solved. It will be better if you fix this on next release.
But will you please tell me if I can achieve what I am trying to do or not? Let me repeat my goal.
I want to expand row details by clicking row itself. How can I do it?
I am using rowselect and rowexpand events right now. With this way I am producing row details but they are not positioned under the selected row. they are somewhere above the grid because of wrong left and top properties of the css.
$('#jqxgrid').on('rowselect', function (event) { var args = event.args; var index = args.rowindex; var details = $('#jqxgrid').jqxGrid('getrowdetails', index); var col = $('#jqxgrid').jqxGrid('getcolumnat', 0); $('#jqxgrid').jqxGrid('showrowdetails', index); }); $('#jqxgrid').on('rowexpand', function (event) { var args = event.args; var details = args.details; $(details).css("left", "0").css("top", "32px"); var index = args.rowindex; var rows = $('#jqxgrid').jqxGrid('getrows'); var row = rows[index]; $(row).css("background-color", "#F5ECEE"); });
-
AuthorPosts
Viewing 6 posts - 1 through 6 (of 6 total)
You must be logged in to reply to this topic.