grid loading time

[hfParticipant]

I’m displaying 10.000 records (mysql) from a webservice by json. The webservice loads the data fast, but then it takes 6 seconds before displaying the grid (without a loading message?).

_
_
Public Function getData() As String
Try
datasource.ProviderName = “System.Data.Odbc”
datasource.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings(“MySQLConnectionString”).ConnectionString
selectcommand = “SELECT G.id AS g_id, ” & _
“G.naam AS g_naam, ” & _
“DR.relatie, ” & _
“DR.datum, ” & _
“ICG.icg, ” & _
“R.servicenr, ” & _
“DR.werkbon, ” & _
“TIME_TO_SEC(DR.start) AS start, ” & _
“TIME_TO_SEC(DR.eind) AS eind, ” & _
“DR.uren, ” & _
“DR.actcode, ” & _
“DR.toelichting ” & _
“FROM dagstaatregels DR ” & _
“LEFT JOIN gebruiker G ON G.id = DR.user ” & _
“LEFT JOIN relatie R ON DR.relatie = R.id ” & _
“LEFT JOIN dagstaat_icg ICG ON ICG.id = DR.icg ” & _
“WHERE DR.icg ””

datasource.SelectCommand = selectcommand
dataview = datasource.Select(DataSourceSelectArguments.Empty)

Dim serializer As System.Web.Script.Serialization.JavaScriptSerializer = New System.Web.Script.Serialization.JavaScriptSerializer()
Dim rows As New List(Of Dictionary(Of String, Object))
Dim row As Dictionary(Of String, Object)

serializer.MaxJsonLength = 99999999

For Each dr As DataRow In dataview.Table.Rows
row = New Dictionary(Of String, Object)
For Each col As DataColumn In dataview.Table.Columns
row.Add(col.ColumnName, dr(col))
Next
rows.Add(row)
Next

‘—– ARRAY RETURNEN IN JSON (JavaScript Object Notation) OPZET
Dim sJSON As String = serializer.Serialize(rows)
Return sJSON

Catch ex As Exception
Return “||_ERROR_||” & ex.Message

End Try
End Function

——

$(document).ready(function () {
getData();
});

function getData() {
$.ajax({
url: ‘WebService1.asmx/getData’,
date: “{}”,
dataType: ‘json’,
type: ‘GET’,
contentType: ‘application/json; charset=utf-8’,
success: getDataSucces,
error: function (err) {
errorHandler(err.responseText);
}
});
}

function getDataSucces(data, status) {
if (data.d.indexOf(‘||_ERROR_||’) == -1) {

var source =
{
localdata: data.d,
datafields: [
{ name: ‘g_naam’, type: ‘string’ },
{ name: ‘datum’, type: ‘date’ },
{ name: ‘servicenr’, type: ‘string’ },
{ name: ‘werkbon’, type: ‘number’ },
{ name: ‘uren’, type: ‘float’ },
{ name: ‘icg’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
],
datatype: ‘json’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
commit(true);
}
};

var adapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid({
width: ‘100%’,
height: ‘100%’,
showstatusbar: true,
statusbarheight: 50,
source: adapter,
sortable: true,
filterable: true,
editable: false,
showfilterrow: true,
groupable: false,
showaggregates: true,
pageable: false,
theme: theme,
columnsresize: true,
columnsreorder: true,
selectionmode: ‘none’,
scrollmode: ‘deferred’,
deferreddatafields: [‘g_naam’, ‘datum’, ‘servicenr’, ‘icg’],
columns: [
{ text: ‘Naam’, datafield: ‘g_naam’, filtertype: ‘checkedlist’, width: 150,
aggregates: [{ ‘Aantal’:
function (aggregatedValue, currentValue) {
return aggregatedValue + 1;
}
}]
},
{ text: ‘Datum’, datafield: ‘datum’, cellsformat: ‘dd-MM-yyyy’, filtertype: ‘date’, width: 100 },
{ text: ‘Servicenr’, datafield: ‘servicenr’, width: 150 },
{ text: ‘Werkbon’, datafield: ‘werkbon’, width: 150 },
{ text: ‘Uren’, datafield: ‘uren’, cellsformat: ‘F2’, cellsalign: ‘right’, filterable: false, filtertype: ‘default’, width: 120,
aggregates: [{ ‘Totaal’:
function (aggregatedValue, currentValue) {
if (currentValue) {
return aggregatedValue + currentValue;
}
return aggregatedValue;
}
}]
},
{ text: ‘ICG’, datafield: ‘icg’, filtertype: ‘checkedlist’ }
]
});

$(“#jqxgrid”).jqxGrid(‘localizestrings’, localizationobj);
//$(“#jqxgrid”).jqxGrid(‘autoresizecolumns’);
}
else {
errorHandler(data.d.replace(“||_ERROR_||”, “”));
};
}

[Peter StoevKeymaster]

Hi hf,

The Grid will not display a loading image because it the provided code it is populated from a local data source. The Ajax request is not done through the Grid and it is populated in the Ajax’s callback from the downloaded data.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hfParticipant]

Thanks for your quick response. Can you can point me in the right direction to do a Ajax request done through the grid?

[hfParticipant]

I figured it out on how to do a ajax request through the grid, by the example given on http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-web-service-grid.htm.

The only problem is I get a error message ‘Invalid operand’. When I leave root empty, the error disapears but I get a empty table..

var source = {
type: “GET”,
datatype: “json”,
datafields: [
{ name: ‘g_naam’ },
{ name: ‘datum’ },
{ name: ‘servicenr’ },
{ name: ‘werkbon’ },
{ name: ‘uren’ },
{ name: ‘icg’ }
],
url: ‘WebService1.asmx/getData’,
cache: false,
root: ‘data’
};

//Preparing the data for use
var dataAdapter = new $.jqx.dataAdapter(source, { contentType: ‘application/json; charset=utf-8’,
downloadComplete: function (data, textStatus, jqXHR) {
return data.d;
}
});

$(“#jqxgrid”).jqxGrid({
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
columns: [
{ text: ‘Naam’, datafield: ‘g_naam’, filtertype: ‘checkedlist’, width: 150 },
{ text: ‘Datum’, datafield: ‘datum’, cellsformat: ‘dd-MM-yyyy’, filtertype: ‘date’, width: 100 },
{ text: ‘Servicenr’, datafield: ‘servicenr’, width: 150 },
{ text: ‘Werkbon’, datafield: ‘werkbon’, width: 150 },
{ text: ‘Uren’, datafield: ‘uren’, cellsformat: ‘F2’, cellsalign: ‘right’, filterable: false, filtertype: ‘default’, width: 120 },
{ text: ‘ICG’, datafield: ‘icg’, filtertype: ‘checkedlist’ }
]
});

Any help will be appreciated.

[Author]

Posts