jQWidgets Forums

Forum Replies Created

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • in reply to: Dynamic rowdetailsheight? Dynamic rowdetailsheight? #80038

    Gaurav Kumar
    Participant

    Hi Peter,

    Could you please respond on my last thread.

    Thanks,
    Gaurav

    in reply to: Dynamic rowdetailsheight? 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

    in reply to: Dynamic rowdetailsheight? 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

    in reply to: Dynamic rowdetailsheight? 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>
    in reply to: Dynamic rowdetailsheight? 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

Viewing 5 posts - 1 through 5 (of 5 total)