jQuery UI Widgets Forums Grid Nested grid using Knockout

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Nested grid using Knockout #23914

    gaclique
    Participant

    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?

    Nested grid using Knockout #23960

    Peter Stoev
    Keymaster

    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/

    Nested grid using Knockout #24026

    gaclique
    Participant

    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.

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

You must be logged in to reply to this topic.