[debugMember]

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");
            });

[debugMember]

I tried with latest version jQWidgets v2.8.3. but result was same.

[debugMember]

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");
            });

[Author]

Posts