<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
@(Html.EJ().Grid<OrdersView>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowSorting()
.AllowPaging()
.IsResponsive()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Priority(4).Width(75).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Priority(3).Format("{0:C}").Add();
}))
</div>
<script>
var flag = true;
function start() {
timerID = setInterval(refreshGrid, 2000);
}
function stop() {
clearInterval(timerID);
flag = false;
}
function refreshGrid() {
if(flag)
var data = @Html.Raw(Json.Encode(ViewBag.datasource));
else
var data = @Html.Raw(Json.Encode(ViewBag.data));
var grid = $("#FlatGrid").ejGrid("instance");
grid.dataSource(data);
}
</script> |
<script type="text/javascript">
$(function () {
var dataManager = ej.DataManager({ url: "http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/", crossDomain: true, adaptor: new customAdaptor() });
$('#data_grid').ejGrid({
dataSource: dataManager,
columns: [{
field: "OrderID",
visible: true,
headerText: "Id",
isPrimaryKey: true
},
{
field: "CustomerID",
visible: true,
headerText: "Value"
}
],
allowPaging: true,
pageSettings: { pageSize: 5 },
toolbarSettings: {
showToolbar: false
},
editSettings: {
allowEditing: false,
allowAdding: false,
allowDeleting: false
},
});
})
var customAdaptor = new ej.ODataAdaptor().extend({
processQuery: function (dm, query, hierarchyFilters) {
………………………
return {
type: "GET",
url: tmp.length ? url.replace(/\/*$/, tmp) : url,
ejPvtData: p
};
},
processResponse: function (data, ds, query, xhr, request, changes) {
…………………………….
return { result: data, count: count };
},
})
…………….
</script> |