Develop Reference

Telerik Grid, Detail view - how to specify route values

I've just started using Telerik, to speed up some of my development, however I'm stuck trying to bring up a normal MVC Details page from a Grid Component.
All I want, is a select button to send the user to something like /Person/Details/5
The reason why I want a separate page (rather than a popup) is that some of the data relationships are complex, and it's better experience that these are displayed in it's own page, rather than a popup.
My model has a few objects, that's why you see the p.person.Title type setup below.
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.person.Title).Width(100);
columns.Bound(p => p.person.Firstname);
columns.Bound(p => p.person.Firstname);
columns.Bound(p => p.person.Surname);
columns.Bound(p => p.person.ABN).Width(210);
columns.Bound(p => p.person.PracticeCode);
columns.Bound(p => p.currentform);
columns.Command(command => { command.Edit(); });
columns.Command(command => { command.Destroy(); });
columns.Command(command => { command.Select(); });
})
.Sortable()
.ToolBar(commands => commands.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(p => p.person.personkey))
.Create(create => create.Action("Create", "Person"))
.Read(read => read.Action("Details", "Person" ))
.Update(update => update.Action("Update", "Person"))
.Destroy(destroy => destroy.Action("Destroy", "Person"))
The grid itself is working fine, however, when someone selects the "Select" button, I want them to go to the /Person/Details/{id} page. Telerik is almost doing it right, it's sending the user to
/Person/Details?grid-mode=select&person.personkey=11 (I actually want /Person/Details/11 )
So, I noticed that the "Read" method has a few different signatures to enable route values, but I just can't seem to rig it up to get the right route values.
I've tried....
.Read(read => read.Action("Details", "Practitioner", p => p.practitioner.drkey ))
and combinations of, but I just can't seem to get the right route value in there.
How do I correctly specify the right route values ?

I ended by solving this with a Template.
Not exactly the outcome I was looking for, but close enough at this stage.
columns.Bound(p => p.person.pkey).Template(#<text>
#Html.ActionLink("Details" , "Details" , new { id = #item.person.pkey })
</text>);
The trick is that a traditional MVC razor action is placed inside a Telerik Template.
It also removed the need for the .Select and .Read rows.

Reordering of Kendo UI Grid columns based on the order of a list of elements

Good day,
I have a list which is having elements, based on that list the grid will be obtained. I've a requirement of changing the order of elements in that list. So when i change the order of list and run the report, the grid is obtaining with the order of before list but not with the newly changed order.
Here is the list:
#Html.ListBox("multiselect_to", Model.AvailableColumnsList, new { #class = "form-control bdr_rad_3", size = "8", multiple = "multiple" })
Here is the Kendo Grid code:
#(Html.Kendo().Grid<Entrada.CustomerPortal.UI.Models.JobReport>()
.Name("JobReportGrid")
.ToolBar(tools => tools.Pdf())
.Pdf(pdf => pdf
.AllPages()
.FileName("Kendo UI Grid Export.pdf")
.ProxyURL(Url.Action("Excel_Export_Save", "JobReports")))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.AllPages(true)
.FileName("Kendo UI Grid Export.xlsx")
.ProxyURL(Url.Action("Excel_Export_Save", "JobReports")))
.ColumnMenu()
.Columns(columns =>
{
columns.Bound(p => p.JobNumber)//.Title("Job <br/> Number")
.Width(colWidth["Job Number"])
.ClientTemplate("<a class='jobReportGridJN' jnum='#=JobNumber#'>" + "#=JobNumber#" + "</a>"+
#" #if(STAT== true) {# <span><img src='" + Url.Content("~/Images/stat-icon.png") + "'> </span>#}#");
columns.Bound(p => p.DictatorID);
columns.Bound(p => p.JobType);//.Title("Job <br/> Type");
columns.Bound(p => p.DeviceGenerated)//.Title("Device <br/> Generated")
.Width(colWidth["Device Generated"]);
columns.Bound(p => p.AppointmentDate)//.Title("Appointment <br/> Date")
.Width(colWidth["Appointment Date"])
.Format(colFormat["Appointment Date"]);
columns.Bound(p => p.InProcess)//.Title("In <br/> Process")
.Width(colWidth["In Process"])
.Format(colFormat["In Process"]);
columns.Bound(p => p.EditingComplete)
.Width(colWidth["Editing Complete"])
.Format(colFormat["Editing Complete"]);
columns.Bound(p => p.JobStatus);//.Title("Job <br/> Status");
columns.Bound(p => p.MRN);
columns.Bound(p => p.Patient);
})
.Groupable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read
.Action("JobSearchPaginationGrid", "JobReports")
.Data("residentsReadData"))
.Events(events => events.Error("error_handler"))
.PageSize((int)ViewData["PageSize"])
.Group(group => group.Add<string>((string)TempData["GridGroupBy"]))
.ServerOperation(true)
)
.Pageable(pager => pager.Messages(Info => Info.Empty("No Results Found")))
.Sortable()
.Resizable(resize => resize.Columns(true))
.Scrollable().Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
)
Image for Kendo UI grid columns before changing the order of list of elements
Image for List after changing the order
So, Can i reorder the Grid columns based on that list elements after changing the order of list?
It would be more helpful, if anyone answer quickly.
Thanks,
Sai

Haven't tried this myself but after a minute of googling there seems to be 2 steps involved in the process of achieving this if I understand it correctly:
First you have to set reorderable to true for the grid
.Reorderable(reorder => reorder.Columns(true))
http://demos.telerik.com/aspnet-mvc/grid/column-reordering
Reordering the columns programatically at list change event:
var grid = $("#JobReportGrid").data("kendoGrid");
grid.reorderColumn(newOrderIndex, grid.columns[currentIndex]);
http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#methods-reorderColumn

Add delete option to Kendo Grid

I have a Kendo UI Grid which displays some data. But now i need to add a delete option, so rows can be deleted as well. But how does this work?
I have added a Destroy method to the Grid. But that's just so it knows what Action to call.
How can i add a delete icon for each row for example to the grid? Or how does this normally work in a Kendo Grid?
This is the code i have so far:
#(Html.Kendo().Grid<DescriptorWithResource>()
.Name("grid")
.PrefixUrlParameters(false)
.Columns(columns =>
{
columns.Bound(x => x.Code).Title(Html.GetResource(KnownComponent, "ManagedDescriptorCode")).Width(250);
columns.Bound(x => x.Description).Title(Html.GetResource(KnownComponent, "ManagedDescriptorDescription")).Width(500);
})
.Pageable(pager => pager.Info(true)
.Refresh(false)
.PageSizes(false)
.PreviousNext(false)
.Numeric(false)
.Enabled(true)
.Messages(m => m.Display(#Html.GetResource(KnownComponent, "Label_TotalRecordsResource"))))
.Scrollable(scrollable => scrollable.Virtual(true))
.Selectable(selectable => selectable.Enabled(false))
.Events(e => e.DataBound("window.KendoExtensions.bindHoverEffect"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.Events(e => e
.RequestStart("window.Management.onDataSourceBinding")
.Error("window.Management.onDataSourceError"))
.Read(read => read.Action("ResultData", "Management"))
.Destroy(destroy => destroy.Action("DeleteRow", "Management"))) // <-- Added
)

You need to declare it via the Command builder.
columns => columns.Command(cmd=>cmd.Destroy())

You can add a html template for that particular column for each rows. In the html template you can have a button or link for the delete. ON CLICK of this button/link you can call your action.
template: '<input type="button" data-id=ID value="Delete" class="popupbutton" id="delButton" onclick="javascript:CheckAck(this);" id="Delete" /><br/>

When attempting to change edit mode for a telerik grid to anything other than 'InLine' I get an error about passing in the wrong model type

I create the grid like so:
Html.Telerik().Grid<myapp.Date>("dates")
.Name("MyGrid")
.Pageable(paging => paging.PageSize(10))
.Sortable()
.Filterable()
.Groupable()
.DataKeys(keys => keys.Add(c => c.id))
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_SelectAjaxEditing", "Dates")
.Insert("_InsertAjaxEditing", "Dates")
.Update("_SaveAjaxEditing", "Dates")
.Delete("_DeleteAjaxEditing", "Dates");
})
.ToolBar(commands => commands.Insert())
.Columns(columns =>
{
columns.Bound(o => o.name);
columns.Bound(o => o.date1);
columns.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.Text);
commands.Delete().ButtonType(GridButtonType.Text);
});
})
.Editable(editing => editing.Mode(GridEditMode.InLine))
.Render();
%>
and it runs fine, but if I change the GridEditMode to be anything other than InLine I get the following error:
The model item passed into the dictionary is of type 'myapp.Date', but
this dictionary requires a model item of type
'System.Nullable`1[System.DateTime]'.
There is a system.DateTime field in the grid, is that the reason for this error?

I suppose this is because the date you are passing as model is not nullable, while the date required to model is nullable, try this after changing the model type to "DATETIME?".
Note: If you are declaring property declare it as DateTime? as your field is nullable.
Thanks
Regards,
Dhaval Shukla

Telerik grid columns change size when using inline editing

I have a telerik grid which uses inline editing.
Something I found it does which is quite annoying is when I start editing a row some of the columns resizes, the delete button dissapears and a 'cancel' button appears next to the edit button in the edit buttons column.
This is what it looks like:
This is how the grid is being created:
<%
Html.Telerik().Grid<myapp.Date>("dates")
.Name("MyGrid")
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.DataKeys(keys => keys.Add(c => c.id))
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_SelectAjaxEditing", "Dates")
.Insert("_InsertAjaxEditing", "Dates")
.Update("_SaveAjaxEditing", "Dates")
.Delete("_DeleteAjaxEditing", "Dates");
})
.ToolBar(commands => commands.Insert())
.Columns(columns =>
{
columns.Bound(o => o.name);
columns.Bound(o => o.date1);
columns.Command(commands => commands.Edit());
columns.Command(commands=> commands.Delete());
})
.Editable(editing => editing.Mode(GridEditMode.InLine))
.Render();
%>

It is the normal way how Telerik Grid behaves.
You can make those columns hidden, if don't need them.
Or may be you can try to use InCell edit mode.