We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<ej:Button ID="Start" runat="server" Type="Button" Text="Start" ClientSideOnClick="start" Width="100px">
</ej:Button>
<ej:Button ID="Stop" runat="server" Type="Button" Text="Stop" Enabled="False" ClientSideOnClick="stop" Width="100px">
</ej:Button>
<div>
<ej:Grid ID="Grid1" runat="server" AllowSelection="False" EnableRowHover="False" ClientIDMode="Static" DataSourceID="SqlData" Query ="new ej.Query().from('Product').select(['OrderID', 'CustomerID', 'Freight', 'EmployeeID', 'ShipCity']).take(5)">
<ClientSideEvents QueryCellInfo="update" />
<Columns>
---------------------------
</Columns>
</ej:Grid>
<asp:SqlDataSource ID="SqlData" runat="server" ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>"
SelectCommand="SELECT * FROM [Orders]"></asp:SqlDataSource>
</div>
</div>
</div>
<script type="text/javascript">
function update(args) {
if (args.column !== undefined && args.column.field === "Freight") {
var $element = $(args.cell);
if (ej.parseFloat(ej.format(args.text, "c")) < 30)
$element.css("background-color", "#5ec026").css("color", "black");
else
$element.css("background-color", "#86dd55").css("color", "black");
}
}
function start() {
timerID = setInterval(refreshGrid, 2000);
$('#<%= Start.ClientID %>').ejButton("instance").disable();
$('#<%= Stop.ClientID %>').ejButton("instance").enable();
}
function stop() {
clearInterval(timerID);
$('#<%= Stop.ClientID %>').ejButton("instance").disable();
$('#<%= Start.ClientID %>').ejButton("instance").enable();
}
function refreshGrid() {
var model = $('#<%= Grid1.ClientID %>').ejGrid("model");
for (var i = 0; i < model.dataSource.length; i++) {
model.dataSource[i].Freight = Math.floor(Math.random() * 50 + 1);
model.dataSource[i].EmployeeID = Math.floor(Math.random() * 100);
model.dataSource[i].OrderID = Math.floor(Math.random() * 5) * 10;
}
$('#<%= Grid1.ClientID %>').ejGrid("refreshContent");
}
</script>
|
|
<ej:Grid ID="Grid1" runat="server" DataSourceID="SqlData"
Query ="new ej.Query().from('Orders').select(['OrderID', 'CustomerID', 'EmployeeID', 'ShipCity', 'Freight']).take(5)">
<Columns>
----------------
</Columns>
</ej:Grid>
<asp:SqlDataSource ID="SqlData" runat="server" ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>"
SelectCommand="SELECT * FROM [Orders]"></asp:SqlDataSource>
|
|
[GridFeatures.aspx]
<ej:Grid ID="Grid1" runat="server"
Query ="new ej.Query().from('Orders').select(['OrderID', 'CustomerID', 'EmployeeID', 'ShipCity', 'Freight']).take(10)">
<DataManager URL="GridFeatures.aspx/Data" Adaptor="WebMethodAdaptor" />
<ClientSideEvents QueryCellInfo="update" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="110" />
</Columns>
</ej:Grid>
----------------------
[GridFeatures.aspx.cs]
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object Data(Syncfusion.JavaScript.DataManager value)
{
var datatable = GetGridDT();
var emp = (from DataRow row in datatable.Rows
select new OrderTable
{
OrderID = Convert.ToInt32(row["OrderID"]),
CustomerID = row["CustomerID"].ToString(),
EmployeeID = Convert.ToInt32(row["EmployeeID"]),
ShipCountry = row["ShipCountry"].ToString()
}).ToList();
IEnumerable Data = emp.ToList();
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString());
DataTable dt = new DataTable("Employee");
SqlCommand cmd = new SqlCommand();
cmd.Connection = myConnection;
cmd.CommandText = "select * from Employees";
cmd.CommandType = CommandType.Text;
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = cmd;
if (myConnection.State == ConnectionState.Closed)
{
myConnection.Open();
}
da.Fill(dt);
List<object> dropObj = new List<object>();
//read data from the SQL table
using (SqlDataReader dr = cmd.ExecuteReader())
{
while (dr.Read())
{
//Convert Table rows to text/value pair
dropObj.Add(new { text = dr.GetValue(0).ToString(), value = dr.GetValue(0) });
}
}
int count = emp.AsQueryable().Count();
Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();
if (value.Skip != 0)
{
Data = operation.PerformSkip(Data, value.Skip);
}
if (value.Take != 0)
{
Data = operation.PerformTake(Data, value.Take);
}
return new { result = Data, count = count };
}
|
Hello dear Syncfusion.
But how to realize autorefresh? For example 1 time in 5 sec.
|
<ej:Grid ID="Grid1" runat="server"
Query ="new ej.Query().from('Orders').select(['OrderID', 'CustomerID', 'EmployeeID', 'ShipCity', 'Freight']).take(10)">
<DataManager URL="GridFeatures.aspx/Data" Adaptor="WebMethodAdaptor" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="110" />
<ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="90" Format="{0:C}" />
</Columns>
</ej:Grid>
</div>
<ej:Button ID="Start" runat="server" Type="Button" Text="Start" ClientSideOnClick="start" Width="100px"></ej:Button>
<ej:Button ID="Stop" runat="server" Type="Button" Text="Stop" Enabled="False" ClientSideOnClick="stop" Width="100px"></ej:Button>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#sampleProperties").ejPropertiesPanel();
});
function start() {
timerID = setInterval(refreshGrid, 60000); // to refresh the Grid in every one minute
$('#<%= Start.ClientID %>').ejButton("instance").disable();
$('#<%= Stop.ClientID %>').ejButton("instance").enable();
}
function stop() {
clearInterval(timerID); // to stop refreshing the Grid.
$('#<%= Stop.ClientID %>').ejButton("instance").disable();
$('#<%= Start.ClientID %>').ejButton("instance").enable();
}
function refreshGrid() {
var model = $('#<%= Grid1.ClientID %>').ejGrid("model");
$('#<%= Grid1.ClientID %>').ejGrid("refreshContent"); // to refreshing the Grid
}
</script>
|
