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>

Partial View in kendo grid column

I have an ajax enabled kendo grid with a client template that displays data from the model to which the row is bound.
(because of ajax, using columns.Template seems not possible.)
#(Html.Kendo().Grid<Model>()
.Columns(columns =>
{
columns.Bound(x => x.SubModel).ClientTemplate("bla #= SomePropertyOfSubModel # bla")
})
.DataSource(dataSource => dataSource.Ajax())
This works basically, but I am not satisfied with the result. For ex., I have problems to make kendo controls in the template work. I would rather hang a partial view in the client template, but did not succeed. The farthest I got was
columns.Bound(x => x.SubModel).ClientTemplate(Html.PartialView("view", //??) //how to bind to SubModel?
.ToHtmlString())
Any help is appreciated.

I think you need .ToClientTemplate() in your kendo control template,
view.cshtml
#(Html.Kendo().NumericTextBox()
.Name("NameHere")
.Min(0)
.HtmlAttributes(new { style = "width:200px" })
.ToClientTemplate()
)
And then,
columns.Bound(c => c.SubModel).ClientTemplate(Html.Partial("view").ToHtmlString());
Edit:
If you want to bind a model to the partial view, you could do
columns.Bound(c => c.SubModel.Property).Template(#<text>Html.Partial("view", item.SubModel)</text>);

Here's another way to accomplish this.
#(Html.PageElement().Kendo().Grid<myModel>()
.Name("GridName")
.Columns(col =>
Html.RenderPartial("Partials/_myDamnedPartial", col)

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/>

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()