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 field 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"))
)
)
I need to send a model to my controller action. I have created a Kendo grid:
Html.Kendo().Grid<XXXX.WebUI.Models.Employees.LocationsListViewModel>()
.Name("EmployeeLocationsGrid")
.Columns(columns => {
columns.Select().Width(45);
columns.Bound(c => c.UIDEmployee).Visible(false);
columns.Bound(c => c.UIDEmployee_Location).Title("Id").Width(50);
if (Model.LocationsEntities != null)
{
columns.ForeignKey(f => f.UIDLocation, Model.LocationsEntities?.Items, "UIDEntity", "Name")
.Title("Location")
.EditorTemplateName("FieldListLocations")
.EditorViewData(new { locations = Model.LocationsEntities.Items })
.Width(200);
}
if (Model.LocationsEntities != null)
{
columns.ForeignKey(f => f.UIDSublocation, Model.SublocationsEntities?.Items, "UIDEntity", "Name")
.Title("Sublocation")
.EditorTemplateName("FieldListSublocations")
.EditorViewData(new { sublocations = Model.SublocationsEntities.Items })
.Width(200);
}
columns.Bound(c => c.Main)
.Title("Main")
.EditorTemplateName("FieldCheckBox")
.ClientTemplate("#= Main ? 'Yes' : 'No' #")
.Width(100);
columns.Bound(c => c.PercentageOfDedication)
.Title("% Dedication")
.EditorTemplateName("FieldNumericTextBox")
.Format("{0} %")
.Width(200);
columns.Bound(c => c.StartDate)
.Title("Start Date")
.ClientTemplate("#= kendo.toString(kendo.parseDate(StartDate), 'dd/MM/yyyy') #")
.EditorTemplateName("FieldDateOnlyPicker")
.Width(200);
columns.Bound(c => c.EndDate)
.Title("End Date")
.ClientTemplate("#= EndDate != null ? kendo.toString(kendo.parseDate(EndDate), 'dd/MM/yyyy') : '<strong>Currently</strong>' #")
.EditorTemplateName("FieldDateOnlyPicker")
.Width(200);
columns.Bound(c => c.Comments)
.Title("Comments")
.EditorTemplateName("FieldTextArea")
.Width(250);
columns.Command(command => {
command.Edit().Text(" ").UpdateText(" ").CancelText(" ").IconClass("bi bi-pencil-square").HtmlAttributes(new { @class = "btn btn-outline-primary", title = "Edit" });
command.Custom("deleteLocation")
.Click("function(e) { var dataItemLoc = this.dataItem($(e.target).closest('tr')); window.i3.OnDeleteEmployeeLocation(dataItemLoc); }")
.Text(" ").IconClass("bi bi-trash3")
.HtmlAttributes(new { @class = "btn btn-outline-primary", title = "Delete" });
}).Title("Actions");
})
.NoRecords(s => s.Template("<span class='ms-3 mt-3'><i class='bi bi-people-fill me-2'></i><strong>This employee was not assigned to any location.</strong></span>"))
.AutoBind(true)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable(sorting => sorting.Enabled(true))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).DragToSelect(false))
.Events(events => events
.Sort("window.i3.OnColumnSorted").Save("window.i3.OnSaveLocation")
)
.DataSource(ds => ds
.Ajax()
.Model(gridModel =>
{
gridModel.Id(entity => entity.UIDEmployee_Location);
gridModel.Field(p => p.UIDEmployee_Location).Editable(false);
gridModel.Field(p => p.UIDEmployee).Editable(false).DefaultValue(Model.UIDEmployee);
gridModel.Field(p => p.UIDLocation).Editable(true);
gridModel.Field(p => p.UIDSublocation).Editable(true);
gridModel.Field(p => p.UIDStatus).Editable(false);
gridModel.Field(p => p.UIDPosition).Editable(false);
})
.Read(r => r.Action("GetAllEmployeeLocations", "Employees", new { EmployeeID = Model.UIDEmployee }))
.Events(events => events
.RequestEnd("window.i3.OnRequestEndLocation")
)
.PageSize(10)
)
)
This data reaches me at this event where I process it:
public OnSaveLocation(e: kendo.ui.GridSaveEvent): void {
e.preventDefault();
const gridLocation = $("#EmployeeLocationsGrid").data("kendoGrid");
const locationsItems: LocationsListViewModel[] = (gridLocation?.dataSource.data() as unknown) as LocationsListViewModel[];
let newLocItem: LocationsListViewModel = (e.model as any) as LocationsListViewModel;
// Fix Date
let startLocationDateNew = new Date(newLocItem.StartDate);
let endLocationDateNew = new Date(newLocItem.EndDate);
let offsetLocationNew = startLocationDateNew.getTimezoneOffset();
startLocationDateNew = new Date(startLocationDateNew.getTime() - (offsetLocationNew * 60 * 1000));
endLocationDateNew = new Date(endLocationDateNew.getTime() - (offsetLocationNew * 60 * 1000));
let newLocationItem: LocationsListViewModel = {
UIDEmployee_Location: newLocItem.UIDEmployee_Location,
UIDEmployee: newLocItem.UIDEmployee,
UIDLocation: newLocItem.UIDLocation,
UIDSublocation: newLocItem.UIDSublocation,
UIDPosition: newLocItem.UIDPosition,
Main: newLocItem.Main,
PercentageOfDedication: newLocItem.PercentageOfDedication,
StartDate: startLocationDateNew.toISOString().split('T')[0],
EndDate: endLocationDateNew.toISOString().split('T')[0],
UIDStatus: newLocItem.UIDStatus,
Comments: newLocItem.Comments
};
}
All the data is well collected except Sublocations is set to null. Where it should be an int ID. I share with you the Template and the model:
@using XXXX.Application.Application.Maintenances.DTOs;
@model int?
@(Html.Kendo().DropDownListFor(m => m)
.DataTextField("Name")
.DataValueField("UIDEntity")
.OptionLabel("Select...")
.BindTo((IEnumerable<GenericMaintenanceEntityDTO>)ViewData["sublocations"]!)
)
@using XXXX.Application.Application.Maintenances.DTOs;
@model int
@(Html.Kendo().DropDownListFor(m => m)
.DataTextField("Name")
.DataValueField("UIDEntity")
.OptionLabel("Select...")
.BindTo((IEnumerable<GenericMaintenanceEntityDTO>)ViewData["locations"]!)
)
interface LocationsListViewModel {
UIDEmployee_Location: number;
UIDEmployee: number;
UIDLocation: number;
UIDSublocation: number;
UIDPosition: number;
Main: boolean;
PercentageOfDedication: string;
StartDate: string;
EndDate: string;
UIDStatus: number;
Comments: string;
}
I have been looking for the problem for quite some time but I can't find it. Can someone help me?
Thanks
.
.
.
@(Html.Kendo().Form<EquipmentViewModel>()
.Name("EquipmentForm")
.Layout("grid")
.Items(items =>
{
items.AddGroup()
.Label("Registration Form")
.Items(i =>
{
i.Add()
.Field(f => f.EquipmentType)
.Label(l => l.Text("Equipment Type"))
.Editor(e =>
{
e.DropDownList()
.DataTextField("ShortName")
.DataValueField("EquipmentTypeID")
.OptionLabel("Select")
.DataSource(source =>
{
source
.ServerFiltering(true)
.Read(read => { read.Url("/Equipment/Index?handler=EquipmentTypesByEquipmentClassID").Data("EquipmentClassData"); });
})
.Enable(isControlEnabled)
.Events(e => { e.Change("OnChangeEquipmentTypeChange").DataBound("OnChangeEquipmentTypeChange"); })
.CascadeFrom("EquipmentClass");
});
i.Add()
.Field(f => f.EquipmentDesign)
.Label(l => l.Text("Equipment Design"))
.Editor(e =>
{
e.DropDownList()
.DataTextField("ShortName")
.DataValueField("EquipmentDesignID")
.OptionLabel("Select")
.DataSource(source =>
{
source
.ServerFiltering(true)
.Read(read => { read.Url("/Equipment/Index?handler=EquipmentDesignByEquipmentTypeID").Data("EquipmentTypeData"); });
})
.CascadeFrom("EquipmentType")
.Enable(false)
.Events(e => { e.Change("OnChangeEquipmentDesignChange").DataBound("OnChangeEquipmentDesignChange"); });
});
.
.
.
When I try to add a label to a DropDownList, it gives me a syntax error as if the property doesn't exist. Thoughts?
CS1929
'DropDownListBuilder' does not contain a definition for 'Label' and the best extension method overload 'HtmlHelperLabelExtensions.Label(IHtmlHelper, string)' requires a receiver of type 'Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper'
@(Html.Kendo().DropDownList() .Name("PrimaryAnalystId") .Label(label => label.Content("Primary Analyst")) .OptionLabel("[Select a person]") .DataTextField("Person") .DataValueField("PersonId") .DataSource(s => s.Read(r => r.Action("GetPeople", "Utility", new { type = "analyst" }))) .HtmlAttributes(new { required = "required", validationmessage = "Primary analyst is required." }))
Hi,
The following code snippet is passing validation incorrectly. It is marked on the field and model as Required but is not being flagged as such when no option is selected.
HTML5 (form):
<div class="form-floating mb-3">
@(Html.Kendo().DropDownListFor(m => m.PrimaryAnalystId).OptionLabel(new { Person = "[Select a person]", PersonId = 0 }).DataTextField("Person").DataValueField("PersonId").DataSource(s => s.Read(r => r.Action("GetPeople", "Utility", new { type = "analyst" }))).HtmlAttributes(new { @class = "form-select", required = "required" }))
<label asp-for="PrimaryAnalystId">Primary Analyst</label>
</div>
C# (model):
[Required]
public int PrimaryAnalystId { get; set; }
TS/JS (validator):
const validator = $("#form1").kendoValidator({ validationSummary: { container: "#summary" } }).data("kendoValidator");
$(function () {
$("#submit").on("click", function (event) {
event.preventDefault();
if (validator.validate()) {
alert('valid');
} else {
alert('invalid');
}
});
});
I'm using DropDownList in grid as EditorTemplate. If no value is selected I get a message that says "The Id field is required". How to change the message or remove it completely?
Hi All,
We have a table for managing a business process that needs to display an item from the inventory tables. Therefore we need the column showing what Item a record will use to be a ForeignKey column. We have had various problems getting this to work, and our best solution so far is still not functional. The DropDownList just closes as soon as you click into it. It is bound with server filtering.
The column definition:
columns.ForeignKey(p => p.ItemMasterId, ds => ds.Read(r => r.Action("ItemMasters", "MasterMix")), "ItemId", "ItemName", true)
.Title("Item Name").Width(500).EditorTemplateName("ItemMasterDropDownEditor");
The editor template:
@model object
@(Html.Kendo().DropDownListFor(model => model)
.DataSource(source =>
{
source.Read("ItemMasters", "MasterMix").ServerFiltering();
})
.Filter(FilterType.Contains)
.DataValueField("ItemId")
.DataTextField("ItemName")
)
The server-side call:
public ActionResult ItemMasters(string text)
The list is working correctly showing all we need. We just can't get the dropdown to stay open and have the cursor in the filter search text box.
Thanks in advance... Bob Graham
I need to find refresh values of DropDownList programmatically. That's what I tried:
let nameDropDownList = $('#Configs').getKendoDropDownList();
console.log(nameDropDownList);
console.log(nameDropDownList.datasource);
nameDropDownList.datasource.read();
nameDropDownList.value(currentConfigName);
When read is called, I get:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'read')
Log shows me, that datasource is undefined.
DropDownList definition: @(Html.Kendo().DropDownList()
.Name("Configs")
.DataTextField("Name")
.DataValueField("Name")
.Filter(FilterType.StartsWith)
.DataSource(s =>
{
s.Read(r => r.Action("Read", "FilteringTable"));
}))