Kendo Grid dropdown with fixed set of items

[Abhijit]

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

[Alexander]

Hi Abhijit,

I noticed from your recent thread history, that this is your first inquiry for the Telerik UI for ASP.NET Core realm of components. So in this regard, it is great to have you onboard!

Before proceeding with this thread, I just wanted to mention that your license includes "24h" timely support in cases where you want to speed up the "request -> response" support communication, so to speak.

Regardless, I did notice that the majority of fields are decorated as "cascal-Cased" however the mocked data which is passed directly within the Columns.ForeignKey() API configuration is with "Pascal-Case". 

I presume that this has been done purposefully as the underlying data was not bound correctly if the Model were to have Pascal Case properties. Am I onto something here?

If this is the case, it is important to mention here that the Telerik UI for ASP.NET Core data-bound components obeys to a PascalCased property naming convention. For the JSON responses in particular.

This is to ensure that there is somewhat of a consistency between the declared model and JSON response. However, the ASP.NET Core framework configures "camelCase" as the predominant property casing. This behavior can be altered by adding the following layer of logic to the minimal hosting model:

builder.Services.AddMvc().AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);

More information is available in the following documentation resource that I personally think you might find helpful:

• JSON Serialization Options (Documentation)

This will enable you to transpose the existing configuration as follows:

@(Html.Kendo().Grid<FormFilter>()
	.Name("gridFilter")
	...
	.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);
	})
	...
	.DataSource(dataSource => dataSource
		...
		.Model(model =>
		{
			model.Id(p => new { p.FilterId });
		})
		...                                      
	)
)

This will make the Grid behave the Grid in the following manner for the "FilterEval" ForeignKey:

Regardless, it is fair to say here that I personally find your implementation for the filters quite intriguing. As another recommendation, we also have a Filter component that you can review in case you are curious regarding what functionality it brings to the developer to utilize.

• Filter Basic Usage (Demo)

If you wish to experiment with this approach further or use an existing code base as a stepping stone, I am also attaching a runnable sample for you to examine further.

Kind Regards,
Alexander
Progress Telerik