Nested Grid

[simcon94Participant]

Hi,
is it possible to load a grid and chart in nested Grid?
I try it this way (initrowdetails):

var initrowdetails = function (index, parentElement, gridElement, record) {
            
            var id = record.uid.toString();
            var grid = $($(parentElement).children()[0]);
            var chart = $($(parentElement).children()[1]);
            
            //nestedGrids[index] = grid;

            // Get Source
            var source = {
                datatype: "json",
                datafields: [
                    { name: 'Zählername' },
                    { name: 'Zählernummer' },
                    { name: 'Energieträger' },
                    { name: 'Einheit' },
                    { name: 'Datum', type: 'date' },
                    { name: 'Wert', type: 'number' }
                ],
                url: sk.appHelper.getAppDomainAppVirtualPath() + "/AnalysisLive/GetTableData?id=" + record.Id
                , root: 'Rows'
                , pagesize: 100
                ,beforeprocessing: function(data) {
                    source.totalrecords = data.TotalRows;
                },
                filter: function() {
                    $("#AnalysisLiveGrid").jqxGrid('updatebounddata', 'filter');
                },
                // update the grid and send a request to the server.
                sort: function() {
                    $("#AnalysisLiveGrid").jqxGrid('updatebounddata', 'sort');
                }
            };

            // set Data Adapter
            var nestedGridAdapter = new $.jqx.dataAdapter(source);

            if (grid != null) {
                console.log("grid! " + grid);
                grid.jqxGrid({
                    source: nestedGridAdapter,
                    width: '98%',
                    height: 400,
                    pageable: true,
                    pagermode: 'simple',
                    virtualmode: true,
                    rendergridrows: function(obj) {
                        return obj.data;
                    }
                    //, pagerrenderer: pagerrenderer
                    ,
                    columnsresize: true,
                    keyboardnavigation: true,
                    sortable: true,
                    groupable: true,
                    filterable: true,
                    showfilterrow: true,
                    columns: [
                        { text: 'Nr', datafield: 'Nr', filtertype: 'textbox', filtercondition: 'starts_with', width: 110, align: 'center' }
                        , { text: 'Name', datafield: 'Name', filtertype: 'textbox', filtercondition: 'contains', align: 'center' }
                    ]
                });
            }
            
            // CHART
            var sourceChart =
                    {
                        datatype: "json"
                        , datafields: []
                        , url: sk.appHelper.getAppDomainAppVirtualPath() + "/AnalysisLive/GetChartLiveData?id=" + record.Id
                    };

            var chartDataAdapter = new $.jqx.dataAdapter(sourceChart, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            // get key and Value from JSON
            var seriesColumns = new Array();
            for (var propName in chartDataAdapter.records[0]) {
                if (propName !== "Date" && propName !== "uid") {
                    seriesColumns.push({ dataField: propName, displayText: propName });
                }
            }

            //search for the selected MonitoringType (15, 60, 120...)
            var selectTime = sk.analysis.getSelectedMonitoringTime();

            // prepare jqxChart settings
            var settings = {
                title: "Lastgang"
                , description: "Von: " + $("#DatePicker_from").val() + " Bis: " + $("#DatePicker_to").val()
                , enableAnimations: true
                , showLegend: true
                , padding: { left: 10, top: 5, right: 50, bottom: 5 }
                , titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }
                , source: chartDataAdapter
                , categoryAxis:
                {
                    dataField: 'Date'
                    , unitInterval: sk.analysis.getUnitIntervall(selectTime)
                    , showTickMarks: false
                    , tickMarksInterval: sk.analysis.getUnitIntervall(selectTime)
                    , tickMarksColor: '#888888'
                    , showGridLines: true
                    , gridLinesInterval: sk.analysis.getUnitIntervall(selectTime)
                    , gridLinesColor: '#888888'
                    , valuesOnTicks: true
                    , textRotationAngle: 90
                    , gridLinesDashStyle: '2,2'
                    , enableAnimations: true
                    , animationDuration: 1500
                    , enableCrosshairs: true
                },
                colorScheme: 'scheme04',
                seriesGroups:
                [
                    {
                        type: 'line',
                        valueAxis:
                        {
                            minValue: 0
                            , formatSettings: { decimalSeparator: ',', thousandsSeparator: '.' }
                        },
                        series:
                            seriesColumns
                    }
                ]
            };
            
            if (chart != null) {                
                chart.jqxChart(settings);
            }

        };

and grid:

$("#grid").jqxGrid({
            width: '100%'
            , height: 500
            , source: measValueAdapter
            , rowdetails: true
            , rowsheight: 35
            , initrowdetails: initrowdetails
            , rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div><div id='chart' style='margin: 10px;width:99%; height:400; float: left;'></div>", rowdetailsheight: 820, rowdetailshidden: true }
            //,ready: function () {
            //    $("#grid").jqxGrid('showrowdetails', 1);
            //}
            , columns: [
                 { text: 'Value', datafield: 'Name', filtertype: 'textbox', filtercondition: 'starts_with', width: '99%', align: 'center' }
                , { text: "Id ", datafield: "Id", width: 1, hidden: true }
            ]
        });

[simcon94Participant]

This works:
chart.jqxButton({ width: ‘150’});

but no chart

[Peter StoevKeymaster]

Hi simcon94,

height:400; in your CSS looks like incorrect CSS height. It should probably be height: 400px;

Best Regards,
Peter Stoev

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

[simcon94Participant]

Oh great, that was it…..

[Author]

Posts