How to fill xGrid with Large Data with Connection SQL DB

[Basar CavitParticipant]

Hi all.
I’m intern in a software company. Now they gave me a task/challenge to success but i couldn’t find any way to achieve it. First step 500k Users in db with random values which is done.Any way the task is, The grid should show the columns in the grid and when i scroll down, it will render the new Users with own datas.

public static string Users()
{
DataSet ds = new DataSet();
SqlConnection myConn = new SqlConnection(ConfigurationManager.ConnectionStrings[“connectionStr”].ConnectionString);

myConn.Open();
SqlCommand myCmd = new SqlCommand(“SELECT * FROM Userss”, myConn);
SqlDataAdapter myAdapter = new SqlDataAdapter(myCmd);
myAdapter.Fill(ds);
string data = JsonConvert.SerializeObject(ds, Formatting.Indented);
myConn.Close();

return data;
}

Output :
{
“Table”: [
{
“Id”: 1,
“SomeInt”: 1,
“Glasses”: true,
“Name”: “mtuxrkxhkl”,
“Surname”: “ughuqhbezk”,
“Birthplace”: “xwsugvyxdw”,
“Birthdate”: “2015-02-27T06:30:48.527”,
“TcNo”: 164.0,
“Children”: 25106.0
},
{
“Id”: 2,
“SomeInt”: 2,
“Glasses”: true,
“Name”: “clbaewvrjs”,
“Surname”: “jvjyuwctoz”,
“Birthplace”: “qkrjgkqhwa”,
“Birthdate”: “2013-12-18T19:14:50.003”,
“TcNo”: 176.0,
“Children”: 50734.0
},
{
“Id”: 3,
“SomeInt”: 3,
“Glasses”: true,
“Name”: “gckegnuukc”,
“Surname”: “ewaysvxdso”,
“Birthplace”: “wpvayobwdp”,
“Birthdate”: “2013-11-05T00:47:48.883”,
“TcNo”: 142.0,
“Children”: 38230.0
}
]
}
——————————————————————————————————————————————————–
<script type=”text/javascript”>
$(document).ready(function () {

var source =
{
datatype: “json”,
datafields: [
{ name: ‘SomeInt’ },
{ name: ‘Name’ },
{ name: ‘Surname’ },
{ name: ‘Birthplace’ },
{ name: ‘Glasses’ }
],
cache: false,
totalrecords: 100,
url: ‘Default.aspx/Users’,
contentType: ‘application/json; charset=utf-8’,
filter: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
};

var render = function (startindex, endindex) {
var returnData = {};
for (var i = startindex; i < endindex; i++) {
var row = {};
row[‘SomeInt’] = ???
row[‘Name’] = ???
row[‘Surname’] = ???
row[‘Birthplace’] = ???
row[‘Glasses’] = ???
returnData[i] = row;
}
return returnData;
}

var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function (xhr, status, error) {
alert(error);
}
});

var rendergridrows = function (param) {
var data = render(param.startindex, param.endindex, param.data);
return data;
}

$(“#jqxgrid”).jqxGrid(
{
source: dataadapter,

filterable: true,
sortable: true,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: rendergridrows,

width: 820,

columns: [
{ text: ‘SomeInt’, datafield: ‘SomeInt’, width: 200 },
{ text: ‘Name’, datafield: ‘Name’, width: 200 },
{ text: ‘Surname’, datafield: ‘Surname’, width: 180 },
{ text: ‘Birthplace’, datafield: ‘Birthplace’, width: 100 },
{ text: ‘Glasses’, datafield: ‘Glasses’ }
]
});
});

What should i fill the part of “???” ?

[Peter StoevKeymaster]

Hi Basar,

Implementation of jqxGRid with Server Paging along with SQL DB and .NET is demonstrated here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-server-side-paging.htm

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team

[Author]

Posts