Visual Studio 2017
.Net Core 2.2
Telerik 2019.2.514
I have a multiselect on a page that I am using a tag template to show the number of items selected out of the number of total items in the control. This works fine except that I also have a button the user can click to select all of the items in the multiselect. Once the user clicks the button another box appears with all of the items selected underneath the multiselect. The multiselect does not change to show the number selected. If I click the button numerous times, each time another box appears showing all of the selected items below the last one. What am I doing wrong?
I have attached a screenshot and my code below.
Thanks, Rich
@using (Html.BeginForm(actionName: null, controllerName: null, method: FormMethod.Post, htmlAttributes: new { name = "myForm", id = "myForm", onkeydown = "return event.keyCode!=13" }))
{
<div class="text-center">
<label class="control-label FL">Select Unit(s)</label>
@(Html.Kendo().MultiSelect().Name("msUnit").BindTo(new SelectList(ViewBag.Unit, "Value", "Text")).TagMode(MultiSelectTagMode.Single).TagTemplateId("UnitTagTemplate").AutoClose(false).HtmlAttributes(new { @class = "CB FL W200" }))
@(Html.Kendo().Button().Name("btnSelectAllUnit").Content("Select All").HtmlAttributes(new { type = "button", style = "clear:both;float:left;border:solid;border-width:thin;background-color:lightgrey;height:25px;width:200px;" }).Events(events => events.Click("btnSelectAllUnitClick")))
</div>
}
<script id="UnitTagTemplate" type="text/x-kendo-template">
#:values.length# out of #:maxTotal#
</script>
<script>
function btnSelectAllUnitClick() {
var msUnit = $("#msUnit").kendoMultiSelect().data("kendoMultiSelect");
var values = $.map(msUnit.dataSource.data(), function (dataItem) {
return dataItem.value;
});
msUnit.value(values);
}
</script>
public IActionResult Index()
{
List<SelectListItem> units = new List<SelectListItem>()
{
new SelectListItem() {Text="0001", Value="0001"},
new SelectListItem() { Text="0001", Value="0002"},
new SelectListItem() { Text="0003", Value="0003"},
new SelectListItem() {Text="0004", Value="0004"},
new SelectListItem() { Text="0005", Value="0005"},
new SelectListItem() { Text="0006", Value="0006"},
new SelectListItem() {Text="0007", Value="0007"},
new SelectListItem() { Text="0008", Value="0008"},
new SelectListItem() { Text="0009", Value="0009"},
new SelectListItem() {Text="0010", Value="0010"},
new SelectListItem() { Text="0011", Value="0011"},
new SelectListItem() { Text="0012", Value="0012"},
};
ViewBag.Unit = units;
return View();
}
Hi,
I couldn't find info about supported browsers for ASP.NET Core UI components.
I have built asp.net core app with kendo-grid on it (bach editing, dropdowns). It works as expected with Chrome and Edge, but it doesn't render at all with IE11.
Any known issues, workarounds, documentation available?
Hi,
https://demos.telerik.com/aspnet-mvc/grid/editing-custom
The above link discusses adding a dropdown in editable mode to select from a list. What if I don't want the list to come from the model? I'm trying to bind the dropdown to a ViewBag of names populated from an LDAP query (ie not the database). What do I put in the ClientTemplate section?
Thanks,
Brian
As far as I can tell binding is not an option with DateRangePicker. Instead I believe you have to handle the change event and update your model from there. However for the life of me I can't work out how to do this. This is what I currently have:
@Html.HiddenFor(model => model.EarliestDeliveryDate)
@Html.HiddenFor(model => model.LatestDeliveryDate)
@(Html.Kendo().DateRangePicker()
.Name("deliveryDate")
.Range(r => r.Start(Model.EarliestDeliveryDate).End(Model.LatestDeliveryDate))
.Messages(m => m.StartLabel("Earliest").EndLabel("Latest"))
.Events(events => events.Change("onDeliveryDatesChange"))
)
<
script
type
=
"text/javascript"
>
function onDeliveryDatesChange() {
var range = this.range();
if (range.start && range.end) {
var earliest = $('#EarliestDeliveryDate');
var latest = $('#LatestDeliveryDate');
earliest.val(range.start);
latest.val(range.end);
}
}
</
script
>
The values are getting updated on the hidden fields but this is not getting reflected on the model. I think this is because the format of the dates that are returned in range.start/end is wrong. It could also be something completely different. Can you please give me an example of how to do this and I'd suggest also updating your documentation with the example too.
Also if Name is not set then rendering utterly fails and no good message is given. This is not intuitive as other controls don't seem to need this value setting.
When editing a form with data, when I click the control to "EDIT" my saved date range selection it's opening on Todays date instead of my date range selection.
Any idea how to resolve this?
I have a form Razor in .NET Core that I have attached a Kendo Validator to. When I submit the form validator.validate() is returning false but none of the inputs on the form are displaying a validation error. How can I tell what validations are failing when validator.validate() returns false?
Razor Form
<
form
id
=
"editQuestionsForm"
method
=
"post"
>
<
input
asp-for
=
"Input.InspectionQuestionId"
type
=
"hidden"
/>
<
div
class
=
"row"
>
<
div
class
=
"col-md-12"
>
<
div
class
=
"form-group"
>
<
label
asp-for
=
"Input.InspectionSectionId"
></
label
><
br
/>
<
kendo-combobox
name
=
"inspectionSection"
style
=
"width: 500px;"
for
=
"Input.InspectionSectionId"
placeholder
=
"Select Section"
datatextfield
=
"Text"
datavaluefield
=
"Value"
bind-to
=
"Model.InspectionSections"
>
<
popup-animation
>
<
open
duration
=
"500"
/>
<
close
duration
=
"500"
/>
</
popup-animation
>
</
kendo-combobox
><
br
/>
<
span
asp-validation-for
=
"Input.InspectionSectionId"
class
=
"text-danger"
></
span
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-12"
>
<
div
class
=
"form-group"
>
<
label
asp-for
=
"Input.QuestionTextForForm"
></
label
><
br
/>
<
textarea
asp-for
=
"Input.QuestionTextForForm"
class
=
"form-control-textarea"
></
textarea
><
br
/>
<
span
asp-validation-for
=
"Input.QuestionTextForForm"
class
=
"text-danger"
></
span
>
</
div
>
</
div
>
</
div
>
</
form
>
JavaScript
var
validator = $(
"#editQuestionsForm"
).kendoValidator().data(
"kendoValidator"
);
function
validateSave() {
if
(validator.validate()) {
$(
'#editQuestionsForm'
).submit();
}
else
{
bootstrapWarningsMessage(
"There was an error submitting the form."
);
}
return
true
;
}
(It's a trial version)
Impossible to display data.
Data are correctly supplied in my form (see DOM capture)
But there is an error : L’objet ne gère pas la propriété ou la méthode « kendoGrid »
JS are the same than in examples.
I have a window in my _Layout.cshtml which I have initially set to visible="false". When I load or refresh the main page, I get a flickering, such that you can momentarily see the window text and button. I'm using a tag helper if that makes any difference.
The following is the _Layout.cshml file. The rest of the solution is just the standard Telerik ASP.Net Core template using ASP.Net Core 2019.2.514 controls on .Net Core 2.2.
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>@ViewData["Title"] - WindowFlickerTest</
title
>
<
link
href
=
"https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.bootstrap-v4.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2019.2.514/js/jszip.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2019.2.514/js/kendo.aspnetmvc.min.js"
></
script
>
<
environment
names
=
"Development"
>
<
link
rel
=
"stylesheet"
href
=
"~/lib/bootstrap/css/bootstrap.css"
/>
<
link
rel
=
"stylesheet"
href
=
"~/css/site.css"
/>
</
environment
>
<
environment
names
=
"Staging,Production"
>
<
link
rel
=
"stylesheet"
href
=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
asp-fallback-href
=
"~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class
=
"sr-only"
asp-fallback-test-property
=
"position"
asp-fallback-test-value
=
"absolute"
/>
<
link
rel
=
"stylesheet"
href
=
"~/css/site.min.css"
asp-append-version
=
"true"
/>
</
environment
>
</
head
>
<
body
class
=
"k-content"
>
<
kendo-window
name
=
"windowChangeUser"
title
=
"Change User"
draggable
=
"true"
resizable
=
"false"
width
=
"250"
height
=
"200"
modal
=
"true"
visible
=
"false"
>
<
content
>
<
div
style
=
"font-size: 13px; padding-top: 20px;"
>
<
p
>
Enter a username to switch to
</
p
>
<
p
style
=
"padding-top: 20px;"
>
<
input
type
=
"text"
class
=
"k-textbox"
id
=
"userName"
/>
</
p
>
</
div
>
<
div
style
=
"padding-top: 20px; text-align: center"
>
<
kendo-button
name
=
"buttonChangeUserOk"
type
=
"submit"
on-click
=
"windowClose"
>
<
content
>OK</
content
>
</
kendo-button
>
</
div
>
</
content
>
</
kendo-window
>
<
nav
class
=
"navbar navbar-inverse navbar-fixed-top p-3"
>
<
div
class
=
"container p-0 p-sm-3"
>
<
kendo-button
id
=
"buttonOpenWindow"
on-click
=
"openWindow"
>
<
content
>Show me the window!</
content
>
</
kendo-button
>
<
div
class
=
"navbar-header"
>
<
kendo-button
name
=
"configure"
tag
=
"button"
icon
=
"menu"
class
=
"k-rpanel-toggle k-primary btn-toggle"
></
kendo-button
>
<
a
asp-controller
=
"Home"
asp-action
=
"Index"
class
=
"navbar-brand"
>Your .NET Core Application</
a
>
</
div
>
<
div
id
=
"responsive-panel"
class
=
"navbar-left"
>
<
kendo-responsivepanel
name
=
"responsive-panel"
auto-close
=
"false"
breakpoint
=
"768"
orientation
=
"top"
>
@(Html.Kendo().Menu()
.Name("Menu")
.Items(items =>
{
items.Add().Text("Home").Action("Index", "Home", new { area = "" });
items.Add().Text("About").Action("About", "Home", new { area = "" });
items.Add().Text("Contact").Action("Contact", "Home", new { area = "" });
})
)
</
kendo-responsivepanel
>
</
div
>
</
div
>
</
nav
>
<
main
>
<
div
class
=
"container"
>
@RenderBody()
</
div
>
</
main
>
<
footer
class
=
"footer text-center d-flex align-items-center"
>
<
div
class
=
"container pb-0"
>
<
hr
/>
<
p
class
=
"text-muted"
>
Copyright © @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
</
p
>
</
div
>
</
footer
>
<
environment
names
=
"Development"
>
<
script
src
=
"~/lib/bootstrap/js/bootstrap.js"
></
script
>
</
environment
>
<
environment
names
=
"Staging,Production"
>
asp-fallback-src
=
"~/lib/bootstrap/js/bootstrap.min.js"
asp-fallback-test
=
"window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
></
script
>
</
environment
>
@RenderSection("scripts", required: false)
</
body
>
</
html
>
<
script
type
=
"text/javascript"
>
function openWindow() {
var window = $("#windowChangeUser").data("kendoWindow");
window.center();
window.open();
}
function windowClose() {
var window = $("#windowChangeUser").data("kendoWindow");
window.close();
}
</
script
>
Hi
I have Grid with 4 columns. When I edit a row, enter number in cell 2, I want to update cell 4 with the result of cell 2 - cell 3.
Can anyone advice how I can do this urgently? Thanks in Advance
Below is the code of my grid
@(Html.Kendo().Grid<
TransactionCoBroker
>()
.Name("GridCommExCoBroker")
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Columns(columns =>
{
columns.Command(c => c.Edit());
columns.Bound(u => u.Name).Title("Name");
columns.Bound(u => u.FNet).Title("Net"));
columns.Bound(u => u.FTax).Title("Tax"));
columns.Bound(u => u.FGross).Title("Amount"));
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(id => id.ICobrokerId);
model.Field(p => p.UName).Editable(false);
model.Field(p => p.FNet).Editable(true);
model.Field(p => p.FTax).Editable(true);
model.Field(p => p.FGross).Editable(false);
})
.Events(e => e.Error("onError").RequestEnd("onRequestEnd"))
.ServerOperation(true)
.Read(r => r.Url("?handler=GetExCoBrokerComm").Data("GetTransID"))
.Update(r => r.Url("?handler=SaveBrokerComm").Data("GetTransID"))))
.Columns(columns =>
{
columns.Select().Width(50).Locked(true);
....
}
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Cell))
error