Uncaught Error: jqxGrid: The data is still loading.

[Basar CavitParticipant]

Hi. I’m getting error “Uncaught Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.” with this code :

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using jqGrid.Models;

namespace jqGrid.Controllers
{
public class UsersController : Controller
{
private jqgridEntities db = new jqgridEntities();

//
// GET: /Users/

public ViewResult Index()
{
//var users = db.Usersses.Include(u => u.SomeInt);
//return View(users.ToList());
return View(db.Usersses.ToList());
}
//public JsonResult GetUsers()
//{
// var dbResult = db.Usersses.ToList();

// var users = from userss in dbResult
// select new { userss.Name, userss.Surname, userss.Birthplace, userss.Birthdate, userss.Children };
// return Json(users, JsonRequestBehavior.AllowGet);
//}
private static int startindex;
private static string getSortOrder, getSortOrdeDataField;
public string orderBy;
public JsonResult GetUsers(string sortdatafield, string sortorder, int pagesize, int pagenum)
{
sortorder = sortorder ?? “asc”;
getSortOrder = sortorder;
getSortOrdeDataField = sortdatafield;
var query = Request.QueryString;
var totalRowQuery = Request.QueryString;
var dbResult = db.Database.SqlQuery<Userss>(this.BuildQuery(query));
var dbTotalRowsResult = db.Database.SqlQuery<Userss>(this.BuildTotalRowsQuery(totalRowQuery));
var users = from userss in dbResult
select new Userss
{
Id = userss.Id,
Name = userss.Name,
Surname = userss.Surname,
Birthdate = userss.Birthdate,
Birthplace = userss.Birthplace,
Glasses = userss.Glasses,
Children = userss.Children
};
if (sortdatafield != null && sortdatafield != “”)
{
users = this.SortUsers(users, sortdatafield, sortorder);
}
var total = dbResult.Count();
users = users.Skip(startindex).Take(pagesize);
var result = new
{
TotalRows = total,
Rows = users
};
return Json(result, JsonRequestBehavior.AllowGet);
}
private IEnumerable<Userss> SortUsers(IEnumerable<Userss> collection, string sortField, string sortOrder)
{
if (sortOrder == “asc”)
{
collection = collection.OrderBy(c => c.GetType().GetProperty(sortField).GetValue(c, null));
}
else
{
collection = collection.OrderByDescending(c => c.GetType().GetProperty(sortField).GetValue(c, null));
}
return collection;
}

private string BuildTotalRowsQuery(System.Collections.Specialized.NameValueCollection totalRowQuery)
{
var queryString = @”Select * From Users”;
return queryString;
}
private string BuildQuery(System.Collections.Specialized.NameValueCollection query)
{
var filtersCount = int.Parse(query.GetValues(“filterscount”)[0]);
var startedIndex = int.Parse(query.GetValues(“recordstartindex”)[0]);
var queryString = @”SELECT * FROM Users “;
var tmpDataField = “”;
var tmpFilterOperator = “”;
var where = “”;
startindex = startedIndex;
if (filtersCount > 0)
{
where = ” WHERE (“;
}
for (var i = 0; i < filtersCount; i += 1)
{
var filterValue = query.GetValues(“filtervalue” + i)[0];
var filterCondition = query.GetValues(“filtercondition” + i)[0];
var filterDataField = query.GetValues(“filterdatafield” + i)[0];
var filterOperator = query.GetValues(“filteroperator” + i)[0];
if (tmpDataField == “”)
{
tmpDataField = filterDataField;
}
else if (tmpDataField != filterDataField)
{
where += “) AND (“;
}
else if (tmpDataField == filterDataField)
{
if (tmpFilterOperator == “”)
{
where += ” AND “;
}
else
{
where += ” OR “;
}
}
// build the “WHERE” clause depending on the filter’s condition, value and datafield.
where += this.GetFilterCondition(filterCondition, filterDataField, filterValue);
if (i == filtersCount – 1)
{
where += “)”;
}
tmpFilterOperator = filterOperator;
tmpDataField = filterDataField;
}
queryString += where;
return queryString;
}
private string GetFilterCondition(string filterCondition, string filterDataField, string filterValue)
{
switch (filterCondition)
{
case “NOT_EMPTY”:
case “NOT_NULL”:
return ” ” + filterDataField + ” NOT LIKE ‘” + “” + “‘”;
case “EMPTY”:
case “NULL”:
return ” ” + filterDataField + ” LIKE ‘” + “” + “‘”;
case “CONTAINS_CASE_SENSITIVE”:
return ” ” + filterDataField + ” LIKE ‘%” + filterValue + “%'” + ” COLLATE SQL_Latin1_General_CP1_CS_AS”;
case “CONTAINS”:
return ” ” + filterDataField + ” LIKE ‘%” + filterValue + “%'”;
case “DOES_NOT_CONTAIN_CASE_SENSITIVE”:
return ” ” + filterDataField + ” NOT LIKE ‘%” + filterValue + “%'” + ” COLLATE SQL_Latin1_General_CP1_CS_AS”; ;
case “DOES_NOT_CONTAIN”:
return ” ” + filterDataField + ” NOT LIKE ‘%” + filterValue + “%'”;
case “EQUAL_CASE_SENSITIVE”:
return ” ” + filterDataField + ” = ‘” + filterValue + “‘” + ” COLLATE SQL_Latin1_General_CP1_CS_AS”; ;
case “EQUAL”:
return ” ” + filterDataField + ” = ‘” + filterValue + “‘”;
case “NOT_EQUAL_CASE_SENSITIVE”:
return ” BINARY ” + filterDataField + ” <> ‘” + filterValue + “‘”;
case “NOT_EQUAL”:
return ” ” + filterDataField + ” <> ‘” + filterValue + “‘”;
case “GREATER_THAN”:
return ” ” + filterDataField + ” > ‘” + filterValue + “‘”;
case “LESS_THAN”:
return ” ” + filterDataField + ” < ‘” + filterValue + “‘”;
case “GREATER_THAN_OR_EQUAL”:
return ” ” + filterDataField + ” >= ‘” + filterValue + “‘”;
case “LESS_THAN_OR_EQUAL”:
return ” ” + filterDataField + ” <= ‘” + filterValue + “‘”;
case “STARTS_WITH_CASE_SENSITIVE”:
return ” ” + filterDataField + ” LIKE ‘” + filterValue + “%'” + ” COLLATE SQL_Latin1_General_CP1_CS_AS”; ;
case “STARTS_WITH”:
return ” ” + filterDataField + ” LIKE ‘” + filterValue + “%'”;
case “ENDS_WITH_CASE_SENSITIVE”:
return ” ” + filterDataField + ” LIKE ‘%” + filterValue + “‘” + ” COLLATE SQL_Latin1_General_CP1_CS_AS”; ;
case “ENDS_WITH”:
return ” ” + filterDataField + ” LIKE ‘%” + filterValue + “‘”;
}
return “”;
}
//
//
// GET: /Users/Details/5
public ViewResult Details(int id)
{
Userss userss = db.Usersses.Find(id);
return View(userss);
}
//
// GET: /Users/Create

public ActionResult Create()
{
return View();
}

//
// POST: /Users/Create

[HttpPost]
public ActionResult Create(Userss userss)
{
if (ModelState.IsValid)
{
db.Usersses.Add(userss);
db.SaveChanges();
return RedirectToAction(“Index”);
}

return View(userss);
}

//
// GET: /Users/Edit/5

public ActionResult Edit(int id)
{
Userss userss = db.Usersses.Find(id);
return View(userss);
}

//
// POST: /Users/Edit/5

[HttpPost]
public ActionResult Edit(Userss userss)
{
if (ModelState.IsValid)
{
db.Entry(userss).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction(“Index”);
}
return View(userss);
}

//
// GET: /Users/Delete/5

public ActionResult Delete(int id)
{
Userss userss = db.Usersses.Find(id);
return View(userss);
}

//
// POST: /Users/Delete/5

[HttpPost, ActionName(“Delete”)]
public ActionResult DeleteConfirmed(int id)
{
Userss userss = db.Usersses.Find(id);
db.Usersses.Remove(userss);
db.SaveChanges();
return RedirectToAction(“Index”);
}

protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}

————————————————————————————————————-
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source = {
datatype: “json”,
datafields: [
{ name: ‘Id’ },
{ name: ‘Name’ },
{ name: ‘Surname’ },
{ name: ‘Birthdate’, type: ‘date’ },
{ name: ‘Birthplace’ },
{ name: ‘Glasses’ },
{ name: ‘Children’ }
],
url: ‘Users/GetUsers’,
filter: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘Rows’,
beforeprocessing: function (data) {
source.totalrecords = data.TotalRows;
}
};
var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function (xhr, status, error) {
alert(error);
}
});
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid({
width: 920,
source: dataadapter,
showfilterrow: true,
sortable: true,
filterable: true,
virtualmode: true,
selectionmode: ‘multiplecellsextended’,
pagesize: 15,
rendergridrows: function (obj) {
return obj.data
},
columns: [
{ text: ‘Id’, datafield: ‘Id’, width: 100 },
{ text: ‘Name’, datafield: ‘Name’, width: 150 },
{ text: ‘Surname’, datafield: ‘Surname’, width: 150 },
{ text: ‘Birthdate’, datafield: ‘Birthdate’, width: 200 },
{ text: ‘Birthplace’, datafield: ‘Birthplace’, width: 150 },
{ text: ‘Glasses’, datafield: ‘Glasses’, width: 75 },
{ text: ‘Children’, datafield: ‘Children’, width: 75 }
]
});
});
</script>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”>
</div>
</div>

…..

I can filter. I can sort either even when i’m filtering than sorting the table it goes correct but when I’m scrolling down it has that error. How can fix it please help ;_;

[Basar CavitParticipant]

https://www.dropbox.com/s/gv93z40kp7evck4/sample.avi?dl=0

[Peter StoevKeymaster]

Hi Basar,

Try with jQWidgets 3.8.2, if you do not use it. Are you sure that this is the full code? Remove pagesize: 15 – you do not have paging enabled so remove this part. Another option is to enable paging by setting pageable: true.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Basar CavitParticipant]

I try with 3.8.2,
Yes this is full code, It is a MVC Sample,
I removed the pagesize:15 it didn’t make change,
I enabled the paging by pageable: true , finally it has correct result but i have a task which i need to success. So as a intern i should complete this task with no paging. I have to scroll down to results, and i have to figure this “When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.”

[Basar CavitParticipant]

It has infinite loop that i can not understand, when the sorting and filtering together :S. There should be some descriptions about it.

[Basar CavitParticipant]

Can anybody help me ? :S

[Peter StoevKeymaster]

Hi Barar,

You can use: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?arctic as an approach.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Basar CavitParticipant]

Irrelevant T_T

[Author]

Posts