I'm a newbie in MVC and Kendo UI, use the Kendo UI MVC to create the Grid using Ajax binding, and add combobox in one column using editor template. When i select in combobox, it will display DataValueField in the column (DistDetSubName), But the column DistDetID don't display something.. How can i get DataTextField combobox in this column (DistDetID) ???
Grid with editor template in column like below code :
columns.Bound(e => e.BatNbr).Hidden(true);
columns.Bound(e => e.RecordID).Hidden(true);
columns.Bound(e => e.DistDetID).EditorTemplateName("test");
columns.Bound(e => e.DistDetSubName);
Code in test.cshtml in Editor Templates folder:
#model string
#(Html.Kendo().ComboBox()
.Name("DistDetSubName")
.DataTextField("DistDetID")
.DataValueField("DistDetSubName")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDist", "DM");
})
.ServerFiltering(false);
})
Code in test.cshtml in Editor Templates folder:
#model string
#(Html.Kendo().ComboBox()
.Name("DistDetID")
.DataTextField("DistDetSubName")
.DataValueField("DistDetID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDist", "DM");
})
.ServerFiltering(false);
})
Refrence Link
Related
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>
When I am using a MutliSelect Kendo control, it is not populating the pre selected items. e.g. when it loads it is not loading the ones define in my model
Model.WheelsetExchanges[i].ReasonCodeIds
The kendo control looks like this
#(Html.Kendo().MultiSelectFor(x => Model.WheelsetExchanges[i].ReasonCodeIds)
.Placeholder("Select Reason Code...")
.DataTextField("Value")
.AutoClose(false)
.DataValueField("Id")
.HtmlAttributes(new { #class = "multiselect--clause" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetWerReasonCodes", "ReferenceData");
})
.ServerFiltering(true);
})
)
Any idea why the previous selected reason codes are not being displayed when I load the page?
It seems okay what you're doing on the view- but can you check whether you're getting data on the server side?
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)
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/>
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()