I am trying to update Kendo Aspnet core grid field while adding a new record in inline editing.
Here are more details.
Start adding a new row in grid -> add programically content to the edit fields.
I have a grid with textArea field called VideoSubtitleText which I am trying to update using javascript code.
Here is my js code
let ttt = $("#VideoSubtitleText").kendoTextArea().data("kendoTextArea"); ttt.value("New subtitle text"); ttt.trigger("change");
And this is my grid
@(Html.Kendo().Grid<VideoSubtitle>
()
.Name("subtitlegrid")
.Filterable()
.Editable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.Scrollable()
.ClientDetailTemplateId("templateSubtitleStyle")
.ToolBar(toolbar =>
{
toolbar.ClientTemplateId("GridToolbarTemplate");
})
.Columns(columns =>
{
columns.Bound(column => column.VideoSubtitleBeginTimeStr).Title("Start Time").Width(70).Filterable(false);
columns.Bound(column => column.VideoSubtitleEndTimeStr).Title("End Time").Width(70).Filterable(false);
columns.Bound(column => column.VideoSubtitleText).Title("Text").Width(380).HtmlAttributes(new { @class = "wrap" });
columns.Command(column =>
{
column.Edit();
column.Destroy();
}).Width(140);
})
.DataSource(ds => ds.Ajax()
.Sort(sort => sort.Add("VideoSubtitleBeginTimeStr").Ascending())
.Read(r => r.Url("/VideoDataDetails?handler=ReadSubtitles").Data("forgeryToken"))
.Update(u => u.Url("/VideoDataDetails?handler=UpdateSubtitle").Data("forgeryToken"))
.Create(c => c.Url("/VideoDataDetails?handler=CreateSubtitle").Data("forgeryTokenAndLocale"))
.Destroy(d => d.Url("/VideoDataDetails?handler=DestroySubtitle").Data("forgeryToken"))
.Model(m => m.Id(id => id.VideoSubtitleId))
.Events(ev => ev.RequestEnd("gridRequestEnd"))
)
.Events(events => events
.Change("onSubtitleSelected")
.Save("onSaveSubtitle")
.SaveChanges("onSaveSubtitle")
.Remove("onRemove")
.Edit ("onSubtitleEdit")
)
.HtmlAttributes(new { style = "height: 600px;" })
)
JS code updates the grid field (VideoSubtitleText) correctly first time. However I need to update same field multiple times.
This causes problem and extra element is added each time when field is updated from my js code.
Image showing the problem is attached.
The code updates the field but additional html elements are created when multiple updates are done to the same field
Hi,
[BUG REPORT]
After updating to 2024 Q1 TreeList Component expand arrow button stopped working in BatchEdit InCell mode.
Try to expand and the cell goes to edit mode and not expanding .
you can see in your Live Demo.
Thanks.
I have a page with a handful of .TextBoxFor(m => m.PropertyX) and they work perfect when binding existing data to the property and thus the rendered Text Box. However, one of the text boxes should be hidden (like a password box) and then revealed on a click (again, like password box). All the examples have it as this:
@(Html.Kendo().TextBox()
.Name("PropertyX")
.Placeholder("Property X")
.HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>
This does work, however the existing data is not bound to the text box (because the text box is not bound to the property). When I do this:
@(Html.Kendo().TextBoxFor(m => m.PropertyX)
.Placeholder("Property X")
.HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>
it does not work - the show/hide is not rendered.
I've even tried this:
@(Html.Kendo().TextBoxFor(m => m.PropertyX)
.Placeholder("Property X")
.Value(Model.PropertyX)
.HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>
The show/hide icon ONLY shows up if there is no data in the text box (newly entered form and I'm typing in for the first time). If I'm editing a form and data already exists, the icon DOES NOT show up.
Is there a way to have the icon show up all the time regardless if I'm entering new data or editing existing data?
In ASP.NET Core MVC 8.0 with KendoUI 2024.1.130, when rendering a page which contains a grid via the taghelper, if the application has enabled Razor runtime compilation, an exception will be thrown within Microsoft.AspNetCore.Razor.Language in Microsoft.AspNetCore.Razor.StringSegment.Equals. Full stack trace attached. This did not occur with ASP.NET Core MVC 6 and KendoUI 2022.3. Attached is a small sample app demonstrating the problem; navigating to the grid page will fail with an exception unless AddRazorRuntimeCompilation is commented out.
A couple levels up the call stack from where the exception occurs, Razor is iterating over descriptor.BoundAttributes; one of these whose DisplayName is "System.Collections.Generic.IDictionary<System.String, System.String> Kendo.Mvc.TagHelpers.GridTagHelper.Templates" has a Name property of null which is what results in the exception.
Hi,
I am using datatable with my kendo mvc grid and want to make few columns as mandatory. I am not sure how can I do that.
How can I do this?
Thanks in advance.
Mahesh
Hi,
I'm looking to do the Excel Export with server side paging. Since we are server side paging, we are only exporting what is displayed on the screen at the time. I scoured the docs and knowledge base, but couldn't find any documentation or discussions pertaining to this.
Thanks for the help!
Joey
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
I am migrating a WebForms application to ASP.NET Core MVC
In that application a radmenu is used.
Radmenu had a string property "value".
A sort of free to use property.
Is there any way to achieve this in a core MenuItem?