Questions on UI for ASP.NET Core Forum

0 answers

20 views

Grid Column Menu Unstick Message is Null

In our UI for ASP.NET Core R3 2020 (2020.3.915) release, the Column menu message of unsticking a column is "null".

This bug will be resolved in our next official release.

In the meantime, as a workaround, manually set the Unstick Column menu message:

.ColumnMenu(c => c.Messages(m => m.Unstick("Unstick Column")))

Grid

asked on 16 Sep 2020

0 answers

135 views

Latest Support Resources for ASP.NET Core

Installer and VS Extensions for ASP.NET Core

Visual Studio Integration Overview
A new article on how to enhance your experience in developing web applications with ASP.NET Core.

Downloading New Versions
A new article on how to keep your projects updated when using Telerik UI for ASP.NET Core.

Creating Projects
A new article on how to create a new Telerik UI for ASP.NET Core application.

General Discussions

asked on 20 Jan 2017

0 answers

2 views

update grid datasource form combobox

In asp.net core I would like to refresh a grid form combobox.

Here my code but not working

<div class="k-content">
@(Html.Kendo().ComboBox()
.Name("periods")
.HtmlAttributes(new { style = "width:100%;" })
.DataTextField("Description")
.DataValueField("NoPeriod")
.Placeholder("Choisir une période")
.Filter(FilterType.Contains)
.SelectedIndex(0)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("PeriodList_Read", "TimeSheet");
});
})
.Events(e =>
{
e.Change("onAssigneeChange");
})
)
</div>

<div class="k-content">

@(Html.Kendo().Grid<ProKontrolTimeSheet.Models.TimeSheetItemVIEW>()
.Name("TimeSheetGrid")
.Reorderable(reorder => reorder.Columns(true))
.Mobile()
.Columns(columns =>
{
//columns.Select().Width(50);
columns.Bound(p => p.NoTimeSheet).HtmlAttributes(new { id = "NoTimeSheet", style = "display : none" });
columns.Bound(p => p.Journee).Width(125).HtmlAttributes(new { style = "text-align:center" });
columns.Bound(p => p.Debut);
columns.Bound(p => p.Fin).Width(150).HtmlAttributes(new { style = "text-align:center" });
columns.Bound(p => p.Contract).Width(150).HtmlAttributes(new { style = "text-align:center" });
columns.Bound(p => p.Project).Width(150).HtmlAttributes(new { style = "text-align:center" });
columns.Bound(p => p.Category).Width(150).HtmlAttributes(new { style = "text-align:center" });
columns.Bound(p => p.Emplacement).Width(150).HtmlAttributes(new { style = "text-align:center" });

})
.Scrollable(s=> s.Virtual(true))
.HtmlAttributes(new { style = "height:750px;"})
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn)
.ShowIndexes(true))
.DataSource(dataSource => dataSource
.Ajax()
.GroupPaging(false)
.PageSize(50)
.Batch(true)
.AutoSync(true)
.ServerOperation(false)
.Read(read => read.Action("TimeSheetPeriod_Read", "TimeSheet").Data("additionalInfo")
)
)
)
</div>
<script>
var NoPeriod = 0
function onAssigneeChange(e) {
NoPeriod = e.sender.value();
$("#TimeSheetGrid").dataSource.Data("additionalInfo").read();
}

function additionalInfo() {
return {
PeriodId: NoPeriod
}
}
</script>

ComboBox

Grid

asked on 06 May 2021

0 answers

3 views

ViewComponent with Nested Kendo Control

I have created a ViewComponet that contains a Kendo textbox.

		public async Task<IViewComponentResult> InvokeAsync(ModelExpression aspFor)
		{
			return View("MyView", new MyModel(){AspFor = aspFor ... });
		}

My AspFor when it gets to the view is an instance of a ModelExpression, but the Kendo controls are expecting a string for the "Expression()" method.

How do I bind this Kendo control to the instance of the ModelExpression?

The TextBoxFor isn't happy and attempting to convert the ModelExpression instance back to its string doesn't result in HTML that contains all of the proper attributes on it.

Thanks

-Cam

TextBox

asked on 05 May 2021

1 answer

7 views

Spreadsheet NumberFormat bug

I try to use the number format #.### that should display

7 as 7

7.123678 as 7.124

7.4 as 7.4

, however is not the case...

cells.Add()
.VerticalAlign(SpreadsheetVerticalAlign.Center)
.Format("#.###");

displays 7. for 7, is there a way to fix the Excel bug and remove the dot, when there are any decimal ?

Spreadsheet

answered on 05 May 2021

1 answer

10 views

Change Grid Row color based on a row value

I have the following Grid configuratrion

                    @(Html.Kendo()
        .Grid<CoucheSondageDTO>()
        .Name("CoucheSondages")
        .Columns(columns =>
        {
            columns.Bound(c => c.CoucheDescription).Width(190).ClientTemplate("<div style='background: #=CoucheCouleur#'>#=CoucheDescription#</div>"); ;
            columns.Bound(c => c.ToitTN).Width(120);
            columns.Bound(c => c.BaseTN).Width(120);
            columns.Bound(c => c.Description).Width(120);
            columns.Command(command => { command.Destroy(); }).Width(150);
        })

it gives me this:

Is there a way to color the ful row , or the whole cell content?

Grid

answered on 05 May 2021

1 answer

11 views

ListView won't display data

The controller is definitely being hit and it is returning data in the format I was expecting. I have javascript in the "RequestEnd" and I am seeing data there. There are no errors or warnings (that pertain to the listview) in the browser's developer console. The pager shows up but says there are zero records. I have been tossing code at this for waaaaay too long.

Any suggestions? Please.....

Controller:

		[HttpPost]
		[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
		public async Task<IActionResult> UserProfiles_Search([DataSourceRequest] DataSourceRequest request)
		{
			Logger.LogInformation("In UserProfiles_Search");

                        // dummy data
			var data = new List < UserProfile >(){
				new UserProfile() { Title = "Mrs", FirstName = "Joanne", LastName = "Welch", EmailAddress = "joanne.welch@example.com", Id = Guid.Parse("3c7b201d-9744-4807-bd53-192251fb6e60") },
				new UserProfile() { Title = "Miss", FirstName = "Florence", LastName = "Lawrence", EmailAddress = "florence.lawrence@example.com", Id = Guid.Parse("6691697e-faa5-41ec-89b0-b6a040be8d2d") },
				new UserProfile() { Title = "Mrs", FirstName = "Stella", LastName = "Laurent", EmailAddress = "stella.laurent@example.com", Id = Guid.Parse("87cf6fef-0d9e-4fea-bbca-b48d9f478c61") },
				new UserProfile() { Title = "Ms", FirstName = "Sharida", LastName = "Broeren", EmailAddress = "sharida.broeren@example.com", Id = Guid.Parse("d58fcf47-88ac-4753-8d08-3cbf0318c13d") },
				new UserProfile() { Title = "Mr", FirstName = "William", LastName = "Liu", EmailAddress = "william.liu@example.com", Id = Guid.Parse("688fff10-e522-4267-a061-5553c627689e") },
				new UserProfile() { Title = "Ms", FirstName = "Brielle", LastName = "Clark", EmailAddress = "brielle.clark@example.com", Id = Guid.Parse("00fa0fa0-494f-44e5-9bb2-5fbcea156eb7") },
				new UserProfile() { Title = "Miss", FirstName = "تارا", LastName = "زارعی", EmailAddress = "tr.zraay@example.com", Id = Guid.Parse("3a7ddd17-33a3-489a-91b9-48055eefb55e") },
				new UserProfile() { Title = "Mr", FirstName = "Necati", LastName = "Karadaş", EmailAddress = "necati.karadas@example.com", Id = Guid.Parse("33c54e50-7297-4af0-914c-484f182d0e52") },
				new UserProfile() { Title = "Ms", FirstName = "Elizabeth", LastName = "Craig", EmailAddress = "elizabeth.craig@example.com", Id = Guid.Parse("6841bcec-6662-473e-9b1a-d5f533ab01d8") },
				new UserProfile() { Title = "Mr", FirstName = "Karl", LastName = "Gordon", EmailAddress = "karl.gordon@example.com", Id = Guid.Parse("43ec6d51-5b3e-4e6d-ae78-4394234950b4") },
				new UserProfile() { Title = "Mrs", FirstName = "Gretel", LastName = "Bender", EmailAddress = "gretel.bender@example.com", Id = Guid.Parse("54dab09c-1d6f-4544-aa23-0fb74f3f12c9") },
				new UserProfile() { Title = "Mrs", FirstName = "Francelina", LastName = "Nunes", EmailAddress = "francelina.nunes@example.com", Id = Guid.Parse("3c62214b-c797-4cdb-9623-cbc51ec8a86f") },
				new UserProfile() { Title = "Monsieur", FirstName = "Oskar", LastName = "Berger", EmailAddress = "oskar.berger@example.com", Id = Guid.Parse("4687147c-8630-4018-afb8-52cdb0e1937a") },
				new UserProfile() { Title = "Miss", FirstName = "Emilie", LastName = "Carpentier", EmailAddress = "emilie.carpentier@example.com", Id = Guid.Parse("8b11fb43-93da-470c-bc1a-eddce87a3ecc") },
				new UserProfile() { Title = "Mrs", FirstName = "Florence", LastName = "King", EmailAddress = "florence.king@example.com", Id = Guid.Parse("f203e0b7-ebe3-4a72-b82e-c910b9daa3fd") }
			};

			var resultData = await data.ToDataSourceResultAsync(request);

			return Json(resultData);
		}

Index.cshtml

@using SaskPower.DSS.CSRTools.Models.Models
@using SaskPower.DSS.CSRTools.Models.ViewModels
@model ProfileSearchViewModel
@{
	Layout = "";
}
<html>
<head>
	<title>Test page</title>

	<link rel="stylesheet" href="~/lib/kendo/styles/kendo.common.min.css" />
	<link rel="stylesheet" href="~/lib/kendo/styles/kendo.bootstrap.min.css" />
	<link rel="stylesheet" href="~/lib/kendo/styles/kendo.bootstrap-v4.css" />

	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/jquery.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/jszip.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/kendo.all.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/kendo.aspnetmvc.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/cultures/kendo.culture.en-CA.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/messages/kendo.messages.en-CA.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
	<script type="text/x-kendo-tmpl" id="userProfileSearchResultItem">
		<div class="userProfileSingleResult">
			<div class="name">#:firstName# #:lastName#</div>
			<div class="email">#:emailAddress#</div>
			<div class="id">#:id#</div>
		</div>
	</script>
	<div class="profile-search">
		<div class="result-count"></div>
		<div class="results">
			@(Html.Kendo().ListView<UserProfile>()
				.Name("userProfileSearchResults")
				.TagName("div")
				.ClientTemplateId("userProfileSearchResultItem")
				.DataSource(dataSource => dataSource
					.Ajax()
					.Model(m => m.Id(p => p.Id))
					.PageSize(25)
					.Read(read=>read.Action("UserProfiles_Search", "Home"))
					.ServerOperation(false)
					.Events(evt => evt
						.RequestEnd("userProfileRequestEnd")
					)
				)
				.AutoBind(true)
				.Pageable(pager => pager
				.ButtonCount(10)
				.Numeric(true)
				.Enabled(true)
			)
		)
</div>
	</div>
	<script type="text/javascript" language="javascript">
		function userProfileRequestEnd(event) {
			console.log("in userProfileRequestEnd");
			$(".profile-search .result-count").html("" + event.response.data.length + " profiles found");
		}
	</script>
</body>
</html>

Model:

	public class UserProfile
	{
		public Guid Id { get; set; }
		public string Title { get; set; }
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string EmailAddress { get; set; }
	}

Thanks

-Cam

ListView

answered on 04 May 2021

1 answer

4 views

Net Core Razor ListView Grouping with Selectable

We are setting up a new razor page using ListView following this sample (https://docs.telerik.com/aspnet-core/html-helpers/data-management/listview/binding/razor-page), with onChange event and all is working as expected.

We wanted to incorporate Grouping as well (https://demos.telerik.com/aspnet-core/listview/grouping) bringing in the grouping jQuery, .AutoBind(false), template, and css. When selecting a card, it selects the outside group, not the individual cards. Does anyone know if grouping and selecting individual cards are supported in Razor? If so, can someone provide some insight?

    $(function () {
        var groupDetails = {
            field: 'RoomDescription',
            dir: 'desc',
            compare: function (a, b) {
                if (a.items.length === b.items.length) {
                    return 0;
                } else if (a.items.length > b.items.length) {
                    return 1;
                } else {
                    return -1;
                }
            }
        }
        var listView = $("#listview").data("kendoListView");
        //var listView = $("#listView").data().kendoListView;
        var dataSource = listView.dataSource;
        dataSource.group(groupDetails);
    });

@(Html.Kendo().ListView<spRoomAvailabilityResult>()
    .Name("listview")
    .TagName("div")
    .ClientTemplateId("template")
    .Selectable(ListViewSelectionMode.Single)
    .Events(events => events.Change("onChange").DataBound("onDataBound"))
    .AutoBind(false)
    .DataSource(ds => ds
        .Ajax()
        .Model(model => {
            model.Id(p => p.ROOMID);
        })
        .Read(read => read.Url("/MyWebPage?handler=Read").Data("forgeryToken"))
    )
)

<script>
    function forgeryToken() {
        return kendo.antiForgeryTokens();
    }

    $(document).ready(function () {
        var listView = $("#listview").data("kendoListView");

        $(".k-add-button").click(function (e) {
            listView.add();
            e.preventDefault();
        });
    });
</script>
<script>
    function onChange(arg) {

        var selected = $.map(this.select(), function (item) {
            return $(item).text();
        });

        alert(selected);
    }
</script>

<script type="text/x-kendo-template" id="template">
    <div class="k-listview-item">
        <h4 class="k-group-title">#= data.value #</h4>
        <div class="cards">
            # for (var i = 0; i < data.items.length; i++) { #
            <div class="k-card" style="width: 15em; margin:2%">
            <div class="k-card-body">
                    <h4 class="k-card-title">#= data.items[i].ROOMNUMBER #</h4>
                    <h5 class="k-card-subtitle">Capacity: #= data.items[i].CAPACITY #</h5>
                </div>
            </div>
            # } #
        </div>
    </div>
</script>

Any insight would be appreciated. Thank you!

ListView

answered on 04 May 2021

2 answers

12 views

Dynamic text on custom command button

Hi there,

I have a custom command column in my grid, as follows...

.Columns(columns =>

{

columns.Bound(b => b.Created_DisplayString);

columns.Bound(b => b.Closed_DisplayString);

columns.Command(command => command.Custom("Close or ReOpen").Click("onCloseReOpen"));

})

My viewmodel has a (readonly) property that returns either "Close" or "ReOpen" (as appropriate)

public string CloseOrReOpen

{

get

{

return (Closed_DateTime.HasValue ? "ReOpen" : "Close");

}

How can I bind the text of the Command button to this property pls. (instead of the current "Close or ReOpen")?

Thx,

Erik

Grid

answered on 03 May 2021

1 answer

8 views

Partial views with form in core wizard

Hi,

I am struggling to use core UI wizard with respect to my requirement. What I need from wizard control is to provide navigation (Next, Previous), load partial views and submit data to a form. Following is an example;

<form>

Step 1

Partial View 1

Step 2

Partial View 2

Finish (Form submission)

Wizard

answered on 03 May 2021