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)
Related
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?
Here is my issue :
I have two project with similar code to display a dropdownlist inside a kendogrid. In the first project all works fine, in the second project i got a textbox dipslaying instead of a dropdown. I've searched around telerik but nothing could resolve my issue. I think something is missing in my project to make this work fine. Or something is blocking it ! But can't find .. Hope you could help me !
Here is my grid :
#(Html.Kendo().Grid<DisplayUniteMultiple>()
.Name("GridDisplayUniteMultiple")
.ToolBar(t => t.Create().Text("Ajouter un couple Valeur/ Unite"))
.Columns(columns =>
{
columns.Bound(c => c.id).Hidden(true);
columns.Bound(c => c.Valeur);
columns.ForeignKey(c => c.Unite, unitesDeConversion, "Value", "Text").Title("Unité").Width(200);
})
.Editable(editable => editable.Mode(GridEditMode.InCell).Enabled(true))
.Events(e => e.Edit("onGridChange"))
.DataSource(datasource => datasource
.Ajax()
.Update(builder => builder.Url(""))
.PageSize(50)
.Batch(false)
.Model(model =>
{
model.Id(uniteMultiple => uniteMultiple.id);
model.Field(uniteMultiple => uniteMultiple.Valeur);
model.Field(uniteMultiple => uniteMultiple.Unite);
})
.ServerOperation(true)
))
You might missing to add the editor template in your project.
Create a new folder named EditorTemplates in ../Views/Shared/ directory, if there is not already. Then create new file named GridForeignKey.cshtml in that folder and copy below code into it, save and try again.
#model object
#(
Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)
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
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 the system is slow the telerik grid shows the 2 empty rows along with one row which contains "ready" text.Please suggest me how to resolve this.
Thanks,
Megha
First of all you can hide your grid on load,
#(Html.Telerik().Grid(Model)
.Name("myGrid")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(100);
columns.Bound(o => o.ContactName).Width(200);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
}).ClientEvents(events => events.OnDataBound("GridOnDataBound"))
......
......
).HtmlAttributes(new {style = "display: none"})
then using onDatabound event you can show your grid when the process finishes
<script>
function GridOnDataBound() {
$('#myGrid').show();
}
</script>