Develop Reference

Make all columns editable when adding a record while existing records only allow some columns to be edited

Problem Description
I am trying to implement a grid using Telerik UI that is used to display/update/create records. The grid is configured to use in-cell editing and for updating, only some of the columns are editable, but when the user adds a record, every cell of the newly added row should be editable. I have already tried to hook the Edit event and make the field editable, however by doing so, not only the Title cell of the new row becomes editable, but also the existing Title cells.
The relevant code sections of the view can be found below.
Data.cshtml
<script>
'use strict';
function onEdit(event) {
if (event.model.isNew()) {
event.model.fields.Title.editable = true;
}
}
</script>
#(Html.Kendo().Grid<DataViewModel>()
.Name("DataGrid")
.Columns(columns =>
{
columns.Bound(model => model.Title);
columns.Bound(model => model.Description);
columns.Bound(model => model.Count);
})
.Editable(edit => edit.Mode(GridEditMode.InCell))
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Events(events => events
.Edit("onEdit")
)
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Read("DataRead", "Data")
.Create("DataCreate", "Data")
.Update("DataUpdate", "Data")
.Model(model =>
{
model.Id(x => x.Id);
model.Field(x => x.Title).Editable(false);
})
)
)
Kendo UI v2020.2.617, Telerik.UI.for.AspNet.Core 2020.2.617

One option would be rather than setting the model editable property and hooking the onEdit event, you could try the following which will call a js function to determine if the column should be editable:
#(Html.Kendo().Grid<DataViewModel>()
.Name("DataGrid")
.Columns(columns =>
{
columns.Bound(model => model.Title).Editable("titleEditable");
columns.Bound(model => model.Description);
columns.Bound(model => model.Count);
})
//truncated for brevity
<script>
function titleEditable(dataItem) {
return dataItem.isNew();
}
</script>

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

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.

Multiline cell in Telerik grid (MVC3)

Using Telerik MVC3 grid, C#, .Net 2010;
I have a grid in my razor view:
#(Html.Telerik().Grid<ProductListItem>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Current.Name).Sortable(true).Filterable(false).Width(150);
columns.Bound(o => o.Categories).Sortable(true).Filterable(false).Width(200);
//other column bindings...
})
.DataBinding(dataBinding => dataBinding.Ajax().Select(Model.GridAjaxRequestAction.ActionName, Model.GridAjaxRequestAction.ControllerName))
.Pageable(settings => settings.Total(Model.TotalRow))
.EnableCustomBinding(true)
.Sortable()
.Filterable()
What i want to do is setting Category column of grid as multiline.
There may be many Category for a Product so the Category cells in grid should be like;
Category0
Category1
Category2
I tried to Join category values with System.NewLine and and assign this values to ProductListItem.Categories property. It does not change. The text is still single line.
Thanks in advance.

Thank you #nekno. I came up with this solution in my case. Sorry to not respond in a while.
in view model:
this.Categories = String.Join("<br>", entity.Categories.Select(o => o.Current.Name));
in view:
columns.Bound(o => o.Categories).ClientTemplate("<#= Categories #>")

If it's easy where you tried to do the join with NewLine, try "<br />" instead of System.NewLine.
Otherwise, what is the data type of your ProductListItem.Categories property? If it's a List<String> or some other IEnumerable, you could use a template column instead of a bound column. You use item to reference the current ProductListItem in the template:
#(Html.Telerik().Grid<ProductListItem>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Current.Name).Sortable(true).Filterable(false).Width(150);
columns.Template(
#<text>
#String.Join("<br />", item.Categories)
</text>)
.Sortable(true).Filterable(false).Width(200);
//other column bindings...
})
.DataBinding(dataBinding => dataBinding.Ajax().Select(Model.GridAjaxRequestAction.ActionName, Model.GridAjaxRequestAction.ControllerName))
.Pageable(settings => settings.Total(Model.TotalRow))
.EnableCustomBinding(true)
.Sortable()
.Filterable()
Another option might be to make a table in the template column, and leave your ProductListItem.Categories as a List, e.g., this.Categories = entity.Categories.Select(o => o.Current.Name).ToList();
#(Html.Telerik().Grid<ProductListItem>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Current.Name).Sortable(true).Filterable(false).Width(150);
columns.Template(
#<text>
<table border=0>
#foreach(var category in item.Categories){
<tr><td>#category</td></tr>
}
</table>
</text>)
.Sortable(true).Filterable(false).Width(200);
//other column bindings...
})
.DataBinding(dataBinding => dataBinding.Ajax().Select(Model.GridAjaxRequestAction.ActionName, Model.GridAjaxRequestAction.ControllerName))
.Pageable(settings => settings.Total(Model.TotalRow))
.EnableCustomBinding(true)
.Sortable()
.Filterable()