Nested grid using Knockout

[gacliqueParticipant]

I’m implementing a nested grid that is binding to a knockout viewmodel. Below is my initrowdetails function:

var initrowdetails = function (index, parentElement, gridElement, record) {
            var id= record.MyId;
            var grid = $($(parentElement).children()[0]);
            var items = myVM.getItems(id);
           
            var source=
            {
                datatype: "observablearray",
                localdata: items 
            };
            var myDataAdapter = new $.jqx.dataAdapter(source);
            
            if (grid != null) {
                grid.jqxGrid({
                    source: myDataAdapter,
                    width: 630,
                    theme: theme,
                    sortable: false,
                    showsortcolumnbackground: false,
                    columnsheight: 50,
                    autoheight: true,
                    autorowheight: true,
                    selectionmode: 'none',
                    enablehover: false,
                    columns: [
                            { text: '', datafield: 'Id', hidden: 'true' },
                            { text: '', datafield: 'Title', align: 'center', cellsalign: 'center', width: 50 }
                
                    ]
                });
            }
        }

getItems is a function inside my viewmodel that returns the items based on my Id being passed in. It looks like the data is binding to the grid but when the grid renders, it’s showing the knockout function calls instead of the actual data.

Is there something I’m doing wrong or need to do to display the data correctly in my nested grid?

[Peter StoevKeymaster]

Hi,

In the provided code you missed to add the datafields array to the “source” object during the initialization.

Best Regards,
Peter Stoev

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

[gacliqueParticipant]

Added the datafields doesn’t make any difference. I was able to get the data to show correctly by using a cellrenderer like below

            var cellsrenderer = function (row, column, value, columnproperties) {
                var displayValue = value();
                return displayValue;
            }

The issue i have now is that when i make changes to my Knockout model, the content in my nested grid doesn’t update automatic. Seems like it’s not subscribing correctly or something and I have to manually call refreshdata on my grid to have the data update on the UI.

Seems like the nested grid behaves differently from a regular grid when binding to observable array.

[Author]

Posts