grid rowsdetails don't' refresh data after reaload grid

[altorrecillasParticipant]

Hello,
I have a grid (with datasource php bakcend) that contains a rowdetails into a <div>.
Well, when I update the grid like : $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘cells’);
The rowodeatils div is not uptated!. How can I refresh this content?

thanks in advance
Angel.

[altorrecillasParticipant]

how can i call “initrowdetails” property each time the grid is refreshed?

[altorrecillasParticipant]

For more information: The kind of grid that I talk is like example call “Row Details”. The thing is that the data into “div” details do not refresh alfter $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘cells’);

[Peter StoevKeymaster]

Hi altorrecillas,

The row details update should be handled manually by the developer that implements them. The Grid does not know nothing about the content inside the Row Details as it could be any HTML or even a Widget or another Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[IvanshParticipant]

Hi Peter,
I have the same issue and only can find old solutions which are not working for me with the new grid version.
Please provide some code example for current version.
I need to update Row Details manualy on sort, filter and any other changes.
Kindest regards,
Ivan

[IvanshParticipant]

I’ve found that it’s possible to put the update Row Details into this function, so it will update on every data update:
var dataadapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {
alert(“Update row details”);
$(‘#jqxGrid’).jqxGrid({ initrowdetails: initrowdetails});
},
loadError: function(xhr, status, error) { alert(error); }
});

But the code isn’t working, I can’t find any updaterowdetails method in API docs. What else do I need to add to update?

[IvanshParticipant]

I have found that setrowdetails working within the dataAdapter, but it’s not connected to my template and data:

        // set row details.
        $("#jqxgrid").jqxGrid('beginupdate');
        $("#jqxgrid").jqxGrid('setrowdetails', 0, "<div class='tabs0' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Nancy Davolio</li><li>Notes</li><div class='information0'></div><div class='notes0'></div></div>", 200, false);
        $("#jqxgrid").jqxGrid('setrowdetails', 1, "<div class='tabs1' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Andrew Fuller</li><li>Notes</li><div class='information1'></div><div class='notes1'></div></div>", 200, true);
        $("#jqxgrid").jqxGrid('setrowdetails', 2, "<div class='tabs2' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Janet Leverling</li><li>Notes</li><div class='information2'></div><div class='notes2'></div></div>", 200, true);
        $("#jqxgrid").jqxGrid('setrowdetails', 3, "<div class='tabs3' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Margaret Peacock</li><li>Notes</li><div class='information3'></div><div class='notes3'></div></div>", 200, true);
        $("#jqxgrid").jqxGrid('setrowdetails', 4, "<div class='tabs4' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Steven Buchanan</li><li>Notes</li><div class='information4'></div><div class='notes4'></div></div>", 200, true);
        $("#jqxgrid").jqxGrid('setrowdetails', 5, "<div class='tabs5' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Michael Suyama</li><li>Notes</li><div class='information5'></div><div class='notes5'></div></div>", 200, true);
        $("#jqxgrid").jqxGrid('setrowdetails', 6, "<div class='tabs6' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Robert King</li><li>Notes</li><div class='information6'></div><div class='notes6'></div></div>", 200, true);
        $("#jqxgrid").jqxGrid('setrowdetails', 7, "<div class='tabs7' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Laura Callahan</li><li>Notes</li><div class='information7'></div><div class='notes7'></div></div>", 200, true);
        $("#jqxgrid").jqxGrid('setrowdetails', 8, "<div class='tabs8' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Anne Dodsworth</li><li>Notes</li><div class='information8'></div><div class='notes8'></div></div>", 200, true);
        $("#jqxgrid").jqxGrid('resumeupdate');

How to made so it will take my template and data from initrowdetails function?

[IvanshParticipant]

I think I've found the solution, I've just put my html code from rowdetailstemplate to the loop:

var dataadapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) {
        var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
        for (i = 0; i < datainformation.rowscount; i++) {
            var hidden = i > 0 ? true : false;
            $("#jqxgrid").jqxGrid('setrowdetails', i, "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'><li>Description:</li><div class='information'></div><div class='notes'></div></div>", 220, hidden);
        }
    },
    loadError: function(xhr, status, error)    {    alert(error);    }
});

[mircea.ontanuParticipant]

Hi,

Two years later I have a similar issue.
When I’m extending the row detail, the code from initrowdetails is triggered for that row.
But the code is not triggered every time I expand the row details content, it’s triggered only the first time per row.

After I do a $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘cells’); and expand a previously expanded row detail, the code is not triggered so I won’t get the latest data from the server.
Inside the initrowdetails I have an adapter to fetch some details from the server for that row.

I was expecting that initrowdetails will be triggered every time I expand the row details. But this is not happening.
I don’t know if is a bug or this was the intended functionality, but I don’t see how I can update the data without complicating things.
Or at least it should allow re-triggering after I’m updating the grid, because if I need to refresh the data I also assume that the row details must also be refreshed.

Thanks,
Mircea

[mircea.ontanuParticipant]

Hi,

I’ve just found out that the jqxGrid has an event “rowexpand” and I’ve used it to update my controls and adapters.
So the initrowdetails is triggered only once when you click the arrow to expand the row details, and is mainly used to create the content you want to display.
And the rowexpand event on the grid is triggered every time the arrow icon is clicked, so I guess it’s used to update your adapters and controls present in the row details.

    $('#_gridRecords').on('rowexpand', function (event) {
        // event arguments.
        var args = event.args;
        // row details.
        var details = args.details;
        // row's bound index.
        var rowBoundIndex = args.rowindex;

        var _listboxComments = _arrayRowDetailsComments[rowBoundIndex];
        if (_listboxComments)
            _listboxComments.jqxListBox('refresh');
    });

I hope this help whoever hits my dilemma.

Best regards,
Mircea

[mircea.ontanuParticipant]

Unfortunately I’ve found out that the index provided by the rowexpand event is not that useful for this purpose because is different from the inirowdetails event. If you hit the same wall please see also:
http://www.jqwidgets.com/community/topic/rowexpand-index-different-than-initrowdetails-index/

[Author]

Posts