What is the way to sort Telerik's RadGrid ? I don't want to add a form server tag, and I don't want to use a user control with code behind like an example I've seen (since I think these are not true MVC solutions, am I right ?).
Please point me to an example or post example code...
Thanks in advance.
For your telerik questions you should go to http://www.telerik.com/community/forums.aspx
Their support is great and if the forums don't cut it just send a formal request, you will need to create a demo project with your problem. I have used telerik products for years and they never fail to answer your question within a few days.
The demo site is also a great source of knowledge (linked above by robert)
Guido
I am using the ASP.NET MVC open source Telerik controls. Here is an example of how I'm using the sort. It works for server control or Ajax but I've found that the Ajax grid is more touchy as far as it creating circular reference errors.
This Ajax example sorts by two columns. The logic is the same for server binding.
#(Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(c => c.category_id ))
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("AjaxGridSelect", "CategoryTree")
.Insert("GridInsert", "CategoryTree", new { GridEditMode.PopUp, GridButtonType.ImageAndText })
.Update("GridUpdate", "CategoryTree", new { GridEditMode.InLine, GridButtonType.ImageAndText })
.Delete("GridDelete", "CategoryTree", new { GridEditMode.InLine, GridButtonType.ImageAndText }))
.Columns(columns =>
{
columns.Bound(p => p.category_name).Width(150);
columns.Bound(p => p.status_cd).Width(100);
columns.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.ImageAndText);
commands.Delete().ButtonType(GridButtonType.ImageAndText);
}).Width(180).Title("Commands");
})
.Editable(editing => editing.Mode(GridEditMode.InLine))
.Pageable(paging => paging.PageSize(50)
.Style(GridPagerStyles.NextPreviousAndNumeric)
.Position(GridPagerPosition.Bottom))
.Sortable(o => o.OrderBy(sortcol =>
{
sortcol.Add(a => a.category_name);
sortcol.Add(a => a.add_date);
})
.Filterable()
.Groupable()
.Selectable())
Related
#(Html.Kendo().Grid<...>()
.Columns(columns =>
{
columns.Bound(j => j.Type);
columns.Bound(j => j.Code);
})
.Sortable(s => s.Enabled(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Sort(p => { p.Add("Code").Ascending(); p.Add("Type").Ascending(); })
.Model(model => model.Id(j => j.ID))
.Read(...)
.ServerOperation(true)
)
)
I have a Kendo MVC Grid as above and want to sort it first by type, then by code.
I have found such implementation on official Telerik forum: Default Grid Sorting
However it seems it fails to work...
The records are sorted by two columns, and apparently it is sorted by Type, but it fails to sort by Code afterwards...As Default should after CG...
What am I missing and how can I fix the problem?
For anyone else looking for a solution, using the model property names worked for me, i.e.
.Sort(s =>
{
s.Add("Code").Ascending();
s.Add("Type").Ascending();
})
Try this way
.Sort(p=> {p.Add(s=>s.Code).Ascending(); p.Add(s=>s.Type).Ascending();})
I recently migrated a web application from Telerik Mvc to Kendo UI,
but I'm running into a snag that I'm not too sure how to modify since
I've been learning more about and getting used to Kendo UI the past week.
Here is the problem I'm running into. The error states:
The call is ambiguous between the following methods or
properties: 'System.Linq.Enumerable.Where<Model_OpenAccess_AssetMgr.Custody>
(System.Collections.Generic.IEnumerable<Model_OpenAccess_AssetMgr.Custody>,
System.Func<Model_OpenAccess_AssetMgr.Custody,bool>)'
and 'System.Linq.Enumerable.Where<Model_OpenAccess_AssetMgr.Custody>
(System.Collections.Generic.IEnumerable<Model_OpenAccess_AssetMgr.Custody>,
System.Func<Model_OpenAccess_AssetMgr.Custody,bool>)'
And the code where the error is occurring is below:
#model List<Model_OpenAccess_AssetMgr.Custody>
<div id="AssetDescription" class="detailContainer detailContainer3">
<header class="sectionheader" > Custodians </header>
#(Html.Kendo().Grid(Model.Where(x=>x.Active==true))
.Name("grd_Admin_Custodians")
.HtmlAttributes(new { #class = "ItemsGrid" })
.ToolBar(commands => commands.Create())
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(o => o.Custody_PK))
)
.DataSource(dataSource => dataSource
.Server()
.Read(read => read.Action("AdminHome", "Admin", new { view ="Custodies" }))
.Create("Create", "Admin", new { id = 0, view = "Custodies" })
.Update("Save", "Admin", new { view = "Custodies" })
.Destroy("Delete", "Admin", new { view = "Custodies" }))
.Columns(columns =>
{
columns.Bound(o => o.Custody_Name).Width(200);
columns.Bound(o => o.Custody_Dept).Width(150);
columns.Bound(o => o.Custody_eraider).Width(130);
columns.Bound(o => o.Custody_Type).Width(130);
columns.Bound(o => o.Custody_Email).Width(220);
{
commands.Edit();
commands.Destroy();
}).Width(210);
}
)
.Scrollable(scrolling => scrolling.Enabled(true)}
.Scrollable(scrolling => scrolling.Height(550))
.Pageable()
.Sortable()
)
</div>
)
(Model.Where(x=>x.Active==true) is what is being flagged.
Now, I also have a warning listed at the top underneath
#model List that states:
ASP.NET runtime error: Method not found 'Void
System.Web.Razor.RazorEngineHost.set_EnableInstrumentation(Boolean)'
Which I'm quite certain is interconnected with the error I'm getting.
Do I need to modify the Model.Where() statement somehow?
What do you think I should use instead for Kendo UI?
On another note I recently upgraded this web application project from MVC3 to MVC4
so I don't know if that has anything to do with this or not. But I wanted to go ahead
and let you know of that fact as well.
I've looked at other responses but it appears no one has asked about this for Kendo UI specifically.
Thanks!
It looks to me like you are mixing Server side rendering and Ajax rendering. If using Server side rendering of your grid, you should perform the Where(x=>x.Active==true) filtering in your Model (preferably) or in the Controller Action (less ideal) that uses this view. Not in the view.
If using an Ajax to get the data, say for a paged grid, your datasource needs a read method like
.Read(read => read.Action("Custodians", "Admin"))
I have a kendo UI grid which is similar to this
#(Html.Kendo().Grid<MyViewModel>()
.Name("MyGrid")
.Columns(columns =>
{
columns.Bound(a => a.column1);
columns.Bound(a => a.column2;
}
.Pageable(page => page.PageSizes(true))
.Scrollable(src => src.Height("auto"))
.Sortable()
.Filterable()
.Reorderable(reorder => reorder.Columns(true))
.ColumnMenu()
.Events(e =>
{
e.DataBound("onDataBound");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetMyList_Read", "MyController"))
)
)
The datasource on this grid is loaded from "GetMyList_Read" action upon page load. I have a filter which works by pushing filter parameters into the kendo builtin filters. And it works fine. I want to do search on the serverside code to improve performance, instead of loading the whole data to the client side and filter. Also one of the search parameters require searching a new DB table evertime search is performed so having a server side filer will help a lot.
You can just alter your read action to include
.Read(read => read.Action("GetMyList_Read", "MyController").Data("AddFilters"))
Then add some JavaScript to populate you filters something like this:
<script>
Function AddFilters()
{
Return { filter: "some value");
}
</script>
Then just alter your read action to accept the additional parameter.
Eg public jsonresult GetMyList_Read([DataSourceRequest] DataSourceRequest request, string filter)
Hopefully this gives you enough to work with but if you need a more complete example let me know and I will post something a bit more complete
I've just been looking at the source code for the Telerik MVC extensions and can't for the life of me work out how the template columns work. I can get them to work just fine, but I'm trying to understand what is happening under the hood, as I think they are really useful. I've stepped through the source code but I'm still a bit confused. Here's an example from the source code's example project.
Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Template(c => {
%><img
alt="<%= c.CustomerID %>"
src="<%= Url.Content("~/Content/Grid/Customers/" + c.CustomerID + ".jpg") %>"
/><%
}).Title("Picture");
columns.Bound(c => c.ContactName).Title("Name");
columns.Bound(c => c.Phone);
})
.Sortable()
.Scrollable(scrolling => scrolling.Height(250))
.Pageable()
.Render();
The columns => {} delegate is of type Action<GridColumnFactory<T>>
where Model is IEnumerable<T> and the c=>{} delegate is of type Action<TModel> . That much I understand, the Template method on the GridColumnFactory is given an action as a parameter.
How is this action used to render the required HTML?
Thanks !!!
The magic here is that Telerik uses the fact that any content (HTML, JavaScript, etc) inside ASP.NET Web Pages is in fact translated into a Response.Write-like call by the page compiler.
For example;
<% Action action = () => { %><h1>Title</h1><% }; %>
Will be translated to something like this C# code:
Action action = () => { Response.Write("<h1>Title</h1>"); };
Once you understand this, it's no different than other methods: for each cell, Telerik simply call the Action you wrote without realizing it, which contains one or more Write calls generated by the compiler.
I have the following code:
#using com.mycompany.myproject.web.ViewModels
#model IEnumerable
#{ Html.Telerik().Grid(Model)
.Name("Deducciones")
.Columns(columns => {
columns.Bound(p => p.IdDeducciones).ClientTemplate("");
columns.Bound(p => p.FechaInscripcion).Width(50);
columns.Bound(p => p.FechaFin).Width(400);
})
.DataBinding(dataBinding => dataBinding
//Ajax binding
.Ajax()
//The action method which will return JSON
.Select("DeduccionesAjax", "Empleados", new { id = ViewBag.Id })
)
.Pageable(pager => pager.PageSize(2))
.Sortable()
.Render(); }
The grid renders fine but only uses the client template when I go to page 2 for instance. On the initial load it doesn't use it.
As a workaround I added .Template(#<text><a href='#'>#item.IdDeducciones</a></text>); after the ClientTemplate and now it works on both the initial load and afterwards. However this seems strange as none of the examples or docs I've seen specify both a Template and a ClientTemplate.
Is there something I'm missing that's making the first load not come from Ajax or something similar?
Thanks in advance.
As I replied in the forum thread which you opened in the Telerik forums this is expected and documented. Client templates apply only when doing client binding (such as ajax). Templates are applied during server binding such as :
Html.Telerik().Grid(Model)