Questions on UI for ASP.NET Core Forum

1 answer

127 views

The update event is not triggered when the element in an array is modified

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?

Editor

ListView

Scheduler

answered on 01 Sep 2022

3 answers

682 views

Support apikeys as NuGet authentication

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.

General Discussions

answered on 31 Aug 2022

1 answer

138 views

Customizing ListBox

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

ListBox

answered on 30 Aug 2022

1 answer

102 views

Visual Studio Formatting of HtmlHelpers

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

General Discussions

answered on 29 Aug 2022

1 answer

150 views

Kendo.Mvc.Examples.Models.TaskBoard.Column Model

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

TaskBoard

answered on 25 Aug 2022

1 answer

125 views

Weird alignment: Switch and DropDownlList

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?

General Discussions

answered on 24 Aug 2022

1 answer

127 views

Weird alignment

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.

General Discussions

answered on 24 Aug 2022

1 answer

421 views

MultiSelect Server Side Filtering - Razor Pages - ASP NET Core

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

Pascal Case is being returned despite getting a Splice error.
An empty array is being returned on from the server as a default

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);
            }
        }

Really struggling with this!

MultiSelect

answered on 24 Aug 2022

1 answer

97 views

.Name inheritance

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");
                        });
                    })
                )

DropDownList

answered on 24 Aug 2022

1 answer

149 views

Add new and edit custom responsive template

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

Grid

answered on 24 Aug 2022