@(
Html.Kendo().Grid<IndexModel.CompanyFinancialVM>()
.Name("gridCompanyFinancial")
.Navigatable()
.Height(590)
.Sortable()
.Editable(e => e.Mode(GridEditMode.InCell))
.Scrollable()
.ToolBar(t => { t.Save(); t.CancelEdit(); })
.Columns(columns =>
{
columns.Bound(f => f.CompanyName).Title("Company").Width(150);
columns.Bound(f => f.PeriodName).Title("Period").Width(120);
columns.Bound(f => f.VariableName).Title("Variable").Width(150);
columns.Bound(f => f.VariableTypeName).Title("Variable Type").Width(120);
columns.Bound(f => f.Val).Title("Val")
.Width(100)
.Format("{0:n}") // Show 4 decimals and thousand separator
.EditorTemplateName("Decimal");
columns.Bound(f => f.ValCurr)
.Title("Currency")
.ClientTemplate("#= getCurrencyName(ValCurr) #")
.EditorTemplateName("Currency")
.Width(120);
columns.Bound(f => f.QuantumFK)
.Title("Quantum")
.ClientTemplate("#= getQuantumName(QuantumFK) #")
.EditorTemplateName("QuantumFK")
.Width(120);
columns.Bound(f => f.Priority).Title("Priority").Width(80);
columns.Bound(f => f.SpecOrder).Title("Spec Order").Width(100);
columns.Bound(f => f.Rem).Title("Remarks").EditorTemplateName("Rem");
})
.DataSource(ds => ds.Ajax()
.Read(r => r.Url(Url.Content("~/CompanyFinancial/Index?handler=Read")).Data("getGridRequestData"))
.Update(u => u.Url(Url.Content("~/CompanyFinancial/Index?handler=Update")).Data("forgeryToken"))
.Batch(true)
.Model(m =>
{
m.Id(f => f.Nr);
m.Field(f => f.CompanyName);
m.Field(f => f.PeriodName);
m.Field(f => f.VariableName);
m.Field(f => f.VariableTypeName);
m.Field(f => f.Priority);
m.Field(f => f.SpecOrder);
m.Field(f => f.Val);
m.Field(f => f.ValCurr);
m.Field(f => f.QuantumFK);
m.Field(f => f.Rem);
})
.Sort(s => s.Add(f => f.SpecOrder).Ascending())
.PageSize(20)
)
.Pageable()
I can't seem to get the Cascading DropdownList functionality to return the selected value from the parent. I will list what I have and if someone can point out my problem I would appreciate it. The parent loads the selected items correctly, and it calls the child dropdownlist event when a new select is made, but the parameter that should have the selected id is always null.
.cshtml page
<table><tr>
<td>CLIN:</td>
<td>
<kendo-dropdownlist name="ddlCLIN" datatextfield="Title" datavaluefield="ProjectID" >
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="/LogEditor?handler=CLINS" />
</transport>
</datasource>
</kendo-dropdownlist>
</td>
</tr>
<tr>
<td>CLIN Task Type:</td>
<td>
<kendo-dropdownlist name="ddlCLINTaskType" cascade-from="ddlCLIN" datatextfield="Title" datavaluefield="ProjectID">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="/LogEditor?handler=CLINTaskTypes" />
</transport>
</datasource>
</kendo-dropdownlist>
</td>
</tr></table>
html.cs
public JsonResult OnGetCLINTaskTypes(int? ddlCLIN)
I have upgraded our libraries to version 2024.4.1112 and we are experiencing a NullReferenceException when we do this:
<kendo-dropdownlist for="Id" datatextfield="Name" datavaluefield="Id" auto-width="true" class="form-control w-75" required>
If I remove the class declaration and the required tag, page renders just fine.
The breaking change listed on the release notes references a backward compatibility page but has no information specific to the dropdownlist control.
What am I missing?
Hi,
I've looked for a good example to achieve this scenario. Cannot find one so I thought I would ask.
When a person creates a meeting they choose the date and the time of the meeting. Multiple meeting may happen on a single day just not at the same time. This part can be easily coded. The part that I'm having trouble with is when I'm trying to associate a document to one of those meetings that occurred on the same day.
Here's what I'm looking to do:
I click on the calendar control
On the calendar I click the 12th which had multiple meetings:
I select 8:00 am which fills my underlying control.
On the dates that only have one meeting then clicking on the date will just select that one meeting and it's time.
Any examples would be appreciated.
Hi everyone, I am trying to implement the following functionalities with Grid and Server side filtering/paging:
columns.Bound(p => p.TipoSoggetto).Groupable(false).Filterable(ftb => ftb.UI("tipoSoggettoFilter"));
And the script --> function tipoSoggettoFilter(element) { element.kendoDropDownList({ dataSource: { data: ["NPF", "PF"] } }); }
var operatori = _ctx.Users.OrderBy(u => u.Email).Select(e => new SelectListItem
{
Text = e.NomeOperatore,
Value = e.Id.ToString()
}).ToList();
ops.AddRange(operatori);
ViewData["Operatori"] = new SelectList(ops, "Value", "Text");
ViewBag.Operatori = new SelectList(ops, "Value", "Text");
@(Html.Kendo().Grid<AVR.Models.Output.GetAllAvr>()
.Name("AVRgrid")
//.ToolBar(t => t.Search())
.Columns(columns =>
{
columns.Bound(p => p.DataInserimento).Format("{0:dd/MM/yyyy}").Groupable(false);
columns.Bound(p => p.Subject).Groupable(false).Filterable(ftb => ftb.UI("tipoSoggettoFilter"));
columns.ForeignKey(p => p.UserId, (System.Collections.IEnumerable)ViewData["Operatori"], "Text", "Text")
.Title("Operator").Width(200);
columns.Command(command => command.Custom(" ").IconClass("fa-solid fa-eye").Click("showDetails")).Width(45);
})
.Pageable(p => { p.PageSizes(new[] { 10, 20, 30 }); })
.Sortable()
//.Scrollable()
.Groupable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Field(p => p.UserId).DefaultValue(1);
})
.PageSize(10)
.Read(read => read.Action("GetAllFiltered", "AVR"))
)
)
Hello,
Im using angular 16 and .net core 7 version. When i send request to back-end, i can handle. But i have a problem.
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"))
)
)
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"); });
});
.
.
.