I have a similar problem to this old thread: Dealing with data which includes a field having an array of objects in Kendo UI for jQuery | Telerik Forums.
I linked a field that is an array of a specific class to a Kendo ListView of a custom editor when you create or edit a scheduler item.
When I add or remove items, there are no problems. Apparently, the scheduler recognizes that there are more or fewer items in the list, but when I modify a list item (one of its properties), the scheduler does not trigger the update event.
Is there a way to trigger the update event when the ListView items are modified or force it to fire?
Hello,
Our company uses Telerik developing web application. I am working on CI/CD, and I found Telerik NuGet source is good - except it requires clear text password.
It's nice to have the NuGet source support API key authentication, and key management in the account generated the key.
In this way we can avoid the risk to publish clear text password.
Please consider support it :)
Thanks.
This demo with 2 list boxes and the transfer buttons is the exact use case that I have. I'm trying to make it less work for the users since there will be several employees to select. I would like to avoid having to click the transfer button after clicking each employee or having to remember to control click to select more than one.
I tried to use a template to make the items checkboxes, but the checkboxes were rendered as text fields.
I also tried defining the change event to click on the transferTo link whenever an item is selected.
$('a[data-command="transferTo"]').click();
When an item is clicked, ALL of the list items are transferred instead of the one that was clicked.
Is there any way to do either of the following?
1. Make the list items checkboxes. Clicking the transfer button will transfer all of the checked items.
2. Transfer an item to the other listbox when it is clicked.
If not I think I will use plain HTML select elements.
Thanks
When I do a cntrl+K+D the formatting does not look good. The indents are very bad and manual formatting takes a long time. How can I improve this?
Thanks
Where can I find a copy of Kendo.Mvc.Examples.Models.TaskBoard.Column? I can't seem to find it in any of the Taskboard examples.
Thanks
- Ken
I have this:
<div class="row mt-3">
<div class="col-lg-4">
@(Html.Kendo().DropDownListFor(m => m.AwardTypeId)
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Outline)
.OptionLabel("Select Award Type...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLookupAwardTypes", "Api");
});
})
.Events(e =>
{
e.Select("AwardTypeId_OnSelect");
})
)
</div>
<div class="col-lg-8">
<kendo-textbox for="TenderNumber" size="ComponentSize.Medium" rounded="Rounded.Medium" fill-mode="FillMode.Outline" enable="false">
<textbox-label content="@nameof(Model.TenderNumber)" floating="true"/>
</kendo-textbox>
</div>
</div>
And that renders:
<div class="row mt-3">
<div class="col-lg-1">
<div style="text-align: center; vertical-align: center;">
<span class="k-switch k-switch-lg k-rounded-full k-switch-on" role="switch" tabindex="0" aria-checked="true" style=""><input data-val="true" data-val-required="The OverrideLetter field is required." id="OverrideLetter" name="OverrideLetter" type="checkbox" value="true" data-role="switch" style="display: none;" checked="checked"><span class="k-switch-track k-rounded-full"><span class="k-switch-label-on">On</span><span class="k-switch-label-off" aria-hidden="true">Off</span></span><span class="k-switch-thumb-wrap"><span class="k-switch-thumb k-rounded-full"></span></span></span><input name="OverrideLetter" type="hidden" value="false"><script>kendo.syncReady(function(){jQuery("#OverrideLetter").kendoSwitch({"change":OverrideLetter_OnChange,"checked":false,"size":"large","trackRounded":"full","thumbRounded":"full"});});</script>
</div>
</div>
<div class="col-lg-11">
<span title="" class="k-picker k-dropdownlist k-picker-outline k-picker-md k-rounded-md" unselectable="on" role="combobox" aria-expanded="false" aria-controls="OverriddenLetter_listbox" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-busy="false" aria-describedby="e2f4301b-c2b1-45e8-84ff-7885e4e3a766" tabindex="0" aria-activedescendant="f8b0ffca-e902-4c18-be20-ababce4f16a4"><span id="e2f4301b-c2b1-45e8-84ff-7885e4e3a766" unselectable="on" class="k-input-inner"><span class="k-input-value-text"><span class="selected-value"></span><span>COMM/RL/17-1</span></span></span><button type="button" tabindex="-1" unselectable="on" class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button" aria-label="select"><span class="k-icon k-i-arrow-s k-button-icon"></span></button><input id="OverriddenLetter" name="OverriddenLetter" style="width: 100%; display: none;" type="text" value="" data-role="dropdownlist"></span><script>kendo.syncReady(function(){jQuery("#OverriddenLetter").kendoDropDownList({"dataTextField":"RefNumber","dataValueField":"Id","enable":false,"height":500,"optionLabel":"Select RL to override...","template":"\u003cspan class=\"k-state-default\"\u003e\u003cstrong\u003e#: data.RefNumber #\u003c/strong\u003e\u003cp\u003e#: data.Subject #\u003c/p\u003e\u003c/span\u003e","valueTemplate":"\u003cspan class=\"selected-value\"\u003e\u003c/span\u003e\u003cspan\u003e#:data.RefNumber#\u003c/span\u003e","filter":"contains","size":"medium","rounded":"medium","fillMode":"outline","dataSource":{"transport":{"read":{"url":"/Api/GetLookupLetterQuick"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
</div>
</div>
Which looks like this:
How to make the Switch either bigger in width and height or simply align its center horizontally and vertically?
I have
<div class="row mt-3">
<div class="col-lg-4">
@(Html.Kendo().DropDownListFor(m => m.AwardTypeId)
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Outline)
.OptionLabel("Select Award Type...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLookupAwardTypes", "Api");
});
})
.Events(e =>
{
e.Select("AwardTypeId_OnSelect");
})
)
</div>
<div class="col-lg-8">
<kendo-textbox for="TenderNumber" size="ComponentSize.Medium" rounded="Rounded.Medium" fill-mode="FillMode.Outline" enable="false">
<textbox-label content="@nameof(Model.TenderNumber)" floating="true"/>
</kendo-textbox>
</div>
</div>
Renders:
<div class="row mt-3">
<div class="col-lg-4">
<span title="" class="k-picker k-dropdownlist k-picker-outline k-picker-md k-rounded-md" unselectable="on" role="combobox" aria-expanded="false" tabindex="0" aria-controls="AwardTypeId_listbox" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-busy="false" aria-describedby="d51a34cd-9a61-4c07-af6f-dd41980be3a7" aria-activedescendant="c66cf112-868e-4f3d-bcfa-ad32c0cf3f7e"><span id="d51a34cd-9a61-4c07-af6f-dd41980be3a7" unselectable="on" class="k-input-inner"><span class="k-input-value-text">Tender</span></span><button type="button" tabindex="-1" unselectable="on" class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button" aria-label="select"><span class="k-icon k-i-arrow-s k-button-icon"></span></button><input data-val="true" data-val-required="The AwardTypeId field is required." id="AwardTypeId" name="AwardTypeId" style="width: 100%; display: none;" type="text" value="0" data-role="dropdownlist"></span><script>kendo.syncReady(function(){jQuery("#AwardTypeId").kendoDropDownList({"select":AwardTypeId_OnSelect,"dataTextField":"Name","dataValueField":"Id","optionLabel":"Select Award Type...","value":"0","size":"medium","rounded":"medium","fillMode":"outline","dataSource":{"transport":{"read":{"url":"/Api/GetLookupAwardTypes"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
</div>
<div class="col-lg-8">
<span data-role="floatinglabel" class="k-floating-label-container k-state-empty k-focus"><label class="k-label k-input-label" for="TenderNumber">TenderNumber</label><span class="k-input k-textbox k-input-outline k-input-md k-rounded-md" style=""><input id="TenderNumber" name="TenderNumber" type="text" value="" data-role="textbox" aria-disabled="false" class="k-input-inner" autocomplete="off" style="width: 100%;"></span></span>
<script>kendo.syncReady(function(){jQuery("#TenderNumber").kendoTextBox({"enable":false,"label":{"content":"TenderNumber","floating":true},"size":"medium","rounded":"medium","fillMode":"outline"});});</script>
</div>
</div>
That looks like this:And floating label:
How to align them properly? I'm using the Material Main theme.
Hello,
I have followed various examples and my very minimal knowledge of Kendo to attempt to filter a large dataset on the server side Razor Pages Page.
I have used this: https://docs.telerik.com/aspnet-core/html-helpers/editors/multiselect/binding/razor-page
However, I cannot get the filtered data to return correctly without type arguments being thrown by the method.
Things I have checked
Code
1. MultiSelect Component
@model Guid @(Html.Kendo().MultiSelectFor(x => x) .DataTextField("OrderNumber") .DataValueField("Id") .Placeholder("Start typing order numbers...") .Filter(FilterType.Contains) .DataSource(dataSource => { dataSource.Ajax(); dataSource.Read(r => r.Url("/XXXX/XXXX/Index?handler=OrderMultiSelectRead") .Data("forgeryToken") .Type(HttpVerbs.Post)) .ServerFiltering(true); } ).HtmlAttributes(new {style ="width: 100%" }))
2. Server Side Code
public async Task<IActionResult> OnPostOrderMultiSelectRead([DataSourceRequest] DataSourceRequest request, string text)
{
var result = new List<Order>();
try
{
var filters = request?.Filters?.Cast<FilterDescriptor>().ToList();
var firstFilter = filters.FirstOrDefault();
if (firstFilter == null) return new JsonResult(await result.ToDataSourceResultAsync(request));
firstFilter.MemberType = typeof(int?);
var firstFilterValue = firstFilter.Value.ToString();
if (string.IsNullOrEmpty(firstFilterValue) || firstFilterValue.Length < 5)
return new JsonResult(await result.ToDataSourceResultAsync(request));
var orderNumberParsedAsInt = int.Parse(firstFilterValue);
var matchingOrders =
(await this.orderRepository.GetModelsAsync(x => x.OrderNumber == orderNumberParsedAsInt))
.OrderByDescending(x => x.OrderNumber).ToList();
return new JsonResult(await matchingOrders.ToDataSourceResultAsync(request));
}
catch(Exception exception)
{
var resultPayload = await result.ToDataSourceResultAsync(request);
resultPayload.Errors = new List<Exception> { exception };
return new JsonResult(resultPayload);
}
}
The model uses inheritance.How to make that when loading the data from the model is automatically substituted?
@(Html.Kendo().DropDownList() .Name("LoginViewModels.Country.Obl") .HtmlAttributes(new { style = "width:100%" }) .OptionLabel("Выберите область") .DataTextField("Key") .DataValueField("Key") .DataSource(source => { source.Read(read => { read.Action("LoadObl", "Account"); }); }) )
My grid only shows a few columns of my model. My model is much larger than what I show on the grid.
I wanted to have a toolbar "Add new contact" on the grid.
In the grid rows I was going to have an "Edit Contact" button.
Both of these would pop up the same editor template. The editor template needs to be responsive and not in a small window.. Planning for a UI four column row on deskstop but stacked on mobile.
I cannot seem to find the right example for doing this.
Help please!
Thanks