<div id="elem">
<div id="Grid"></div>
</div>
<script type="text/javascript">
$(function () {
$("#elem").ejWaitingPopup({
showOnInit: true,
text: "Loading Grid....!!!"
});
var collectColumns = ej.DataManager({
url: "/Home/collectColumns",
adaptor: new ej.UrlAdaptor()
})
var promise = collectColumns.executeQuery(new ej.Query());
promise.done(function (e) {
var fields = e.result.cols, cols = [];
for (var c = 0; c < fields.length; c++) {
cols.push({ field: fields[c] });
}
$("#elem").ejWaitingPopup("hide");
$("#Grid").ejGrid({
dataSource: ej.DataManager({
url: "/Home/DataSource",
adaptor: new ej.UrlAdaptor()
}),
. . ..
. . .
columns: cols
});
})
});
</script>
public ActionResult collectColumns() {
List<string> cols = new List<string>() { "OrderID", "Freight", "CustomerID" };
return Json(new { cols = cols }, JsonRequestBehavior.AllowGet);
} |
Hi, thx for the answer. Everything works.
Are here 2 requests - 1 for columns and 1 for the data ? Is there way with one request ? And the response something like {result:results, columns: columns} to be used.
<div id="elem">
<div id="Grid"></div>
</div>
<script type="text/javascript">
$(function () {
$("#elem").ejWaitingPopup({
showOnInit: true,
text: "Loading Grid....!!!"
});
var collectColumns = ej.DataManager({
url: "/Home/GridData",
adaptor: new ej.UrlAdaptor()
})
var promise = collectColumns.executeQuery(new ej.Query());
promise.done(function (e) {
var fields = e.result.colums, cols = [];
for (var c = 0; c < fields.length; c++) {
if (fields[c] == "OrderID")
cols.push({ field: fields[c], isPrimaryKey: true });
else
cols.push({ field: fields[c] });
}
$("#elem").ejWaitingPopup("hide");
$("#Grid").ejGrid({
dataSource: e.result.result,
columns: cols
});
})
});
</script>
public ActionResult GridData(DataManager dm)
{
IEnumerable Data = OrderRepository.GetAllRecords().Take(30).ToList();
DataOperations operation = new DataOperations();
int count = Data.AsQueryable().Count();
List<string> cols = new List<string>() { "OrderID", "Freight", "CustomerID" };
return Json(new { result = Data, count = count, colums = cols }, JsonRequestBehavior.AllowGet);
}
|
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
var customadaptor = new ej.UrlAdaptor().extend({//extend the adaptor
processResponse: function (data, ds, query, xhr, request, changes) {
var fields = data.colums, cols = [];
if (fields.length) {
for (var c = 0; c < fields.length; c++) {
if (fields[c] == "OrderID")
cols.push({ field: fields[c], isPrimaryKey: true });
else
cols.push({ field: fields[c] });
}
//extend the Grid Columns
ej.createObject("columns", cols, $("#Grid").ejGrid("model"));
//Refresh the Grid header
$("#Grid").ejGrid("refreshHeader");
}
return this.base.processResponse.apply(this, [data, ds, query, xhr, request, changes]);
}
});
$("#Grid").ejGrid({
dataSource: ej.DataManager({
url: "/Home/GridData",
adaptor: new customadaptor()
}),
load: function (args) {
//update headers for column
this.model.dataSource.dataSource.headers = [{ requiresCols: true }];
},
dataBound: function (args) {
//update headers for column
this.model.dataSource.dataSource.headers = [{ requiresCols: false }];
},
//demo column
columns: ["demo"]
});
});
</script>
public ActionResult GridData(DataManager dm)
{
IEnumerable Data = OrderRepository.GetAllRecords().Take(30).ToList();
DataOperations operation = new DataOperations();
int count = Data.AsQueryable().Count();
if (dm.Skip != 0) //Paging
{
Data = operation.PerformSkip(Data, dm.Skip);
}
if (dm.Take != 0) //Paging
{
Data = operation.PerformTake(Data, dm.Take);
}
List<string> cols = new List<string>();
bool isTrue = bool.Parse(Request.Headers["requiresCols"].ToString());
if (isTrue)
cols = new List<string>() { "OrderID", "Freight", "CustomerID" };
return Json(new { result = Data, count = count, colums = cols }, JsonRequestBehavior.AllowGet);
} |