is it possible to call getJSON in cellsrenderer ?

[cemilearikanParticipant]

Hello,

I have been searching the solution since yesterday, but not found. Please help me asap.

I have a jqxgrid, it is databined with json from an ashx(generic handler). Everthing is ok so far. In json data i have two column that are longitude and latitude. In the client side i have to produce address(reverse geocoding) from coordinates. getJson call for address works fine bu as we know that it is asyc, that’ why grid rows didn’t know the getJSOn call result. How do i update the one specific cell according to the my reverse geocode call. Here is the code;

// prepare the data for grid
gsource =
{
datatype: “json”,
datafields: [
{ name: ‘Plaka’ },
{ name: ‘Tarih’ },
{ name: ‘KontakDurum’ },
{ name: ‘HareketDurum’ },
{ name: ‘Boylam’ },
{ name: ‘Enlem’ },
{ name: ‘id’ },
{ name: ‘Hız’ },
{ name: ‘Dusername’ },
{ name: ‘GroupId’ },
{ name: ‘Adres’ },
{ name: ‘IconColour’ }
, { name: ‘angle’ }
],
filter: function () {
$(“#jqxgrid” + gIndex + “”).jqxGrid(‘updatebounddata’, ‘filter’);
},
async: true,
id: ‘id’,
url: url,
type: ‘GET’
};

var dataAdapterForGrid = new $.jqx.dataAdapter(gsource);

// create tab context grid
$(“#jqxgrid” + gIndex + “”).jqxGrid({

theme: theme,
pageable: true,
sortable: true,
columnsresize: true,
autoheight: true,
altrows: true,
rowdetails: true,
enabletooltips: true,
showstatusbar: true,
selectionmode: ‘singlecell’,
width: ‘100%’,
height: ‘800’,
source: dataAdapterForGrid,
filterable: true,
renderstatusbar: function (statusbar) {
// appends buttons to the status bar.
var container = $(“<div style=’overflow: hidden; position: relative; margin: 5px;’></div>”);
statusbar.append(container);

var reloadButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: 2px;’></span></div>”);
container.append(reloadButton);
reloadButton.jqxButton({ theme: theme, width: 64, height: 20 });
// reload grid data.
reloadButton.click(function (event) {
var selectedItem = $(‘#jqxMenuTabs’).jqxTabs(‘selectedItem’);
selectedItem = selectedItem – 1;
$(“#jqxgrid” + selectedItem + “”).jqxGrid(‘updatebounddata’);
});

},
rendergridrows: function (data) {

return data.records;
},
columns: [
//{ text: ‘id’, datafield: ‘id’, width: 20 },
{ text: columnTitles[10], datafield: ‘IconColour’, cellsrenderer: IconRenderer, width: 60, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: columnTitles[0], datafield: ‘Plaka’, width: 100 },
{ text: columnTitles[1], datafield: ‘Tarih’, width: 160 },
{ text: columnTitles[7], datafield: ‘Adres’, cellsrenderer: ReverseGeocode},
{ text: columnTitles[2], datafield: ‘Hız’, width: 70 },
{ text: columnTitles[3], datafield: ‘KontakDurum’, width: 120 },
{ text: columnTitles[4], datafield: ‘HareketDurum’, width: 130 },
{ text: columnTitles[5], cellsrenderer:photorenderer , width: 60 },
{ text: columnTitles[6], datafield: ‘Dusername’, width: 150 },
{ text: columnTitles[11], cellsrenderer: MsgRenderer, width: 60 },
{ text: columnTitles[8], datafield: ‘Boylam’, width: 150 },
{ text: columnTitles[9], datafield: ‘Enlem’, width: 150 }
]
});

—————-

//create grid’s cell address value from coordinates
var ReverseGeocode = function (row, columnfield, value, defaulthtml, columnproperties) {

var adr = “”;
var array = value.split(‘;’);
var long = array[0];
var lat = array[1];

$.getJSON(“http://map.gorevtakibi.com/BMS/rg.ashx?lng=” + long + “&lat=” + lat + “&callback=?”, function (data) {
if (data.Street) {
adr = data.O1 + “, ” + data.O8 + “, ” + data.O9 + “, ” + data.Street;
} else {
adr = data.O1 + “, ” + data.O8 + “, ” + data.O9;
}
});

return adr;
}

[Peter StoevKeymaster]

Hi cemilearikan,

To update a specific cell, you can use the jQWidgets Grid’s “setcellvalue” method – http://jsfiddle.net/jqwidgets/uuW2H/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[cemilearikanParticipant]

At last i wanna say that address seems empty string but address cell has address sentence according to the getJSON call response. When getJSON response back, grid have already bind the data :/

[Peter StoevKeymaster]

Hi cemilearikan,

The Grid’s binding in the provided code is through Ajax. getJSON makes another AJAX call, too. If you want to synchronize these calls, then set “async: false” in the source object and make your getJSON call synchronized, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[cemilearikanParticipant]

Hi Peter,

First of all i tried to set “async: false”, but it did not work for my case. After i tried setcellvalue, but infinitive loop occuired. What can we do ?

Thank you so much.

[Peter StoevKeymaster]

Hi cemilearikan,

getJSON is a shorthand of:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

So instead of getJSON, use:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success,
  async: false
});

Also set, async: false in gsource. That will make everything to be synchronous.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[cemilearikanParticipant]

Infinite loop code;

$.getJSON(“http://localhost/rg.ashx?lng=” + long + “&lat=” + lat + “&callback=?”, function (data) {
if (data.Street) {
adr = data.O1 + “, ” + data.O8 + “, ” + data.O9 + “, ” + data.Street;
$(“#jqxgrid0”).jqxGrid(‘setcellvalue’, 0, “Adres”, adr);
} else {
adr = data.O1 + “, ” + data.O8 + “, ” + data.O9;
$(“#jqxgrid0”).jqxGrid(‘setcellvalue’, 0, “Adres”, adr);
}
});

Actually i must use it here, because of the response ??

[Peter StoevKeymaster]

Hi cemilearikan,

As I do not know all your code, check on your side why setting a value causes infinite loop. Probably, you do something in addition which leads to that.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts