I am just so frurstrated now as Telerik dont have any examle what I need for my situation. All I want is to sort the column by clicking on a column name from client side. If i try to define a ajax select binding that contrdicts with column template. Now, it goes to the default server method which was used to populate grid when a column is clicked, but I dont want that. Even if the solution is to only implement on server side then how can I know the column name ther which user clicked? I cant believe they dont have any clien side column click event or something or sortable method where I can say which column to sort with during runtime
Import Namespace="Telerik.Web.Mvc.UI" %>
<%
@ Import Namespace="Telerik.Web.Mvc.UI.Fluent" %>
<
div class="control-content" id="SearchBrowseGrid" style="height:700px;">
<% Html.Telerik().Grid(Model.BrowseRows)
.Name(
"BrowseGrid")
.Columns(columns =>
{
columns.Template(c =>
{
%>
<img alt="<%= c.IconAlt %>" class="iconMenu" src="<%= Url.Content(c.IconSrc) %>" style="<%= (c.IsTemplate ? "border: solid 2px grey;" : string.Empty) %>" />
<%
}).Width(30);
columns.Bound(c => c.Name).Width(400);
columns.Bound(c => c.Type).Width(100);
columns.Bound(c => c.Description);
columns.Bound(c => c.Path).HtmlAttributes(
new
{
style =
"display:none;width:0;"
}).HeaderHtmlAttributes(
new
{
style =
"display:none;width:0;"
});
})
.Selectable()
.Pageable(paging =>
{
paging.PageSize(20);
})
.DataKeys(d => d.Add<
string>(c => c.Path))
.ClientEvents(e =>
{
e.OnRowSelected(
"BrowseGrid__rowSelected");
// e.OnDataBinding("BrowseGrid__ColumnSelected");
})
.HtmlAttributes(
new
{
id =
"BrowseGrid"
})
.Sortable()
.Render();
%>
<div style="display:none" id="BusinessDefinitionPath"></div>
</
div>
<
script type="text/javascript">
function BrowseGrid__rowSelected(e) {
var bdd = e.row.cells[e.row.cells.length - 1].innerHTML;
$(
'#SearchBrowseGrid #BusinessDefinitionPath').html(bdd);
Display__SearchDetailsDefinition(bdd);
Display__SearchDetailsRelations(bdd);
}
// row selected
function BrowseGrid__ColumnSelected(e) {
var grid = $('#BrowseGrid').data('tGrid');
//Descendingly sort the records by the Name property
grid.orderBy=
"Name";
}
</
script>
3 Answers, 1 is accepted
I don't understand your problem. Sorting in Ajax bound mode is supported out of the box. You can check our sorting online demo.
Server side templates are not however supported in ajax bound mode as there is no way to execute server side code (C#) in the browser which understands only JavaScript. In server side bound mode sorting cannot be done via Ajax. Again in server bound mode sorting is implemented out of the box - you just need to enable it by calling Sortable() during the grid declaration.
Probably you just need to define a ClientTemplate for your column so you can use ajax binding.
Atanas Korchev
the Telerik team
Rank 1
Thanks for your reply. Well, I know that the browser don't understand C#. But I am wondering with my current server side declaration how can I attach any event from where I can catch which column user clicked and sort by that, of course that would be available to the client after parsing and rendering. If the control doest that automatically then I'd say how can i stop it to go to server and just sort on current data. I mean how can I use the .ClientEvents(e => to accomplish my need. I already just used sortable() , what it does it simply goes to the server action what was used to build the model and I don't want it, because it makes all those db calls and stuff. I just want to sort on current data
Currently there is no client-side event for that. Also the grid does not support sorting the current data as it is only a single page. Ajax sorting works like this - the user clicks the header and a request is made to the server which sorts the data and returns only a single page.
Regards,Atanas Korchev
the Telerik team