I'm using Kendo UI in my ASP.Net webforms.
Is there any way to bind data to Kendo UI controls in server side, since the client side binding costs the performance speed.
I guess the component you are trying to bind is a grid. Here is one snippet I use. Feel free to activate and deactivate options. Please see the examples at https://demos.telerik.com/aspnet-mvc/grid/serverbinding
#model IEnumerable<yourProject.Models.modelName>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.col1).Groupable(false);
columns.Bound(p => p.col2);
columns.Bound(p => p.col3);
columns.Bound(p => p.col4);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
)
Related
I am using Telerik's UI for ASP.NET Core and I am trying to user server side template for Grid column like below
#(Html.Kendo().Grid<GridModel>()
.Name("Grid")
.Columns(col =>
{
col.Template(#<text>
<input type="checkbox" value="#item.ID"/>
</text>);
col.Bound(p => p.Amount).Title("Amount").Format("{0:C}");
col.Bound(p => p.DueDate).Title("Due Date").Format("{0:MM/dd/yyyy}");
})
.AutoBind(false)
.Pageable()
.Sortable()
.Resizable(resize => resize.Columns(true))
.Scrollable()
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.ID);
})
.Read(read =>
{
read.Action("GetData", "MyController");
})
).Deferred())
However, on this line value="#item.ID" VS 2017 throws error as
Cannot convert lambda expression to type 'string' because it is not a
delegate type
Since your grid is Ajax bound and not server bound, you should use ClientTemplate instead. As per API:-
If the Grid is Ajax-bound, use the ClientTemplate method. The value
should be a string, which represents a valid Kendo UI Template.
You need to use client template like this:-
col.Template(#<text></text>)
.ClientTemplate("<input type='checkbox' value='#= data.ID #"/>");
Please Note: We need Template here only if you don't have any Bound column (as shown in API) otherwise you can use Bound + ClientTemplate directly.
col.Template("<input type='checkbox' value='#= data.ID #"/>");
This is the solution
I have a simple app that is a set of Kendo UI windows containing datagrids. As soon as its running, its a huge strain on the system and visual grinds to a halt.
Its Chrome that is having the issues regardless of the project running or not, if those pages are loaded and just doing nothing other than sitting there in the browser, the computer is extremely slow
Wondering if anyone had similar issues, how to troubleshoot / resolve.
Some sample grid code
#{
Layout = null;
}
#(Html.Kendo().Grid<DashboardViewModel.Payment>()
.Name(Guid.NewGuid().ToString())
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("paymentId").Descending())
.Read(read => read.Action("PaymentsJson", "Dashboard"))
)
.Columns(columns =>
{
columns.Bound(c => c.paymentId).Title("Id");
columns.Bound(c => c.business).Title("Business");
columns.Bound(c => c.createdAt).Title("Created").Width(110).DateFormat();
columns.Bound(c => c.coupon).Title("Coupon");
columns.Bound(c => c.quantity).Title("Qty").Width(80).Right();
columns.Bound(c => c.price).Title("Price").Width(100).Right().CurrencyFormat();
columns.Bound(c => c.discount).Title("Discount").Width(100).Right().CurrencyFormat();
columns.Bound(c => c.total).Title("Total").Width(100).Right().CurrencyFormat();
})
.Filterable()
.Pageable()
.Sortable()
.Groupable()
)
This was actually nothing to do with Kendo at all. Thanks to Nicholas who made me question it and isolate.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
This line of code in my template was the issue. Im not even sure how it got there but I dont use or need it. Removing that line fixed my issues. Perhaps that css was conflicting with something in kendo, not sure.
I want to turn on the endless scrolling on a kendo grid, called in this framework as virtual scrolling.
Abstract:
1) I load the page => the Action Virtualization_Read is called (OK)
2) I scroll down the Grid till bottom => the Action Virtualization_Read is called anothter time in order to get more data (KO)
The result is that when I reach the bottom of the grid, with scrollbar, the Action method that retrives the data is not hit anymore.
This is my grid, it shows the traces generated in my application:
#(Html.Kendo().Grid<Credit.Entity.ServiceObjects.MsgBlock>(Model.ListadoTrazas)
.Name("grdTrazas")
.Columns(columns =>
{
columns.Bound(c => c.LogID).Filterable(true);
columns.Bound(c => c.Timestamp).Filterable(false);
columns.Bound(c => c.FormattedMessage).Filterable(false).Width("80%");
})
.Scrollable(s => s.Virtual(true))
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.ServerOperation(true)
.Read(read => read.Action("Virtualization_Read", "Logging"))
)
)
And this is the MVC3 Action that fetches the data. This Action is called only the first time, when the page is loaded:
public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(GetData(request.Page, request.PageSize).ToDataSourceResult(request));
}
[NonAction]
private List<MsgBlock> GetData(int page, int getCount)
{
MVCLogging model = new MVCLogging();
// Fetches the data
return model.ListadoTrazas;
}
The Model MsgBlock has the same properties defined in the Grid Columns method:
LogId
TimeStamp
FormattedMessage
Do I forget anything?
The only potential issue I see here is that you are leveraging server operations on the grid, but initializing the grid with a collection of data instead of letting it fetch the initial data. In the Kendo demo for virtualization using the MVC extensions, the grid definition looks like:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(60);
columns.Bound(o => o.CustomerID).Width(90);
columns.Bound(o => o.ShipName).Width(220);
columns.Bound(o => o.ShipAddress).Width(280);
columns.Bound(o => o.ShipCity).Width(110);
columns.Bound(o => o.ShipCountry).Width(110);
})
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action("Virtualization_Read", "Grid"))
)
)
Notice that after the type is supplied (Kendo.Mvc.Examples.Models.OrderViewModel) there is no initial set of data supplied, whereas your initialization attempts to give the grid the data it needs to render (Model.ListadoTrazas). Perhaps this is confusing the grid into thinking it has all the data is needs? I would try taking out Model.ListadoTrazas and letting the grid reach out for the data from the get go.
I'm tryin to export kendo grid to excel: i tried this method:
http://jsfiddle.net/SZBrt/4/
But i have a kendo grid already that gets data on button click.
I want another button to excel the grid with datas on export button click as mentioned in jsfiddle.
#(Html.Kendo().Grid<KendoGridExportExcelMvc.Models.Sales>()
.Name("Sale")
.Columns(columns =>
{
columns.Bound(p => p.R).Width(100);
columns.Bound(p => p.Cur).Width(100);
columns.Bound(p => p.goods).Width(100);
columns.Bound(p => p.cost).Width(70);
columns.Bound(p => p.isdeleted).Width(60);
})
.Sortable()
.Scrollable()
.HtmlAttributes(new { #style = "Font:12px calibri; " })
.Filterable()
)
how to bring this inside the js file. please help,
Well, dude, you are just rendering HTML.
If you want to generate a real CSV file, just use one of the classes from the System.IO namespace, and write directly to the Response's OutputStream.
See this article for reference on how to do it:
Writing to Output Stream from Action
I am trying to bind a dropdownlist to a telerik grid, so that when the value of the dropdownlist changes the grid will update via ajax to show results. Here is my code so far:
IndexView:
<% Html.RenderPartial("AptProfileFilter"); %>
<%= Html.Telerik().Grid(Model.profiles)//Initial Server Binding
.Name("Profiles").DataBinding(dataBinding => dataBinding
.Ajax()
.Update("_AjaxBinding", "AptProfile", new {id = (string)ViewData["BuildingID"]}))
.Columns(columns =>
{
columns.Bound(p => p.AptProfileID).Width(100);
columns.Bound(p => p.Apartment.Building.Complex.Name).Width(100);
columns.Bound(p => p.Apartment.Building.BuildingID).Width(100);
columns.Bound(p => p.Apartment.AptRate).Width(100);
})
.Pageable()
.Sortable()
I used FireBug to determine that the correct data is being posted( after selecting a element from my dropdownlist)
back to the Data collection in the GridModel class, but I do not understand why it is not updating the Grid with this new data?
I am very new to web development. Thanks for your help!
I've been wrestling with this too. take a look at the link below (bottom of comment), in which I asked the same type of question. In my case, I managed to get this working, but still have some questions about HOW I got it working. Anyway, I hope this helps ... Also, in my case, I'm using Razor views, which you might not be, based upon you use of the <% operators ... Telerik MVC Grid: How to use DropDownList in a column?