I am using the Grid with two editor template bound to viewdata to populate the components.
Now this is code that I wrote in 2017 that I recent upgraded to .NET 7 ASP Core and has work all those years with no issue. So I think this may be a regression in the grid code.
I have embedded the relevant code leaving out the grid views custom javascript since it isn't relevant.
The behavior that I am seen is that the the grids model properties that do NOT use a customer editor template are not being bound when the save event fires.
public class AlertRuleGridViewModel
{
public int Id { get; set; }
[UIHint("ComponentEditor")]
public string? Component { get; set; }
[UIHint("EmailAddress")]
public string? Email { get; set; }
[UIHint("TypeEditor")]
public string? Type { get; set; }
[UIHint("Boolean")]
public bool Enabled { get; set; }
}
<div class="container alert-rules-grid">
@(Html.Kendo().Grid<AlertRuleGridViewModel>()
.Name("alert-grid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(l => l.Id);
model.Field(field => field.Id).Editable(false);
model.Field(field => field.Type).DefaultValue(ViewData["defaultType"] as String);
})
.PageSize(12)
.Sort(a => a.Add("Id").Descending())
.Read(read => read.Action("GetRules", "Alerts").Data("additionalData"))
.Create(update => update.Action("UpdateRule", "Alerts"))
.Update(update => update.Action("UpdateRule", "Alerts"))
.Destroy(destroy => destroy.Action("DeleteRule", "Alerts"))
.Events(e => e.Error("gridErrorHandler"))
)
.Columns(columns =>
{
columns.Bound(b => b.Id).Title("Id").Visible(true).Width("4%");
columns.Bound(b => b.Component).Title("Component").EditorTemplateName("ComponentEditor").Visible(true);
columns.Bound(b => b.Email).Title("Email").Visible(true);
columns.Bound(b => b.Type).Title("Log Type").EditorTemplateName("TypeEditor").Visible(true);
columns.Bound(b => b.Enabled).Title("Enabled").ClientTemplate("#=renderStatus(data)#").Visible(true);
columns.Command(command =>
{
command.Edit();
command.Destroy();
});
}
)
.ToolBar(toolBar =>
{
toolBar.ClientTemplateId("toolBarTemplate");
})
.Events(events =>
{
events.Cancel("onCancelEdit");
events.Save("onSave");
}
)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable() // Enable paging
.Sortable() // Enable sorting
.Scrollable(s => s.Height("auto"))
.Resizable(resize => resize.Columns(true))
)
</div>
I suspect the issue is the generated html for the input that used the editor template.
The data-bind attribute is set to "value:Component.Component" which should be "value:Component"<td class="k-table-td" role="gridcell" data-container-for="Component">
<span class="k-input k-combobox k-combobox-clearable k-input-solid k-input-md k-rounded-md k-valid" style="">
<input name="Component.Component_input" class="k-input-inner k-valid" type="text" autocomplete="off" title="" role="combobox" aria-expanded="false" style="" tabindex="0" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-autocomplete="none" aria-controls="Component_Component_listbox" data-bind="value:Component.Component_input">
<span unselectable="on" class="k-clear-value k-hidden" title="clear" role="button" tabindex="-1">
<span class="k-svg-icon k-svg-i-x" aria-hidden="true">
<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96l45.3 45.3z"/>
</svg>
</span>
</span>
<button type="button" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="expand combobox" role="button" tabindex="-1">
<span class="k-svg-icon k-svg-i-caret-alt-down k-button-icon" aria-hidden="true">
<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M256 352 128 160h256L256 352z"/>
</svg>
</span>
</button>
<input id="Component_Component" name="Component.Component" type="text" value="" data-role="combobox" aria-disabled="false" aria-readonly="false" style="display: none;" data-bind="value:Component.Component"/>
<script>kendo.syncReady(function(){jQuery("#Component_Component").kendoComboBox({"dataTextField":"Name","dataValueField":"Value","valuePrimitive":true,"dataSource":[{"Name":"AppLog.Common.Test","Value":"AppLog.Common.Test"},{"Name":"AppLog.WebAPI","Value":"AppLog.WebAPI"},{"Name":"BadgeReader","Value":"BadgeReader"},{"Name":"CCS.WebUI","Value":"CCS.WebUI"},{"Name":"LVCVA.AppLog.Internal.Web","Value":"LVCVA.AppLog.Internal.Web"},{"Name":"LVCVA.AppSecurity.Domain","Value":"LVCVA.AppSecurity.Domain"},{"Name":"Registration.WPF.UI","Value":"Registration.WPF.UI"},{"Name":"spLogApplicationMessage","Value":"spLogApplicationMessage"}]});});</script>
<span class="field-validation-valid" data-valmsg-for="Component" data-valmsg-replace="true"/>
</td>
<td class="k-table-td" role="gridcell" data-container-for="Type">
<span title="" class="k-picker k-dropdownlist k-picker-solid k-picker-md k-rounded-md k-valid" unselectable="on" role="combobox" aria-expanded="false" tabindex="0" aria-controls="Type_Type_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-describedby="e73b8727-5e28-4d9b-9faa-df8239f54aa5" style="">
<span id="e73b8727-5e28-4d9b-9faa-df8239f54aa5" unselectable="on" class="k-input-inner">
<span class="k-input-value-text"/>
</span>
<span role="button" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="select" type="button">
<span class="k-svg-icon k-svg-i-caret-alt-down k-button-icon" aria-hidden="true">
<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M256 352 128 160h256L256 352z"/>
</svg>
</span>
</span>
<input id="Type_Type" name="Type.Type" type="text" value="" data-role="dropdownlist" style="display: none;" data-bind="value:Type.Type"/>
<script>kendo.syncReady(function(){jQuery("#Type_Type").kendoDropDownList({"dataTextField":"Type","dataValueField":"Value","valuePrimitive":true,"dataSource":[{"Type":"Critical","Value":"Critical"},{"Type":"Error","Value":"Error"},{"Type":"Warning","Value":"Warning"},{"Type":"Information","Value":"Information"},{"Type":"Verbose","Value":"Verbose"},{"Type":"Start","Value":"Start"},{"Type":"Stop","Value":"Stop"},{"Type":"Suspend","Value":"Suspend"},{"Type":"Resume","Value":"Resume"}]});});</script>
<span class="field-validation-valid" data-valmsg-for="Type" data-valmsg-replace="true"/>
</td>
As per the subject, if you use jQuery to get a Kendo TabStrip in a ComboBox change event it inserts this div into the TabStrip control:
<div class="k-tabstrip-items-wrapper k-hstack">
<ul class="k-tabstrip-items k-reset" role="tablist"></ul>
</div>
This used to work as we were changing the selected tab in a TabStrip based on a ComboBox selection, but this no longer works. Please see the following REPL where a new div is added every time you change the ComboBox value:
https://netcorerepl.telerik.com/mxETafaT24zWOe0C50
Kind regards,
David
If I put the Grid into a kendo-template for the TileLayout control, the ClientTemplate does not work properly. It only gets called once regardless of the number of items in the grid and the data is not being passed in.
This is my column definition:
columns.Bound(c => c.DocumentKey).Title(" ").ClientTemplate("#=CommandTemplate(data)#").Width(70);
And I am calling the .ToClientTemplate() on the Grid. Everything else work great except for this one issue.
I have not been able to find any other info, so what am I missing?
Hi this is a pretty basic bug. But I am using the k-i-cancel icon class but for some reason it is showing the settings icon?
On mobile device's the TimePicker and DateTimePicker's popup doesn't get scrolled as expected. Instead the entire page is scrolled.
The page gets scrolled.
The popup should be scrollable.
1570836
### Bug report
The CheckBox TagHelper does not render the attribute "required" and a custom class.
### Reproduction of the problem
The CheckBox TagHelper definition:
<kendo-checkbox id="KendoCheckboxRequiredByHtml" class="form-check-input" required>
</kendo-checkbox>
It generates the following markup:
<input id="KendoCheckboxRequiredByHtml" name="KendoCheckboxRequiredByHtml" type="checkbox" value="true" data-role="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
<input name="KendoCheckboxRequiredByHtml" type="hidden" value="false">
A sample for reproduction is attached.
### Expected/desired behavior
The attribute "required" and the class "form-check-input" to be set to the generated input element.
### Environment
* **Kendo UI version: 2022.2.510
* **Browser: [all]
Steps to reproduce
Current Behavior
The value in the Html Input is restored but not the value of the Kendo Input. The same behavior applies for Kendo NumericTextBox, etc.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
<form>
<div>
<label for="HtmlInput">Html Input</label>
<input type="text" id="HtmlInput" name="HtmlInput">
</div>
<div>
<label for="KendoInput">Kendo Input</label>
@(Html.Kendo().TextBox ().Name ("KendoInput"))
</div>
</form>
</body>
</html>
### Bug report
The Button TagHelper is missing in the Visual Studio 2022 IntelliSense.
### Reproduction of the problem
Create a Telerik UI for ASP.NET Core application (.NET 6) and try to insert a Button TagHelper by using the IntelliSense. It appears that not all available Telerik UI components are available in the suggested list.
### Environment
* **Visual Studio Professional 2022 version: 17.1.0 Preview 1.1
* **Kendo UI version: 2021.3.1109
* **jQuery version: 1.12.4
* **Browser: [all]
I have an editable kendo grid in which I have a date field. When I choose a date through the calendar for example: 26.12.2021 on post the model binder parses the date correctly.
If I manually enter the date in the cell the model binder parses the date as it was not an UTC and since my time zone is +2h it comes in the controller as 25.12.2021 22:00
(see the attached files)
Inside my startup.cs I have defined JsonOptions like this:
.AddNewtonsoftJson(options =>
{
options.SerializerSettings.ContractResolver = new DefaultContractResolver();
options.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc;
});
In the Configure method:
var supportedCultures = new[] { new CultureInfo("bg-BG") };
app.UseRequestLocalization(new RequestLocalizationOptions
{
DefaultRequestCulture = new RequestCulture("bg-BG"),
SupportedCultures = supportedCultures,
SupportedUICultures = supportedCultures
});
Layout.cshtml
<script src="~/lib/kendo/js/cultures/kendo.culture.bg-BG.min.js"></script>
<script>
kendo.culture("bg-BG");
</script>
Kendo dialog structure doesn’t use Aria landmarks properly for buttons - this leads to a validation error
The pager control's select box renders role="listitem" but the parent is missing role="list" - this leads to a validation error
Listviews will render role="list" even when empty - this leads to a validation error
Kendo grids use 2 tables (one for header and one for the data) which means that there are no role="cell" assigned to any of the headers - this leads to a validation error
Scrollable grids are missing a tabindex="0" to allow for keyboard navigation - this leads to a validation error
this form doesn't have Core 2, 2.1, 3.0, 3.1 or 5 in the .Net Framework drop down. Just gonna pick 4.8 even though it doesn't apply. I am using core 5.
Dear Telerik Team
I have recently found a bug in the asp.net core Scheduler.
What I did (using this demo):
1. Created a daily event
2. Edited the second event (the current occurrence) and saved it
3. Tried to edit the second event again
The problem is now that the popup if I want to edit the current occurrence or series still showed up but it should not.
We had the same problem also on our asp.net core application.
Best Regards
Jan
Bug report
A specific PDF file (example can be found in ticket : 1493640) shows upside down in DPL case
Reproduction of the problem
Run the DPL processing demo locally and replace the file with the one provided in the ticket
Current behavior
The signature is not shown
Expected/desired behavior
The signature should be shown
Environment
Kendo UI version: 2020.3.1021
The parent node's state remains "unchecked".
The parent node's state should be "indeterminate".
Workaround:
Attach a DataBound event handler to the TreeView:
<kendo-treeview name="DataRestrictionTree" load-on-demand="false" datatextfield="Name" on-data-bound="onDataBound" >
In the handler call the TreeView's updateIndeterminate API method:
function onDataBound(e) {
var treeview = $("#DataRestrictionTree").data("kendoTreeView");
treeview.updateIndeterminate();
}
the header display 5/21 for 21 may, but should be 21/5 for French culture
no translation for Export PDF : "Export to PDF" should be "Exporter en PDF" in french Translation
Show picture
pdfViewer toolbar are always in english :
The StringExtensions -> ToCamelCase method(part of Kendo.Mvc.Extenstions) doesn't return the expected Camel case result.
Include the Kendo.Mvc.Extenstions namespace. Define the following in a controller:
public IActionResult Index()
{
string test = "RANDOMStatusId";
test = test.ToCamelCase();
return View();
}
Set a debugger and see the value of the "test" variable.
The returned from the ToCamelCase() method value is "rANDOMStatusId"
The expected result returned from the ToCamelCase() method value is "randomStatusId"
Hi!
We're using a drop down list as a grid cell's edit template, but.. our users are unable to properly edit the rows at the bottom of the grid due to drop down list going off the page, and closing when they attempt to scroll.
any ideas?
There is an issue when you copy /paste a bullet list from a Microsoft word document.
Hello good afternoon all right?
I am developing a code where I create a base model of a window and use javascript to be able to define data like autura, width, content (URL) and etc ...
In the example I am doing, I have a menu that according to the ID of the item that I clicked on the menu, it performs a function and according to the ID, it defines the data of the Window, as I do not have a component like "RadWindowManager" to facilitate this part of the creation, I am doing this process:
Component Code:
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<a class="navbar-brand" href="#">
<div> <img src="~/images/selo.png" class="pull-left imagem" /> </div>
</a>
<a class="navbar-brand" href="#">
<img src="~/images/softlux.png" class="logo_posicao" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="dropdown nav-text">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="aoClicar('3,0')">
Example Window 1
</a>
</li>
<li class="dropdown nav-text">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="aoClicar('6,0')">
Example Window 2
</a>
</li>
<li class="dropdown nav-text">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="aoClicar('12,0')">
Example Window 3
</a>
</li>
</ul>
</div>
</nav>
@(Html.Kendo().Window()
.Name("FrmGrid")
.Resizable()
.Draggable()
.Content("Loading...")
.Visible(false)
.Modal(false)
)
Scripts Code:
<script type="text/javascript">
function aoClicar(idItem) {
switch (idItem) {
case "3,0":
var janela = $("#FrmGrid").kendoWindow().data("kendoWindow");
janela.setOptions({
title: "Table of Environments",
width: 980,
height: 440
});
janela.refresh({
url: 'http://' + window.location.hostname + ':' + window.location.port + '/Ambiente/Index' // Open a Controller and Action as Frame
});
janela.center().open();
break;
case "6,0":
var janela = $("#FrmGrid").kendoWindow().data("kendoWindow");
janela.setOptions({
title: "Table of Professions",
width: 980,
height: 400
});
janela.refresh({
url: 'http://' + window.location.hostname + ':' + window.location.port + '/Profissao/Index' // Open a Controller and Action as Frame
});
janela.center().open();
break;
case "12,0":
var janela = $("#FrmGrid").kendoWindow().data("kendoWindow");
janela.setOptions({
title: "Table of reasons",
width: 980,
height: 560
});
janela.refresh({
url: 'http://' + window.location.hostname + ':' + window.location.port + '/Motivo/Index' // Open a Controller and Action as Frame
});
janela.center().open();
break;
default:
alertify.error('Window not disponible.');
}
}
</script>
However, I noticed 2 problems in Defining Options such as height, width, title, and content
If I use this method to define:
janela.setOptions({
title: "Table of reasons",
width: 980,
height: 560
});
The final result of the window looks like this:
Note that the Content Frame is passing outside the window border, or in case the background shadow of it, in other browsers the size may even follow the pattern of the shadow, but in Google Chrome you get this part beyond the limit.
If I use this method to set the properties:
var janela = $("#FrmGrid").kendoWindow({
title: "Table of reasons",
width: 980,
height: 560
}).data("kendoWindow");
When you create the first window, you create it without problems:
Note that even the window is the correct size.