Questions on UI for ASP.NET Core Forum

1 answer

121 views

Line chart series z-index

How to set the z-index of the chart line series so that the y-axis line does not cover it? Thanks.

Chart

answered on 07 Nov 2018

1 answer

108 views

Issue Saving/Loading grid options

Borrowing code from this page: https://demos.telerik.com/kendo-ui/grid/persist-state
I added save/load buttons to my grid's toolbar. I'm outputting the data in the console that gets saved and loaded, and they appear to match perfectly, however, when I load the data I've saved, the grid displays no data.

Any idea what I'm doing wrong here?

function LoadPrefs() {

var grid = $("#Inspections").data("kendoGrid");

var options = localStorage["kendo-grid-options"];

console.log(JSON.parse(options));

if (options) {

grid.setOptions(JSON.parse(options));

}

function SavePrefs() {

var grid = $("#Inspections").data("kendoGrid");

var opts = grid.getOptions();

console.log(opts);

localStorage["kendo-grid-options"] = kendo.stringify(opts);

}

Grid

answered on 06 Nov 2018

1 answer

368 views

Is it possible to add new item dynamically?

I'm trying to use the MultiSelect widget to show tags on an object and allow the users to add new ones dynamically that will get created as they add them (and linked to the object upon save of the page). I'm basing the work on the following example:

https://demos.telerik.com/kendo-ui/multiselect/addnewitem

However, I'm trying to do this with the ASP.NET Core widget, and I'm running into problems when trying to set up the datasource. It appears I can only add a Read method and cannot add a Create similar to the above linked example.

Is this not supported in the ASP.NET Core version? Or is there a ASP.NET Core example somewhere on the site that I just can't find?

MultiSelect

answered on 06 Nov 2018

0 answers

91 views

Dynamic creation of columns

How to create columns dynamically

According to configuration file

Grid

asked on 06 Nov 2018

1 answer

104 views

Row filtering autocomplete question

I have a grid with GridFilterMode.Row. I am paging on the server retrieving "PageSize" number of records at a time. I am also using the request.Filters and request.Sorts when I get the data. The problem I have is with the autocomplete on the filter. It does not return all the distinct values for the field, only the distinct values for the "PageSize" number of values that I am returning. It is using the same controller action as my datasource for paging, sorting, etc. Is there a way to populate those filters from all distinct values of the field instead of only for "PageSize" distinct values?

Grid

answered on 05 Nov 2018

3 answers

425 views

Kendo Core Grid not populating - Custom Ajax

All,

I am having a heck of a time with a very basic implementation using custom Ajax binding.

My implementation is extremely simple. I have verified that the JSON result is returned as CamalCase (Hence the KendoSerializerSettings).

Please see below.

Controller

public ActionResult YearRead([DataSourceRequest]DataSourceRequest request)

{

IEnumerable<VehMetaYearDto> years = _metaService.GetYears();

DataSourceResult result = years.ToDataSourceResult(request);

return Json(result, KendoSerializerSettings);

}

JSON Result

{

"Result": {

"Data": [

{

"Year": 2017,

"IsDeleted": false,

"DeleterUserId": null,

"DeletionTime": null,

"LastModificationTime": null,

"LastModifierUserId": null,

"CreationTime": "2018-10-30T12:15:48.1414343",

"CreatorUserId": null,

"Id": 1

},

{

"Year": 2016,

"IsDeleted": false,

"DeleterUserId": null,

"DeletionTime": null,

"LastModificationTime": null,

"LastModifierUserId": null,

"CreationTime": "2018-10-31T08:14:16.9153819",

"CreatorUserId": null,

"Id": 2

}

],

"Total": 2,

"AggregateResults": null,

"Errors": null

},

"TargetUrl": null,

"Success": true,

"Error": null,

"UnAuthorizedRequest": false,

"__abp": true

}

Razor

@(Html.Kendo().Grid<VehMetaYearDto>()

.Name("YearGrid")

.Columns(c =>

{

c.Bound(x => x.Year);

})

.DataSource(d => d

.Ajax()

.Read(r => r.Action("YearRead", "VehMetaAdmin"))

)

The grid renders blank sadly.

PS - The code formatting for this forum is very difficult to use

Grid

answered on 05 Nov 2018

1 answer

119 views

Grid binding

I am using core 2.1. Attempting to use tag-helpers, but documentation is pretty bad.

We have a grid mostly working for when there is an existing object, but I don't see a way to use the grid for something new.

For example, if my page is creating a new client, and I'm using the grid for a list of phone numbers, I don't want the grid to go to the server with new entries (create operations), because the client does not exist yet.

Is there a way to add items to the grid in an offline fashion, then bind the data to the model and post the list back with all the other client information?

I want one endpoint for a "New Client" operation that can perform all the validation in one sweep, including validating phone numbers.

Grid

answered on 05 Nov 2018

3 answers

3.2K+ views

Submitting from Modal Window using Razor Pages

Hi! My app uses Razor Pages and I'm trying to do the following:

1. Open a modal dialog, which is itself a Razor Page with a model.

2. Submit from that modal dialog and call the OnPost method in its model.

When I click submit, it simply closes the dialog and never calls the OnPost method.

Here's my code:

First, the calling page, Customer.cshtml:

@page

@addTagHelper "*, Kendo.Mvc"

@model MySite.Test.CustomerModel

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Customer</title>

<link href="//kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" />

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.aspnetmvc.min.js"></script>

<script src="https://demos.telerik.com/aspnet-core/lib/jquery-validation/jquery.validate.js"></script>

<script src="https://demos.telerik.com/aspnet-core/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.timezones.min.js"></script>

</head>

<body>

@{

string[] actions = new string[] { "Close" };

}

<kendo-window name="window"

modal="true",

title="Add a New Customer"

draggable="true"

resizable="true"

width="800" ,

on-close="onClose" ,

style="display:none" ,

content-url="@Url.Content("/Test/AddCustomer")" ,

actions="actions">

<content>

loading user info...

</content>

<popup-animation enabled="true" />

</kendo-window>

<button id="undo" class="btn btn-sm btn-outline-primary right">Click here to open the window.</button>

<div class="responsive-message"></div>

<script>

function onClose() {

$("#undo").show();

}

$(document).ready(function () {

$("#undo").bind("click", function () {

$("#window").data("kendoWindow").open();

$("#window").data("kendoWindow").center();

$("#undo").hide();

});

</script>

</body>

</html>

It has a trivial page model, which I will not include here.

Then the Modal Dialog Page, AddCustomer.cshtml:

@page

@addTagHelper "*, Kendo.Mvc"

@model MySite.Test.AddCustomerModel

@{

Layout = "";

}

<div class="container-fluid body-content">

<form method="post">

<div asp-validation-summary="All" class="text-danger"></div>

<div class="form-group">

<label asp-for="Customer.FirstName" class="control-label"></label>

<input asp-for="Customer.FirstName" class="form-control" autofocus />

<span asp-validation-for="Customer.FirstName" class="text-danger"></span>

</div>

<div class="form-group">

<label asp-for="Customer.Middle" class="control-label"></label>

<input asp-for="Customer.Middle" class="form-control" />

<span asp-validation-for="Customer.Middle" class="text-danger"></span>

</div>

<div class="form-group">

<label asp-for="Customer.LastName" class="control-label"></label>

<input asp-for="Customer.LastName" class="form-control" />

<span asp-validation-for="Customer.LastName" class="text-danger"></span>

</div>

<div class="form-group">

<input type="submit" value="Create" class="btn btn-primary" />

</div>

</form>

</div>

and its non-trivial model, which contains the OnPost that is never being called:

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MySite.Test

{

public class AddCustomerModel : PageModel

{

[BindProperty]

public AddCustomerViewModel Customer { get; set; }

public void OnGet()

{

Customer = new AddCustomerViewModel();

}

public ActionResult OnPost()

{

// I am never getting to this method.

if (ModelState.IsValid)

{

// Do some stuff

return Redirect("/Test/Customer");

}

return Page();

}

public class AddCustomerViewModel

{

[MaxLength(256)]

[Display(Name = "First Name")]

[Required]

public string FirstName { get; set; }

[MaxLength(256)]

[Display(Name = "Middle Name")]

[Required]

public string Middle { get; set; }

[MaxLength(256)]

[Display(Name = "Last Name")]

[Required]

public string LastName { get; set; }

}

I'm kinda stumped and the only example I can fine is for Razor Views, not Razor Pages. Please advise.

Thanks!

Window

answered on 31 Oct 2018

1 answer

247 views

Material Theme / Floating labels

Hello,

With the new Material Theme, how can we have floating labels on Telerik controls (dropdownlist, combobox, ...) ?

General Discussions

answered on 31 Oct 2018

1 answer

140 views

Get value of model in gauge

Hello,

Since I do not want a static value in my gauge, I want to use some model value. By checking the documentation of the gauge, there is none example to bind it with a model. Is there any example to perform this in asp.net core?

Kind regards.

General Discussions

answered on 31 Oct 2018