Questions on UI for ASP.NET Core Forum

3 answers

109 views

Problem adding Arc Gauge as listview item

I have tried to add Arc Gauge in the listview item.

Even through i have created 10 items, only one Arc Gauge will be displayed in each page.

OEE value starts from 60% & increases by 1 for each item. You can see that in the screenshots, in page 1, only one arc gauge with 64% is displayed. The arc gauge with value 60% ~ 63% are missing.

In page 2, only one arc gauge with 69% is displayed. The arc gauge with value 65% ~ 68% are missing.

Can you let me know know how to add Arc Gauge correctly in ListView?

@{

ViewData["Title"] = "Dashboard";

}

@model VelaMfgDashboard.Models.Dashboard.DashboardModel;

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

<h1>Dashboard: @Model.ProductionLine</h1>

<div class="dashboard-table">

<h2 class="title">OEE</h2>

<div class="data">

@(Html.Kendo().ListView(Model.OEEDatas)

.Name("oeeListView")

.TagName("div")

.ClientTemplateId("oee-template")

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.ServerOperation(false)

.Read(read => read.Action("OEEDatas_Read", "Dashboard")))

.Pageable(pageable => pageable

.Refresh(true)

.ButtonCount(5)

.PageSizes(new[] { 5, 15, 30 })

)

</div>

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

<div class="oee-container" k-widget>

<dl>

<dt>Machine #:MachineNo#</dt>

<dd>

@(Html.Kendo().ArcGauge()

.Name("oeeGauge")

.Value(60)

.Scale(x => x.Min(0).Max(100))

.CenterTemplate("#:OEE#%")

.ToClientTemplate()

)

</dd>

</dl>

</div>

</script>

public class DashboardModel

{

public string ProductionLine { get; set; }

public List<OEEDataModel> OEEDatas { get; set; }

public DashboardModel()

{

OEEDatas = new List<OEEDataModel>();

}

public class DashboardController : Controller

{

public IActionResult Index(string productionLine)

{

return View(new DashboardModel() { ProductionLine = productionLine });

}

public ActionResult OEEDatas_Read([DataSourceRequest] DataSourceRequest request)

{

DashboardModel model = new DashboardModel();

for (int i = 0; i < 10; i++)

{

model.OEEDatas.Add(new OEEDataModel() { MachineNo = i + 1, OEE = 60 + i });

}

var dsResult = model.OEEDatas.ToDataSourceResult(request);

return Json(dsResult);

}

public string ProductionLine { get; private set; }

}

ListView

answered on 26 Jul 2019

5 answers

99 views

Following document but not display data

I have following document to implement treelist but there is not data display

Look at my implementation picture below

TreeList

answered on 25 Jul 2019

3 answers

386 views

Custom Validation for Telerik ASP.NET MVC Grid using TypeScript

According to https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation,I write the following script. It can be executed in javascript. But it has a syntax error when using typescript. The syntax "kendo.ui.validator" doesn't exists. How can I solve this problem and what "kendo.ui.validator" means?

$.extend(true, kendo.ui.validator, {
rules: {
required(input) {
if (input.is("[name='LineNumber']")) {
if ($.trim($(input).val()) === "") {
input.attr("data-required-msg", "@ViewLocalizer["LineNumberNullErrorMessage"]");

return false;
}
}

if (input.is("[name='ParameterName']")) {
if ($.trim($(input).val()) === "") {
input.attr("data-required-msg", "@ViewLocalizer["ParameterNameNullErrorMessage"]");

return false;
}
}

return true;
}
}
});

Grid

answered on 25 Jul 2019

1 answer

284 views

how to make Grid height dynamically changes?

Hi Telerik expert,

Could you please educate me how to make Grid height dynamically change ?

like attached picture, if we have 2 rows, only show 2 rows height, if we have 40 rows, show 30 in first page, 10 in second page.

Thank you!

Grid

answered on 25 Jul 2019

3 answers

99 views

How to make menu on top with account information

Hi Telerik expert,

I want to create a menu on top with home log on left corner and login account on right corner. like the picture I attached.

also allow to go to sub menu.

Could you please educate me how to create? or give me sample code? mine is Telerik ASP.net Core. Thanks!

Menu

answered on 24 Jul 2019

2 answers

195 views

How to make Grid line height smaller?

Hi Telerik experts,

Could you educate me how to set the height of every line of Grid?

Grid

answered on 24 Jul 2019

2 answers

64 views

How to remove the blank right and left side on the page?

how to make the grid use all the width of the page?

Grid

answered on 23 Jul 2019

1 answer

204 views

Does Telerik have a Search Bar Functionality for .Net Core?

Does Telerik have a Search Bar Functionality for .Net Core? I see one for Asp Net AJAX, curious if they have for .Net Core?

Thanks,

https://www.telerik.com/products/aspnet-ajax/searchbox.aspx

General Discussions

answered on 22 Jul 2019

0 answers

173 views

Get Full HTML from TagBuilder Masked Text Box?

Anyone know how to go into a Taghelper output, and receive the full HTML markup for Masked TextBox?

The following was not working:

output (only gave some of the html)

output.GetChildContentAsync().GetContent(); (Was Not working !!)

It Should look like this,

This is our Taghelper Edit Code,

namespace Test.Web.UI.TagHelpers

{
[HtmlTargetElement(HtmlTargetElementConts.SearchTextBox)]
public class TestTextBoxTagHelperGeneral : MaskedTextBoxTagHelper
{

[HtmlAttributeName]
public bool Bold { get; set; }

[HtmlAttributeName]
public int? Height { get; set; }

[HtmlAttributeNotBound]
public int DefaultHeight { get { return 50; } }

public IptsTextBoxTagHelperGeneral(IKendoHtmlGenerator generator) : base(generator)
{
}

public override void Process(TagHelperContext context, TagHelperOutput output)
{
if (Bold || Height.HasValue)
{
if (Height.HasValue)
output.Attributes.Add("style", "height:" + Height + "px");
else
output.Attributes.Add("style", "height:" + DefaultHeight + "px");
}
Name = "test";
base.Process(context, output);