jQuery UI Widgets Forums Grid Multi-level grid error

This topic contains 9 replies, has 2 voices, and was last updated by  baha2jo 9 years, 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • Multi-level grid error #62630

    baha2jo
    Participant

    Hello everybody,

    I’m trying to create a nested gridview and i followed the following tutorial http://www.jqwidgets.com/assembling-n-nested-jquery-grid/ but i got this error : Uncaught ReferenceError: theme is not defined ,and nothing loaded in the browser. Please help me

    thanks

    Multi-level grid error #62649

    Dimitar
    Participant

    Hello baha2jo,

    You would have to define a variable named theme and set it to “darkblue”.

    Best Regards,
    Dimitar

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

    Multi-level grid error #62657

    baha2jo
    Participant

    Hii

    Thanks for your response ,after solving “theme” issue i got this “Error: Invalid Selector – #jqxgrid! Please, check whether the used ID or CSS Class name is correct.” ,is this happin because i’m using a different version of jQwidgets ??

    Best Regards,

    Multi-level grid error #62667

    Dimitar
    Participant

    Hi baha2jo,

    No, this error is thrown because you do not have a div with id=”jqxgrid”. Maybe you have one with id=”jqxGrid” or you do not have a grid initialization div at all.

    Best Regards,
    Dimitar

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

    Multi-level grid error #62672

    baha2jo
    Participant

    Here is my code :

    <!DOCTYPE html>
    <html lang=”en”>
    <head>

    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.darkblue.css” type=”text/css” />
    <!–<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script> –>
    <script type=”text/javascript” src=”../../scripts/jquery-1.7.2.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>

    <script type=”text/javascript”>
    // 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 < 10; 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”
    };

    // set rows details.
    $(“#jqxgrid”).bind(‘bindingcomplete’, function (event) {
    if (event.target.id == “jqxgrid”) {
    $(“#jqxgrid”).jqxGrid(‘beginupdate’);
    var datainformation = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
    for (i = 0; i < datainformation.rowscount; i++) {
    var hidden = i > 0 ? true : false;
    $(“#jqxgrid”).jqxGrid(‘setrowdetails’, i, “<div id=’grid” + i + “‘ style=’margin: 10px;’></div>”, 220, hidden);
    }
    $(“#jqxgrid”).jqxGrid(‘endupdate’);
    }
    });
    var dataAdapter = new $.jqx.dataAdapter(source);
    var theme=”darkblue”
    // creage jqxgrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 670,
    height: 365,
    source: dataAdapter,
    theme: theme,
    rowdetails: true,
    initrowdetails: initlevel2,
    columns: [
    { text: ‘First Name’, dataField: ‘firstname’, width: 100 },
    { text: ‘Last Name’, dataField: ‘lastname’, width: 100 },
    { text: ‘Product’, dataField: ‘productname’, width: 180 },
    { text: ‘Quantity’, dataField: ‘quantity’, width: 80, cellsalign: ‘right’ },
    { text: ‘Unit Price’, dataField: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
    { text: ‘Total’, dataField: ‘total’, cellsalign: ‘right’, minwidth: 100, cellsformat: ‘c2’ }
    ]
    });

    var initlevel2 = function (index) {
    var grid = $($.find(‘#grid’ + index));
    grid.bind(‘bindingcomplete’, function (event) {
    if (event.target.id == “grid” + index) {
    grid.jqxGrid(‘beginupdate’);
    var datainformation = grid.jqxGrid(‘getdatainformation’);
    for (var i = 0; i < datainformation.rowscount; i++) {
    var hidden = true;
    grid.jqxGrid(‘setrowdetails’, i, “<div id=’subgrid” + i + “‘ style=’margin: 10px;’></div>”, 220, hidden);
    }
    grid.jqxGrid(‘endupdate’);
    }
    });
    if (grid != null) {
    var dataAdapter = new $.jqx.dataAdapter(source);
    grid.jqxGrid({ rowdetails: true, initrowdetails: initlevel3, source: dataAdapter, theme: theme, width: 600, height: 200,
    columns: [
    { text: ‘First Name’, dataField: ‘firstname’, width: 100 },
    { text: ‘Last Name’, dataField: ‘lastname’, width: 100 },
    { text: ‘Product’, dataField: ‘productname’, width: 180 },
    { text: ‘Quantity’, dataField: ‘quantity’, cellsalign: ‘right’ }
    ]
    });
    }
    }

    var initlevel3 = function (index) {
    var grid = $($.find(‘#subgrid’ + index));
    var dataAdapter = new $.jqx.dataAdapter(source);
    if (grid != null) {
    grid.jqxGrid({ source: dataAdapter, theme: theme, width: 530, height: 200,
    columns: [
    { text: ‘First Name’, dataField: ‘firstname’, width: 100 },
    { text: ‘Last Name’, dataField: ‘lastname’, width: 100 },
    { text: ‘Product’, dataField: ‘productname’, width: 180 },
    { text: ‘Quantity’, dataField: ‘quantity’, cellsalign: ‘right’ }
    ]
    });
    }
    }

    </script>
    </head>
    <body class=’default’>
    <div id=”jqxgrid”>
    </div>

    </body>
    </html>

    Multi-level grid error #62675

    Dimitar
    Participant

    Hi baha2jo,

    Your script must be in $(document).ready(). We suggest you take a look at the jqxGrid Getting Started guide to learn the basics of jqxGrid use.

    Best Regards,
    Dimitar

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

    Multi-level grid error #62688

    baha2jo
    Participant

    Thanks for your help ,it works but only dispalys the root level in the grid ,what should i do to display the sub grid.
    I will read the guide ASAP .

    Thanks again,

    Multi-level grid error #62690

    baha2jo
    Participant
    Multi-level grid error #62692

    Dimitar
    Participant

    Hi baha2jo,

    Please try the following, updated, version of the example in the blog post: http://www.jqwidgets.com/community/topic/getting-error-with-assembling-n-nested-jquery-grid/#post-56402.

    Best Regards,
    Dimitar

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

    Multi-level grid error #62976

    baha2jo
    Participant

    Thanks alot for the help 🙂

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

You must be logged in to reply to this topic.