jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Grid cell rowdetails

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 13 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Grid cell rowdetails Posts
  • April 2, 2012 at 7:04 pm Grid cell rowdetails #3169

    goksel
    Member

    Hi Peter,

    I have a problem rowdetails.

    First of all,

    $(“#jqxgrid”).jqxGrid(‘beginupdate’);
    $(“#jqxgrid”).jqxGrid(‘setrowdetails’, 0, “Detail string…”, 200, false);
    $(“#jqxgrid”).jqxGrid(‘setrowdetails’, 1, “Detail string…”, 200, true);
    $(“#jqxgrid”).jqxGrid(‘resumeupdate’);

    How can I do for all the rows in automaticaly server side?

    And last problem,

    Details row click and open the new row how can I do this row detail server side data include?

    Thank you for your help.

    April 3, 2012 at 5:23 am Grid cell rowdetails #3180

    Peter Stoev
    Keymaster

    Hi goksel,

    Its not possible to set something like a row details template at present. We’ll implement such logic in the future versions. In this version, you will need to loop through the rows and set the row details. If your data is not local, you can use the loadComplete callback function of the jqxDataAdapter, which is called when the data adapter is initialized and the data is downloaded and loaded. Then in this callback function, you can set the Row’s Details:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example shows how to create a Grid from JSON data.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.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" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                var url = "../sampledata/beverages.txt";
                var parentsLength = $("#jqxWidget").parents().length;
                if (parentsLength > 3) {
                    url = 'demos/sampledata/beverages.txt';
                }
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'name' },
                        { name: 'type' },
                        { name: 'calories', type: 'int' },
                        { name: 'totalfat' },
                        { name: 'protein' },
                    ],
                    id: 'id',
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source,
                    {
                        loadComplete: function () {
                            $("#jqxgrid").jqxGrid('setrowdetails', 0, '<div>Row Details</div>', 200, true);
                        }
                    }
                );
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    theme: theme,
                    rowdetails: true,
                    columnsresize: true,
                    columns: [
                      { text: 'Name', datafield: 'name', width: 250 },
                      { text: 'Beverage Type', datafield: 'type', width: 250 },
                      { text: 'Calories', datafield: 'calories', width: 180 },
                      { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                      { text: 'Protein', datafield: 'protein', minwidth: 120 }
                  ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid"></div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    April 4, 2012 at 2:12 pm Grid cell rowdetails #3213

    goksel
    Member

    I waiting for the new version. Thank you Peter. 🙂

    April 4, 2012 at 2:29 pm Grid cell rowdetails #3214

    Peter Stoev
    Keymaster

    Hi goksel,

    The ‘row templates’ feature is not planned, yet. I suggest you to go with the ‘setrowdetails’ method by using the approach above. I also suggest you to take a look at the Row Details demo implementation: Row Details.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.