Using igniteui version 17.2 with ASP.NET MVC 5 application:
my simplified grid in cshtml file:
@(Html.Infragistics().Grid(Model.Records).ID("masterGrid").AutoGenerateColumns(false).Width("99%") .RenderCheckboxes(true).LocalSchemaTransform(true) .AutoGenerateLayouts(true) .PrimaryKey("Bonnr") .ResponseDataKey("Records") .Virtualization(false) .FixedHeaders(true) .ShowHeader(true) .AutoAdjustHeight(true) .Columns(column => { column.For(x => x.Bonnr).HeaderText("Bon").DataType("number");column.For(x => x.MoederOrderNr).HeaderText("Order").FormatterFunction("formatBackOrderNr");}).DataBind().Render() )
@(Html.Infragistics().Grid(Model.Records).ID("masterGrid").AutoGenerateColumns(false).Width("99%")
.RenderCheckboxes(true).LocalSchemaTransform(true)
.AutoGenerateLayouts(true)
.PrimaryKey("Bonnr")
.ResponseDataKey("Records")
.Virtualization(false)
.FixedHeaders(true)
.ShowHeader(true)
.AutoAdjustHeight(true)
.Columns(column =>
{
column.For(x => x.Bonnr).HeaderText("Bon").DataType("number");
column.For(x => x.MoederOrderNr).HeaderText("Order").FormatterFunction("formatBackOrderNr");})
.DataBind().Render()
)
my function in javascript file:
function formatBackOrderNr(val, row) { var txtUrl = "<div>  </div>"; if (row.MoederOrderNr !== 0) { $.ajax({ url: UrlSettings.CheckIsBestellingUrl, type: 'post', data: { ordernr: row.MoederOrderNr }, success: function (result) {console.log(row.MoederOrderNr); // <== THE OUPUT IS CORRECT if (result === true) { var url = UrlSettings.MoederOrderUrl + '/O' + row.MoederOrderNr; txtUrl = "<a class='backorder' href='" + url + "'>" + row.MoederOrderNr + "</a>"; } else { txtUrl = "<div>" + row.MoederOrderNr + "</div>"; } }, async: false // <== THIS WORKS ! }); } return txtUrl;}
function formatBackOrderNr(val, row) {
var txtUrl = "<div>  </div>";
if (row.MoederOrderNr !== 0) {
$.ajax({
url: UrlSettings.CheckIsBestellingUrl,
type: 'post',
data: {
ordernr: row.MoederOrderNr
},
success: function (result) {
console.log(row.MoederOrderNr); // <== THE OUPUT IS CORRECT
if (result === true) {
var url = UrlSettings.MoederOrderUrl + '/O' + row.MoederOrderNr;
txtUrl = "<a class='backorder' href='" + url + "'>" + row.MoederOrderNr + "</a>";
} else {
txtUrl = "<div>" + row.MoederOrderNr + "</div>";
}
async: false // <== THIS WORKS !
});
If I use async: true // <== THIS DOES NOT WORK - column is empty !
Some observations:
The grid is rendered without errors except for the defined column being empty (when async: true).If I use 'async false' in my post request, the grid is rendered AFTER all my console.log statements.If I use 'async true' in my post request, the grid is rendered somewhere IN BETWEEN the console.log statements.I do get a deprecation warning in the console of Chrome if I use async false.I also see my console.log output in the formattter function 'on success' correctly whether I use async true or false.
Any suggestions on how to solve this with async true ?
thx,
Hello Peter,
I'm afraid that's not possible. The formatter function gets executed on grid rendering time and it's expected to return result synchronously.
Your option is to asynchronously execute all the requests for the cells and call igGridUpdating.setCellValue API for each request once done. For this to work you need to enable Updating feature and disable its end-user editing capabilities if you don't need them.
Best regards, Martin Pavlov Infragistics, Inc.