Questions on UI for ASP.NET Core Forum

1 answer

506 views

HeaderHtmlAttributes() function no longer works

Hello, in the columns grid, the HeaderHtmlAttributes() function no longer works.

It no longer works if you put a style. example. HeaderHtmlAttributes(new { style = "text-align: center" }).

The demo does not work
https://demos.telerik.com/aspnet-core/grid/cell-alignment

Thanks,

Jose

Grid

answered on 29 Apr 2022

1 answer

3.3K+ views

Dynamically add and remove items with Form, can it be done?

I wonder if the Form items can be added and removed dynamically in razor pages. Please take a look at the demo of Form from DevExpress at https://demos.devexpress.com/ASPNetCore/Demo/Form/UpdateItemsDynamically/. As you can see, the phone entry can be added and removed dynamically. I would like to leverage Telerik's Form similar to that demo. Looking at the DevExpress demo source, I don't think it would not be difficult with Telerik's Form, but I can't find any example for that. I truly appreciate any advice you can provide.

Form

answered on 27 Apr 2022

1 answer

578 views

Editing in a Grid in Hierarchy view

When in Hierarchy view .. how can I Add/Update/Delete both Master and Detail?

Grid

answered on 27 Apr 2022

1 answer

560 views

Kendo UI for jQuery's AutoComplete doesn't work; could it be due to a nullable string field?

I've been following this Kendo UI tutorial: Server filtering in ASP.NET Core AutoComplete Component Demo | Telerik UI for ASP.NET Core

But although I've made the changes I believe need to be to accommodate our data, no textbox for the user to type ahead into appears. Then looking at the code and especially at the model class, I realized that the field I'm trying to bind to the dataTextField property of kendo-autocomplete, is a nullable string. I'm wondering if that is what's causing the problems I'm experiencing? Here's some code snippets from my MVC view:

<div class="demo-section k-content">
	<h5>Find a location</h5>
	<kendo-autocomplete name="locations" style="width:100%"
		dataTextField="LocationCode"
		filter="contains"
		min-length="2">
		<datasource type="DataSourceTagHelperType.Custom" server-filter="true">
			<transport>
				<read url="@Url.Action("GetLocationByLocationCode", "SiteToSite")" data="onAdditionalData" />
			</transport>
		</datasource>
	</kendo-autocomplete>

	<div class="demo-hint">Hint: type "ca"</div>
	<script>
		function onAdditionalData() {
			return {
				text: $("#locations").val()
			};
		}
	</script>
</div>

Here's the Index action method from the controller:

public async Task<IActionResult> Index()
{
	BuildSelectLists();
	SiteToSite siteToSite = new SiteToSite();
	return View(siteToSite);
}

public void BuildSelectLists()
{
	ViewData["EmployeeList"] = new SelectList(db.PharmEmployees.Where(x => x.ActiveYn == true).OrderBy(y => y.EmployeeName).ToList(), "EmployeeId", "EmployeeName");
}

And finally here's a snippet of the PharmLocation model class, which includes LocationCode (which is the nullable string I'm binding the dataTextField to:

public partial class PharmLocation
{
    public PharmLocation()
    {
        PharmItemsReturnedExpiredFromLocs = new HashSet<PharmItemsReturnedExpiredFromLoc>();
        PharmLocation340BRegistrations = new HashSet<PharmLocation340BRegistration>();
        PharmLocationPaprogContracts = new HashSet<PharmLocationPaprogContract>();
    }

    public int LocationId { get; set; }
    public bool? ActiveYn { get; set; }
    public string? LocationCode { get; set; }
    public string? LocationType { get; set; }
    public string? Location { get; set; }

Could the fact that LocationCode is a nullable string be what's preventing the autocomplete from displaying a textbox that the user can type ahead into?

AutoComplete

answered on 27 Apr 2022

1 answer

471 views

How to multiple select a 'grouped' group of rows in a grid

In 'Grouped' grids .. is there a way to say 'select all items in one Group?

Grid

answered on 27 Apr 2022

2 answers

398 views

Kendo Menu - scrollable while items centered

Hey guys,

in my project i'm using a horizontal kendo menu for navigation through the app. Since the page has to be responsive I have to enable the scroll feature. I do prefer the centered styling and here I'm running into an issue.

<div style="display: flex; flex-flow: column;">
	<nav>
		<kendo-menu name="menuNavigation" style="justify-content: center;">
			<scrollable enabled="true" />
			<items>
				<menu-item text="@Namings.Request stellen">
					<sub-items>
						<menu-item text="@Namings.CustomerDepartment"></menu-item>
						<menu-item text="@Namings.CustomerPrivatPerson"></menu-item>
						<menu-item text="@Namings.CustomerClub"></menu-item>
					</sub-items>
				</menu-item>
				<menu-item text="@Namings.OpenRequests"></menu-item>
				<menu-item text="Laufende @Namings.Data.Loans"></menu-item>
				<menu-item text="Fahnenlager"></menu-item>
				<menu-item text="Kundendaten">
					<sub-items>
						<menu-item text="Personen">
							<sub-items>
								<menu-item text="@Namings.Crud.Read"></menu-item>
								<menu-item text="@Namings.Crud.Create"></menu-item>
								<menu-item text="@Namings.Crud.Update"></menu-item>
								<menu-item text="@Namings.Crud.Delete"></menu-item>
							</sub-items>
						</menu-item>
						<menu-item text="@Namings.CustomerClubs">
							<sub-items>
								<menu-item text="@Namings.Crud.Read"></menu-item>
								<menu-item text="@Namings.Crud.Create"></menu-item>
								<menu-item text="@Namings.Crud.Update"></menu-item>
								<menu-item text="@Namings.Crud.Delete"></menu-item>
							</sub-items>
						</menu-item>
					</sub-items>
				</menu-item>
				<menu-item text="Einstellungen">
					<sub-items>
						<menu-item text="Fahneneinstellungen & Preise"></menu-item>
						<menu-item text="Archivierte @Namings.Data.Loans"></menu-item>
					</sub-items>
				</menu-item>
			</items>
		</kendo-menu>
	</nav>
</div>

When the screen has smaller sizing, the left items of the menu will disappear without showing the scroll-to-the-left button. Scrolling to the right is still working. But the first items will be not reachable again.

This behaviour is caused by the marked line "justify-content: center". It enables that the menu items are centered but the scrolling functionality will be not working properly anymore.

I'm not the greatest css programmer, do you have an idea how to enable proper working scrolling for centered menu items?

Menu

Styling

updated answer on 26 Apr 2022

1 answer

614 views

Change background color on some entire tile containers

I have a tile layout with 11 containers in it. I need to set the background color of 3 of the tiles to a different color. I am using .NET Core tag helpers.

I tried adding a class attribute to one of the <container> tags, but it had no effect.

TileLayout

answered on 26 Apr 2022

1 answer

873 views

PDF Viewer - Custom toolbar with tag helper

Hey guys,

currently I'm using the pdf viewer with jquery initializing. In my case I have a custom configured toolbar setup with custom messages (because the german culture file doesn't translate the pdf viewer at all).

My viewer is looking like that (I have marked the lines which I've no idea how to implement these in tag helper syntax):

$('#pdfViewer').kendoPDFViewer({
	messages: {
		toolbar: {
			download: 'Herunterladen',
			pager: {
				first: 'Zur ersten Seite',
				last: 'Zur letzten Seite',
				next: 'Zur nächsten Seite',
				previous: 'Zur vorherigen Seite'
			},
			togglePan: 'Schwenkmodus',
			toggleSelection: 'Markierungsmodus',
			zoom: {
				zoomIn: 'Hineinzoomen',
				zoomOut: 'Herauszoomen'
			}
		}
	},
	pdfjsProcessing: {
		file: {
			data: @Model
		}
	},
	toolbar: {
		items: [
			{ type: 'pager', input: false, previousNext: true },
			{ type: 'zoom', zoomInOut: true },
			'toggleSelection',
			// 'search',
			'download',
			// 'print'
		]
	}
}).data('kendoPDFViewer');

Now I'm trying to implement the widget via tag helper syntax but I've no idea how to configure my custom toolbar setup. Any ideas or is it even possible with tag helper?

<kendo-pdfviewer name="pdfViewer">
	<messages>
		<toolbar download="Herunterladen">
			<pager first="Zur ersten Seite"
				   last="Zur letzten Seite"
				   next="Zur nächsten Seite"
				   previous="Zur vorherigen Seite"/>
		</toolbar>
	</messages>
	<pdfjs-processing file="@Model"/>
	<toolbar>
		<pdfviewer-toolbar-items>
			...
		</pdfviewer-toolbar-items>
	</toolbar>
</kendo-pdfviewer>

Regards,

Daniel

PDFViewer

answered on 26 Apr 2022

0 answers

117 views

Form field errors persists

Why and on what scenario would the form fields error state persist?

After an error, the validation summary and the error fields' messages get displayed. Clear event correctly renders (removes the validation messages). Then filling the correct values and submitting the form produces the expected result but also displays the field validation messages from the previous validation (the summary message do not). So I created a clear handler as follows but it behaves the same:

function formClear(e) {
   const frm = $('#myForm').data('kendoForm');
   frm.clear();
   frm.validator.reset();  //introduced this as the above also did not behave correctly.
}

Form