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.
Related
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()
)
I'm trying to display two Kendo UI grids on two separate tabs of a Kendo tabstrip. It displays only the grid that is inside the tab with selected option being true. Here is my code:
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(items =>
{
items.Add().Text("Tickets")
.Selected(true)
.Content(
#<text>#(Html.Kendo().Grid((IEnumerable<Bugger.Models.Ticket>)ViewBag.Tickets)
.Name("grid2")
.Columns(columns =>
{
columns.Bound(tickets => tickets.TicketID);
columns.Bound(tickets => tickets.Description);
})
.Pageable()
.Sortable()
)
</text>
);
items.Add().Text("Technicians")
.Content(#<text>#(Html.Kendo().Grid((IEnumerable<Bugger.Models.Technician>) ViewBag.Technicians)
.Name("grid1")
.Columns(columns =>
{
columns.Bound(technician => technician.UserID);
columns.Bound(technician => technician.FirstName);
})
.Pageable()
.Sortable()
)</text>);
}))
I got my solution working. For future reference, I'm posting here.
The problem was that although I included "kendo.all.min.js" into my layout file, "kendo.aspnetmvc.min.js" was not included, an in order for this to work properly, I had to include this second javascript file too.
I added it to my _Layout.cshtml file.
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 have a Hierarchy style Kendo grid and the inner grid doesn't seem to accept client templates. (I stripped the code irrelevant grid configuration columns out )
I really would like the client template to be something like
<a title="#=AlarmStatusDescription#">#=AlarmStatus#</a> but anytime I put anything other than a simple string in the ClientTemplate, the whole grid fails to load.
I've tried
.ClientTemplate("#:AlarmStatus#")
.ClientTemplate("#=AlarmStatus#")
.ClientTemplate("<div class="myclass"></div>") with a separate <script type="text/html" id="myclass">#=AlarmStatus#</script>
#(Html.Kendo().Grid<AccountModel>()
.Name("Accounts_#=Id#")
.Columns(columns =>
{
columns.Command(command => command.Custom("Details").Click("showDetails")).Width(75);
columns.Bound(o => o.AccountName).Width(150);
columns.Bound(o => o.AlarmStatus).Width(100).ClientTemplate("#:AlarmStatus#");`
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>{model.Id(p => p.AccountId);})
.Read(read => read.Action("DetailRead", "Csr", new { personId = #=Id#" }))
)
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.ToClientTemplate()
)
You need to escape the sharp symbols - other way the Outer Grid will try to evaluate this "#:AlarmStatus#" expression. And since most probably there is no such field as AlarmStatus for the Outer Grid (it is property of the Inner one) there will be an exception. If you escape it like this the client template should be skipped by the Outer Grid, and evaluated properly by the Inner Grid.
.ClientTemplate("\\#= AlarmStatus \\#")
I hope you got the idea
You should use: .ClientTemplate("#= AlarmStatus #"). I think that you were missing the quotes ".
I have a grid which contains an id,which is a hyperlink and takes me to a different page.Can anyone help me to achieve this.
Thanks
Assuming that the user is working on Telerik-MVC. Here's a sample code.
Html.Telerik().Grid(Model)
.Name("GridName")
.DataKeys(keys => keys.Add(k => k.Id))
.Columns(columns =>
{
columns.Bound(c => c.Id).Title("ID")
.Template(#<text>#item.RpoId </text>);
columns.Bound(c => c.PropertyA);
columns.Bound(c => c.PropertyB); //And so on...
}
)
.Render();
Have a closer look at how the column is Templated.
If you're willing to use the RadGrid, then there is a type of column called the GridHyperLinkColumn described here: http://www.telerik.com/help/aspnet-ajax/grid-column-types.html
Using RadGrid with MVC: http://www.telerik.com/help/aspnet-ajax/mvc-radgrid-databinding.html
This example shows what it can look like http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/columntypes/defaultcs.aspx.
If not, you'll need to use a GridColumnTemplate with a link in it.