Datadapter in Cellsrenderer

[AJRamesParticipant]

Hello all,
I am currently using a TreeGrid to show data.
Additionally I have a cellsrenderer that have to look up data from another data source based on the column’s value:

var statusrenderer = function (row, column, value, defaultSettings, columnSettings, rowdata) {
                var statusalias = columnSettings;
                    var sourceIsoCodesList =
                        {
                            datatype: "json",
                            datafields: [
                                { name: 'AdminKeywordValue', type: 'string' },
                                { name: 'AdminKeywordLanguageId ', type: 'string' }
                            ],
                            url: url
                        };
                    var dataAdapterIsoCodesList = new $.jqx.dataAdapter(sourceIsoCodesList, {
                        autoBind: true,
                        loadComplete: function (records) {
                            var records = dataAdapterIsoCodesList.records;
                            var avalue = records[0].AdminKeywordValue;
                            return '<span>' + avalue + '</span>';
                        },
                        beforeLoadComplete: function (records) {
                            var records = dataAdapterIsoCodesList.records;
                            var avalue = records[0].AdminKeywordValue;
                            return '<span>' + avalue + '</span>';
                        }
                    });
            };

records[0].AdminKeywordValue has the value “Finished” – so that would be fine.

The only thing is, that the TreeGrid does not show “Finished”, it just shows the initial value of the column.
TreeGrid part:
{ text: 'Status', dataField: 'Status', cellsrenderer: statusrenderer },

Am I doing something wrong in the cellsrenderer?

Thank you in advance.

[Peter StoevKeymaster]

Hi AJRames,

cellsRenderer is expected to return HTML String. Yours does not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AJRamesParticipant]

Thank you for your quick reply.

My return value is:
return '<span>' + avalue + '</span>';

This is enough html – isn’t it?

[Peter StoevKeymaster]

Hi AJRames,

No, it is not. This is the return value of your beforeLoadComplete and loadComplete functions. This is not the return value of the cellsRenderer function. I would suggest you to see the examples which use cellsRenderer.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AJRamesParticipant]

Ahhhh okay, I see.

And how can I get the return value of loadComplete as the return value of the cellsrenderer?
It’s not working by just assigning it to a variable…

var statusrenderer = function (row, column, value, defaultSettings, columnSettings, rowdata) {
                    var statusalias = columnSettings;
                    var html;
                    var sourceIsoCodesList =
                        {
                            datatype: "json",
                            datafields: [
                                { name: 'AdminKeywordValue', type: 'string' },
                                { name: 'AdminKeywordLanguageId ', type: 'string' }
                            ],
                            url: url
                        };
                    var dataAdapterIsoCodesList = new $.jqx.dataAdapter(sourceIsoCodesList, {
                        autoBind: true,
                        loadComplete: function (records, html) {
                            var records = dataAdapterIsoCodesList.records;
                            var avalue = records[0].AdminKeywordValue;
                            html = "<div>" + avalue + "</div>";
                        },
                        beforeLoadComplete: function (records) {
                            var records = dataAdapterIsoCodesList.records;
                            var avalue = records[0].AdminKeywordValue;
                            html = "<div>" + avalue + "</div>";
                        }
                    });

                    return html;

[Peter StoevKeymaster]

Hi AJRames,

I hope that you understand your code. The dataAdapter makes an Ajax call in your code – see the url parameter. This means that you have asynchronous communication between browser and server while the cellsRenderer is a sychronous function. The solution for you would be probably to set the “async” paramaeter of the source object to false. However, I suggest you to use the function in the way demonstrated in the samples. I don’t think that it is a good idea at all to make an Ajax call in a rendering function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AJRamesParticipant]

Allright, thank you for your suggestion.
I am going to do the ajax call outside of the cellsrenderer.

Thank you.

[Author]

Posts