Questions on UI for ASP.NET Core Forum

1 answer

466 views

Unable to resolve 'Telerik.UI.for.AspNet.Core (>= 2020.1.114)' for '.NETCoreApp,Version=v3.0'

Hello,

We have VS 2019 installed on build server (Azure DevOps 2019).

Project builds perfectly fine using VS 2019.

However using Azure DevOps build pipeline, we are getting unable to resolve error.

Please take a look at this screenshot and suggest a probable solution.

Thank you

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<config>
<add key="http_proxy" value="http://..." />
<add key="https_proxy" value="https://..." />
</config>
<packageSources>
<add key="Telerik" value="https://nuget.telerik.com/nuget/" />
</packageSources>
<packageSourceCredentials>
<Telerik>
<add key="Username" value="..." />
<add key="ClearTextPassword" value="..." />
</Telerik>
</packageSourceCredentials>
</configuration>

General Discussions

answered on 24 Jan 2020

1 answer

146 views

Make panelbar fill available space

hello -- I'm using a panel bar in an MVC app and would like for it to fill the available space,whether the user is looking at the app on a big screen or phone. Specifically, I would like for the panelbar's height to be the same as the viewport and then, when the page is loaded, each of the 5 sections in the panel bar should shrink or grow dynamically to fill the entire panelbar control with no white space left underneath.

Is there a way to accomplish this?

thanks

Yvette Whitaker

PanelBar

answered on 23 Jan 2020

3 answers

5.0K+ views

No packages exist with this id in source(s): Telerik

Hello,

I am working on a .net core web application which builds perfectly fine on my local machine.

We have VS 2019 installed on our build machine. I am able to build successfully without any errors inside Visual Studio.

However, when using TFS 2017 on build machine to build the project, I am getting "No packages exist with this id in source(s): Telerik"

I was just wondering if you could help me with a probable solution?

Thank you.

General Discussions

answered on 23 Jan 2020

3 answers

282 views

Can autocomplete be used with ajax binding within a razorpage?

I see the example in the docs setting a custom datasource, but I dont see any mention of using Ajax for the datasource binding? It looks like this wont work with razorpages using one of the page handlers for the datasource read methods. So I guess another option is to use a web api handler and use that?

AutoComplete

answered on 22 Jan 2020

3 answers

996 views

Client side validation not working in inline-edit mode

Hello,

I have the following grid implementation:

<kendo-grid name="grid"
auto-bind="true"
selectable="multiple, row"
persist-selection="true"
on-change="Grid_SelectionChanged"
on-data-bound="Grid_Loaded"
on-remove=""
resizable="true">
<datasource type="DataSourceTagHelperType.Ajax" auto-sync="false" server-filtering="true" server-sorting="true" page-size="10"
on-request-end="@MODAL.RequestEndFunctionName" on-error="@MODAL.ErrorHandlerFunctionName">
<transport>
<read url="@Url.Action("ReadItemList", "Users", new { Area = "Admin" })" />
<create url="@Url.Action("Create", "Users", new { Area = "Admin" })" />
<destroy url="@Url.Action("Delete", "Users", new { Area = "Admin" })" />
<update url="@Url.Action("UpdateFromGrid", "Users", new { Area = "Admin" })" />
</transport>
<schema>
<model id="Id">
<fields>
<field name="Enabled" type="boolean" default-value="true"></field>
<field name="LockoutEnabled" type="boolean" default-value="false"></field>
<field name="Id" type="Guid"></field>
<field name="UserName" type="string"></field>
<field name="Email" type="string"></field>
<field name="PhoneNumber" type="string"></field>
</fields>
</model>
</schema>
</datasource>
<groupable enabled="true" />
<editable mode="inline" />
<filterable enabled="true" />
<sortable enabled="true" />
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20, 50, 100, 1000 }" />
<columns>
<column selectable="true" width="37"></column>
<column field="Id" title="Id" hidden="true"></column>
<column field="Enabled"
title="Engedélyezett?"
template="#= getCheckboxHtml(Enabled) #"
editor="ZBoolEditor"
min-screen-width="60"
width="150"></column>
<column field="UserName" title="User name" min-resizable-width="180" width="360" html-attributes='new Dictionary<string, object> { ["style"] = "font-weight: bold;" }'></column>
<column field="Email" title="E-mail address" min-screen-width="180" width="360"></column>
<column field="PhoneNumber" title="Phone number" min-screen-width="180" width="360"></column>
<column field="LockoutEnabled"
title="Locked"
template="#= getLockedHtml(LockoutEnabled) #"
editor="ZBoolEditor"
min-screen-width="600"></column>
<column title="Műveletek" width="150">
<commands>
<column-command text=" " name="edit" visible="false"></column-command>
<column-command text="<span class='fas fa-edit'></span>" name="editinpopup" click="Grid_EditInPopup"></column-command>
<column-command text="<span class='k-icon k-i-close'></span>" name="custom" click="Grid_RemoveItem"></column-command>
</commands>
</column>
</columns>

</kendo-grid>

My problem that the client side validaion not working, I can leave the empty cell without any validation error message and I can press the Update button without restriction. I have data annotations in my model, for example:

[Required(ErrorMessage = "'{0}' mező megadása kötelező!")]
[Display(Name = "E-mail cím")]
[EmailAddress(ErrorMessage = "Az e-mail cím formátuma nem érvényes!")]
[StringLength(255, ErrorMessage = "A(z) '{0}' mező hossza minimum {2}, maximum {1} karakter lehet!", MinimumLength = 5)]
[GridFastEditEnabled()]
public string Email { get; set; }

Thank you for help!

Grid

answered on 21 Jan 2020

1 answer

240 views

ListView in RazorPage

Hi, has anyone a running sample of a ListView? Here is my code

the returning json from OnPostReadThumbnails looks good, but the ListView is emtpy

{"data":[{"slfd":"0","sdatname":"Test"}],"total":1,"aggregateResults":null,"errors":null}

cshtml.cs

public class IndexModel : PageModel

{

private readonly ILogger<IndexModel> _logger;

public static IList<ThumbnailViewModel> thumbs;

public IndexModel(ILogger<IndexModel> logger)

{

_logger = logger;

}

public void OnGet()

{

if(thumbs == null)

{

thumbs = new List<ThumbnailViewModel>();

thumbs.Add(new ThumbnailViewModel { SLFD = "0", SDATNAME = "Test" });

}

public JsonResult OnPostReadThumbnails([DataSourceRequest] DataSourceRequest request)

{

return new JsonResult(thumbs.ToDataSourceResult(request));

}

cshtml

<script type="text/x-kendo-tmpl" id="template">

<div class="product">

<h3>#:SDATNAME#</h3>

<h1>#=SLFD#</h1>

<h2>SDATNAME</h2>

</div>

</script>

<div class="demo-section k-content wide">

@(Html.Kendo().ListView<Data.ThumbnailViewModel>()

.Name("listView")

.TagName("div")

.ClientTemplateId("template")

//.Scrollable(ListViewScrollableMode.Endless)

.DataSource(ds => ds.Ajax()

.Read(read => read.Url("/Index?handler=ReadThumbnails").Data("forgeryToken"))

)

.Pageable()

)

</div>

ListView

answered on 21 Jan 2020

5 answers

407 views

Binding JSON content to ToolTip

Been trying to determine the correct configuration using tag helpers for the tool tip and so far, documentation nor demos have helped. According to docs, the "content" property could call a script which does not seem to work. Using the property "context-hander" does but ten the template set does not work. GetPersonData below returns a JSON object with one property: EmployeeId.

HTML

<div>

<span id="PersonInfo" class="fas fa-info-circle"> </span>

<kendo-tooltip name="PersonInfo" position="bottom" width="300" height="300" content-handler="GetPersonData" content-template-id="PersonTooltipTemplate"></kendo-tooltip>

</div>

JS

function GetPersonData(e)

{

var personId = document.getElementById("hidPersonId").value;

$.ajax(

{

async: true,

url: "",

data: { id: personId },

contentType: "application/json",

success: function (data)

{

return data; //{ EmployeeId: "12345" }

},

error: function (errorThrown)

{

console.log("bad");

console.log(errorThrown);

}

});

}

<script type="text/x-kendo-template" id="PersonTooltipTemplate">

<div class="d-flex">

<div class="col-12 col-md-4 col-lg-4 col-xl-4 order-0">

<label class="control-label">Employee Id</label>

</div>

<div class="col-12 col-md-4 col-lg-4 col-xl-4 order-1">

#= data.EmployeeId #

</div>

</script>

ToolTip

answered on 17 Jan 2020

4 answers

196 views

Grid "Busy" control from Theme Builder

I used your theme builder which... thank you. These things are complicated.

Theme Builder Link

I love what it gave me except for the busy indicators. I swear, I thought I was being punked the first time I saw this. These are horrendous. Prior to discovering the theme builder, I was going just without anything from the theme builder and I had one large circular motion busy indicator. That was awesome.

How do I get back there? Can you tell me how to use my theme except go back to the previous busy indicator?

To create my theme, I picked the bootstrap v3 theme and change some colors... then downloaded it. The builder itself doesn't let you see the busy indicator on the grid so you have to use the theme to see what it provides.

Thanks for your help,

Joel

Grid

answered on 15 Jan 2020

2 answers

306 views

How to change button label text for Tag Helper

Can't find this in the documentation anywhere. Is it possible?

Upload

answered on 14 Jan 2020

5 answers

1.2K+ views

Razorpage Grid with Checkboxes Example result - hope this helps others

I just finished a rather painful journey into putting together a demo to be able to use the Telerik Grid on a Razor page at all and then how to add checkboxes to it. Sounds easy, but it was not. Just try to find useful (or in some cases any) documentation on this stuff.

Start with the https://github.com/telerik/ui-for-aspnet-core-examples solution and use the Kendo.Examples.RazorPages project. I added a Mange folder under pages and a "Lab" page under that (Lab.cshtml / Lab.cshtml.cs) - here is the code and my discussion follows:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text.Json;

using Kendo.Mvc.Extensions;

using Kendo.Mvc.UI;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Kendo.Examples.RazorPages.Pages.Manage

{

public class LabModel : PageModel

{

public static IList<ClientDto2> ClientsDtos;

[TempData]

public string TempMessage { get; set; }

public bool ShowTempMessage => !string.IsNullOrWhiteSpace(TempMessage);

public void OnGet()

{

Console.WriteLine("Manage OnGet");

try

{

if (ClientsDtos != null) return;

ClientsDtos = new List<ClientDto2>();

//var json = await GetClientJson().ConfigureAwait(false);

// substitute test data

var json =

"[{\"id\": 1,\"clientId\": \"client1\",\"clientName\": \"Client Credentials 1\",\"description\": \"Credentials 1\",\"userCodeType\": \"1\"},"

+

"{\"id\": 2,\"clientId\": \"client2\",\"clientName\": \"Client Credentials 2\",\"description\": \"Credentials 2\",\"userCodeType\": \"2\"}]"

;

var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };

var clientList = JsonSerializer.Deserialize<List<ClientDto2>>(json, options);

foreach (var client in clientList)

{

ClientsDtos.Add(new ClientDto2()

{

Id = client.Id,

ClientId = client.ClientId ?? "0",

ClientName = client.ClientName ?? "None",

Description = client.Description ?? "None",

UserCodeType = client.UserCodeType ?? "None",

Admin = client.Id % 2 == 1

});

}

catch (Exception ex)

{

Console.WriteLine(ex);

TempMessage = ex.Message;

if (ex.InnerException != null)

TempMessage += " : " + ex.InnerException.Message;

}

public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)

{

var res = new JsonResult(ClientsDtos.ToDataSourceResult(request));

return res;

}

public JsonResult OnPostUpdate([DataSourceRequest] DataSourceRequest request, ClientDto2 client)

{

// the updatedClientData contains the updated data (only one record at a time in this example)

var updatedClientData = ClientsDtos.Where(x => x.Id == client.Id).Select(x => client);

// test changing data here

client.UserCodeType = "99";

TempMessage =

$"Admin = {client.Admin}, Management = {client.Management}, Office = {client.Office} ";

// use this data to update DB here and return the updated data

return new JsonResult(new[] { client }.ToDataSourceResult(request, ModelState));

}

public class ClientDto2

{

public int Id { get; set; }

public string ClientId { get; set; }

public string ClientName { get; set; }

public string Description { get; set; }

public string UserCodeType { get; set; }

public bool Admin { get; set; }

public bool Management { get; set; }

public bool Office { get; set; }

}

@page

@model Kendo.Examples.RazorPages.Pages.Manage.LabModel

@using Kendo.Mvc.UI

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf

@Html.AntiForgeryToken()

@{

ViewData["Title"] = "Lab";

}

<h1>Lab</h1>

<form method="post">

@*FYI the following does not fire unless the page is reloaded

it does not fire for a data update*@

@if (!string.IsNullOrEmpty(Model.TempMessage))

{

var statusMessageClass = Model.TempMessage.StartsWith("Error") ? "danger" : "success";

@if (Model.TempMessage != "")

{

<div class="alert alert-@statusMessageClass alert-dismissible" role="alert">

<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>

@Model.TempMessage

</div>

}

@(Html.Kendo().Grid<ClientDto2>().Name("grid")

.Columns(columns =>

{

columns.Bound(column => column.ClientId).Width(100).Title("Client");

columns.Bound(column => column.ClientName);

columns.Bound(column => column.Description);

columns.Bound(column => column.UserCodeType);

columns.Bound(column => column.Admin)

.ClientTemplate(

"<input class='k-checkbox' data-val=#: Admin# id='Admin#: id#' name='Admin' " +

"type='checkbox' #= Admin ? checked='checked' : '' # onclick='return false;' value=#: Admin# >" +

"<label for='Admin#: id#' class='k-checkbox-label'></label>");

columns.Bound(column => column.Management)

.ClientTemplate(

"<input class='k-checkbox' data-val=#: Management# id='Management#: id#' name='Management' " +

"type='checkbox' #= Management ? checked='checked' : '' # onclick='return false;' value=#: Management# >" +

"<label for='Management#: id#' class='k-checkbox-label'></label>");

columns.Bound(column => column.Office)

.ClientTemplate(

"<input class='k-checkbox' data-val=#: Office# id='Office#: id#' name='Office' " +

"type='checkbox' #= Office ? checked='checked' : '' # onclick='return false;' value=#: Office# >" +

"<label for='Office#: id#' class='k-checkbox-label'></label>");

columns.Command(column => { column.Edit(); });

})

.DataSource(ds => ds.Ajax()

.Read(r => r.Url("/Manage/Lab?handler=Read").Data("forgeryToken"))

.Update(u => u.Url("/Manage/Lab?handler=Update").Data("forgeryToken"))

.Create(c => c.Url("/Manage/Lab?handler=Create").Data("forgeryToken"))

.Destroy(d => d.Url("/Manage/Lab?handler=Destroy").Data("forgeryToken"))

.Model(m => m.Id(id => id.Id))

.PageSize(20)

)

.Scrollable()

)

</form>

<script type="text/javascript">

function forgeryToken() {

return kendo.antiForgeryTokens();

}

</script>

By far the biggest hurdle here was adding in the checkboxes. The default grid shows "true" and "false" until you go onto edit mode and then it shows an actual checkbox (BTW that comes from Shared/EditorTemplates/Boolean.cshtml). It sure would be nice if the grid default would be to show the checkboxes but since that is not the case I went in search of how to show them. At first I went down the rabbit hole at the https://demos.telerik.com/aspnet-core/grid/rowtemplate page - I could not get this to work. In my case it seems if you add ClientRowTemplate that wipes out any other column data and I could not get it to work like the display shows after many tries. Then I stumbled on the ClientTemplate (good luck finding any documentation on this one!) and after much trial and error I got a checkbox on the grid, but without a class and it was ugly and out of place so added the "k-checkbox" class and the checkbox disappeared. It turns out you need to add the label next to it or it disappears - WTF! Lastly I needed to make the checkbox read only since clicking it in browse mode would change it but that would not change the underlying data and so I found an HTML hack to add the onclick return false function which essentially makes it read only. - So holy crap this was a painful journey but I hope this post helps others.

Grid

answered on 13 Jan 2020