Questions on UI for ASP.NET Core Forum

3 answers

698 views

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

151 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

109 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

157 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

134 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

139 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

449 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

103 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

162 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

1 answer

1.3K+ views

ASP.NET Core TabStrip Selected tab

I have a serious problem (with code, that is)...

I have a page with a TabStrip control on it. Using the Selected option on the first tab (set to true) I can't get that tab to be the active tab when the page loads. After load, clicking on any tab but the first one makes the tab LOOK like it is selected, but the content doesn't change for any tab until I click on that first tab. In other words, I can't set the active tab using the HTML Helper - with or without the Selected property being set, the tabstrip just doesn't work until I click the first tab.

What I'm trying to do is this: tab 1 has a data grid and tabs 2-4 have charts. When initially loaded, the grid is displayed. When one of the other tabs are selected I want to capture that and check the number of categories in the chart. If there are more than the current window size can handle, I want to manually set the width property of the chart and call the resize method so the user scrolls horizontally (without doing this, there are some charts where the category names look like an ink blot - one in particular can have 387 categories - ick, but what the client wants).

At this point I am not even sure if this will work. But I know the client will pitch a fit if I can't get that first tab automatically selected when the page loads. The next fit comes when I can't get the chart resized so it is readable. FYI, Bootstrap 5's native tabs work but the Kendo TabStrip does not. If I can't get this working, I will have to go back to that approach to see if I can get the chart to resize.

And FYI, this particular page is not wrapped in any Bootstrap containers, just nested in an Accordian control.

Chart

TabStrip

answered on 22 Aug 2022