I am trying to create a grid with 4 columns: Field, Operator, Value and a Delete button
The Field column is selectable from a drop down when editing and this I have done using a Action call.
The second column, Operator has a fixed set of operators like '>', '<', '>='. I was hoping to create this list right inside this grid definition. So I chose the overload: columns.ForeignKey(memberName, SelectList) and I have created a SelectList in the second argument. But it does not work and the Operator column is not showing a drop down:
@(
Html.Kendo().Grid<formFilter>()
.Name("gridFilter")
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add");
toolbar.Save().Text("Save").CancelText("Cancel");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Columns(columns =>
{
columns.ForeignKey(c => c.filterName, ds => ds.Read(r => r.Action("fieldNames", "View1", new { className = "View1" })), "filterName", "filterName").Title("Field").Width(200);
columns.ForeignKey(c => c.filterEval, new SelectList(
new List<SelectListItem>
{
new SelectListItem { Text = ">", Value = ">"},
new SelectListItem { Text = "<", Value = "<"},
new SelectListItem { Text = ">=", Value = ">="},
}, "Value", "Text"))
.Title("Operator").Width(200);
columns.Bound(c => c.filterValue).Title("Value");
columns.Command(c => c.Destroy()).Width(50);
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("ErrorHandlerForFilterTable"))
.Model(model =>
{
model.Id(p => new { p.filterId });
})
.Create("createFilter", "View1")
.Read(read => read.Action("getFiltersTable", "View1", new { url = @Context.Request.Path }))
.Update("updateFilter", "View1")
.Destroy(del => del.Action("deleteFilter", "View1"))
)
)
So I just created a .NET 6 ASP.NET Core Web App (Razor Pages), added all telerik stuff according to the instructions (NuGet Packages, scripts and styles in _Layout.cshtml, @addTagHelper-s in _ViewImports.cshtml), and HTMLHelpers are rendering correctly. However, when I provide a data source to the DropDownList or ComboBox, all options show up as undefined.
Telerik version: 2022.2.621. Bootstrap: V5.
Here's the code for DropDownList:
Index.cshtml
@page
@model IndexModel
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
@{
ViewData["Title"] = "Home page";
}
--------------------------------------------------------------------------------
<div class="text-center">
<h1 class="display-4">Welcome</h1>
@(Html.Kendo().DropDownList()
.Name("MyDropdownn")
.DataTextField("Text")
.DataValueField("Value")
.HtmlAttributes(new { style = "width:300px;" })
.AutoBind(false)
.Filter(FilterType.Contains)
.DataSource(ds => ds
.Custom()
.Transport(transport => transport
.Read(r => r
.Url("/Index?handler=Sports")
))
.ServerFiltering(false)
)
)
</div>
Index.cshtml.cs
public JsonResult OnGetSports()
{
var allSports1 = db.Sports.Where(x => x.SportID > 0).Select(x => new DropDownModel
{
Text = x.Name,
Value = x.SportID
}).ToList();
return new JsonResult(allSports1);
}
Proof that the data isn't empty/undefined
DropDownModel.cs (DropDownModel class)
public class DropDownModel
{
public int Value { get; set; }
public string Text { get; set; } = String.Empty;
}
I've tried restarting everything, double-checking everything but nothing helped. Is there a bug with this version of telerik, is something incompatible with ,NET 6 or Bootstrap 5? Or am I doing something wrong?