Dynamic rowdetailsheight? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid, jquery grid, jquery grid widget, jquery widgets grid, nestedgrid, rowdetailstemplate

This topic contains 26 replies, has 12 voices, and was last updated by arturo.villalpando 3 years, 7 months ago.

Viewing 12 posts - 16 through 27 (of 27 total)

← 1 2

Author

Dynamic rowdetailsheight? Posts

May 6, 2015 at 7:30 pm Dynamic rowdetailsheight? #70727

Peter Stoev

Keymaster

Hi Pedro,

The vertial scrollbar will not be displayed only if you put nested grid which is with WIDTH > The Master Grid’s WIDTH. If you look at our demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/nestedgrids.htm?arctic, All Grids have Vertical scrollbars displayed and working. They work, because the Width of the Nested Grid is correct. If the Width is not, the Scrollbar will still be there, but will be Out of the Visible bounds.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

January 4, 2016 at 6:31 am Dynamic rowdetailsheight? #79998

Gaurav Kumar

Participant

Hi Peter,

I also facing the same issue and stuck in the mid of my development.

Do we have any solution for this issue or can we customize plugin to support this feature in nested grid.

Thanks,
Gaurav

January 4, 2016 at 6:39 am Dynamic rowdetailsheight? #79999

Peter Stoev

Keymaster

Hi Gaurav,

This is not an issue. This is something which we have not implemented and which is not planned for implementation in any future version of jqxGrid. If you need row details with dynamic height, we have jqxDataTable.

Best Regards,
Peter Stoev
jQWidgets Team
http://www.jqwidgets.com/

January 4, 2016 at 1:19 pm Dynamic rowdetailsheight? #80021

Gaurav Kumar

Participant

Hi Peter,

Thanks for the quick response.
I have also tried below jqxDataTable example but not able to achieve the dynamic row details height.Could you please correct me to achieve the same.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Data Binding to local data in jqxDataTable</title>
    <meta name="description" content="This sample demonstrates how we can bind jQWidgets DataTable widget to local Data by using jQWidgets DataAdapter plugin.">
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 2; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            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' },
                    { name: 'total', type: 'number' }
                ]
            };

var initRowDetails = function (id, row, element, rowinfo) {
                element.append($("<div style='margin: 10px;'></div>"));
                var nestedDataTable = $(element.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);
                
                var ordersSource =  {
                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' },
                    { name: 'total', type: 'number' }
                ]
            };

   if (nestedDataTable != null) {
                    var nestedDataTableAdapter = new $.jqx.dataAdapter(ordersSource);
                    nestedDataTable.jqxDataTable({
                        pageable: true,
                        source: nestedDataTableAdapter, width: 820,height:180,
                        pageable: true,
                        columns: [
                  { text: 'Name', dataField: 'firstname', width: 200 },
                  { text: 'Last Name', dataField: 'lastname', width: 200 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }
                ]
                    });
                    // store the nested Data Tables and use the Employee ID as a key.
                 //   nestedTables[id] = nestedDataTable;
                }

}

            var dataAdapter = new $.jqx.dataAdapter(source);
       
            $("#table").jqxDataTable(
            {
                width: 850,
                pageable: true,
		rowDetails: true,
                pagerButtonsCount: 10,
		autoRowHeight:true,
                source: dataAdapter,            
		initRowDetails: initRowDetails,
		ready: function () {
                    $("#table").jqxDataTable('showDetails', 1);
                },
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 200 },
                  { text: 'Last Name', dataField: 'lastname', width: 200 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="table">
    </div>
</body>
</html>

January 4, 2016 at 1:26 pm Dynamic rowdetailsheight? #80023

Peter Stoev

Keymaster

Hi Gaurav,

Look at jqxDataTable’s initRowDetails API and especially the parameters. Here is the link: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm?search=data. In the provided code, you copy-pasted our online example and did not do anything else, but if you need dynamic row details height, you will have to do.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

January 4, 2016 at 1:41 pm Dynamic rowdetailsheight? #80024

Gaurav Kumar

Participant

Hi Peter,

Yes I have copy pasted code to verify the same but also added one parameter “autoRowHeight:true” to achieve auto height.

I have gone through this API documentation and tried height, autoRowHeight parameters. I ain’t able to find the exact changes(parameters) that will be required.

I will be very thankful to you if you please point me out the related parameters.

Thanks,
Gaurav

January 4, 2016 at 1:47 pm Dynamic rowdetailsheight? #80025

Peter Stoev

Keymaster

Hi Gaurav,

Please, read again my previous post. I wrote you to look at initRowDetails API, not autoRowHeight which is something else.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

January 4, 2016 at 2:47 pm Dynamic rowdetailsheight? #80028

Gaurav Kumar

Participant

Hi Peter,

Thanks for pointing me out. This issue is now resolved by setting rowinfo.detailsHeight value of initRowDetails API.
I also need nested to nested grid which I am trying through below code but getting error
Uncaught Error: Invalid Selector! Please, check whether the used ID or CSS Class name is correct.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Data Binding to local data in jqxDataTable</title>
    <meta name="description" content="This sample demonstrates how we can bind jQWidgets DataTable widget to local Data by using jQWidgets DataAdapter plugin.">
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
  var nestedTables = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 4; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            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' },
                    { name: 'total', type: 'number' }
                ]
            };

var initRowDetails1 = function (id, row, element, rowinfo) {
                element.append($("<div id='ddddd' style='margin: 10px;'></div>"));
                var nestedDataTable1 = $(element.children()[0]);
             
                rowinfo.detailsHeight = 280;
                var ordersSource1 =  {
                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' },
                    { name: 'total', type: 'number' }
                ]
            };

   if (nestedDataTable1 != null) {
                    var nestedDataTableAdapter1 = new $.jqx.dataAdapter(ordersSource1);
                    nestedDataTable1.jqxDataTable({
                        pageable: true,
                        source: nestedDataTableAdapter1,
			width: 820,
                        pageable: true,	
                        columns: [
                  { text: 'Name', dataField: 'firstname', width: 200 },
                  { text: 'Last Name', dataField: 'lastname', width: 200 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }
                ]
                    });
                    // store the nested Data Tables and use the Employee ID as a key.
                 //   nestedTables[id] = nestedDataTable;
                }

}

var initRowDetails = function (id, row, element, rowinfo) {
                element.append($("<div id = 'ddd' style='margin: 10px;'></div>"));
                var nestedDataTable = $(element.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);
                rowinfo.detailsHeight = 280;
                var ordersSource =  {
                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' },
                    { name: 'total', type: 'number' }
                ]
            };

   if (nestedDataTable != null) {
                    var nestedDataTableAdapter = new $.jqx.dataAdapter(ordersSource);
                    nestedDataTable.jqxDataTable({
width: 850,
rowDetails: true,
                        pageable: true,
autoRowHeight:true,
                        source: nestedDataTableAdapter,
                        pageable: true,
initRowDetails: initRowDetails1,
		
                        columns: [
                  { text: 'Name', dataField: 'firstname', width: 200 },
                  { text: 'Last Name', dataField: 'lastname', width: 200 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }
                ]
                    });
                    // store the nested Data Tables and use the Employee ID as a key.
                    nestedTables[id] = nestedDataTable;
                }

}

            var dataAdapter = new $.jqx.dataAdapter(source);
       
            $("#table").jqxDataTable(
            {
                width: 850,
                pageable: true,
		rowDetails: true,
                pagerButtonsCount: 10,
		autoRowHeight:true,
                source: dataAdapter,            
		initRowDetails: initRowDetails,
	
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 200 },
                  { text: 'Last Name', dataField: 'lastname', width: 200 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="table">
    </div>
</body>
</html>

When I debugged the code then i found that element value of initRowDetails1 function is empty. Could you please look into this issue.

Thanks,
Gaurav

January 5, 2016 at 8:43 am Dynamic rowdetailsheight? #80038

Gaurav Kumar

Participant

Hi Peter,

Could you please respond on my last thread.

Thanks,
Gaurav

January 5, 2016 at 1:56 pm Dynamic rowdetailsheight? #80051

mayank

Participant

hi all,

I am also facing the same issue mentioned above by Gaurav Kumar in his last comment . So please provide the solution ASAP.
Thanks in Anticipation.

January 6, 2016 at 7:11 am Dynamic rowdetailsheight? #80082

Peter Stoev

Keymaster

Hi Gaurav,

“Uncaught Error: Invalid Selector! Please, check whether the used ID or CSS Class name is correct.” – this is thrown when you try to create a widget from DOM Element which is not in the DOM i.e either the ID or CSS Class Name for your jQuery Selection is Invalid. here is how to create nested tables using jqxDataTable: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-nested-tables.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 2, 2021 at 5:02 pm Dynamic rowdetailsheight? #114769

arturo.villalpando

Participant

I’m sorry to reopen this post, is just that I found the solution to enable the scrollbar when we don’t know how many rows we have, then for that we need to implement in the ready function of nested table the next code:

ready: function () {
  // Get all the rows of the primary table
  var rows = $("#table_lead_list").jqxGrid('getrows');

  for(var i = 0; i < rows.length; i++) {
     // Create the grid id for each one
     var grid_id = "#grid" + rows[i].boundindex;
     // Validate if this row has a Grid (nested table) inside
     if

($(grid_id).length) {
// Add overflow auto class to enable scroll if is nesesay
$(grid_id).parent().css(‘overflow’, ‘auto’);
}
}
},

Works like a charm, but could be better if we detect what row is opened, because the “ready” function is triggered until the row open, then if we know that, we don’t need loop all the rows, just get the id of the opened row, but for the moment I’m hurry and I left like this.

Works like a charm, hope this help to another people, regards.

Author

Posts

Viewing 12 posts - 16 through 27 (of 27 total)

← 1 2

You must be logged in to reply to this topic.