Questions on UI for ASP.NET Core Forum

2 answers

98 views

inline edit textbox width not matching col width

Is there a way to control the width of the controls (whether they be a textbox, or fk combo etc) in the inline edit mode?

Any sample code would be greatly appreciated.

THanks … Ed

Grid

answered on 28 Jul 2019

2 answers

1.0K+ views

How to add edit and delete buttons to row template

Hi,

How can I add the default edit and delete buttons to a grid row template?

Thanks … Ed

Grid

answered on 28 Jul 2019

1 answer

72 views

how to get/set dropdownlistfor value in javasacript

SInce the dropdownlistFor has no id, how to get/set value?

Thanks … Ed

DropDownList

answered on 26 Jul 2019

17 answers

1.4K+ views

Problem with Foreign Key Column display while in Grid InCell edit mode.

I am trying to implement a drop down list in a grid using the ForeignKey editor template. The grid edit mode is InCell. The “ForeignKey.cshtml” file is in my “Shared > Editor” Templates directory, and I have decorated my ViewModel attribute with the “ForeignKey” UIHint. Everything looks great when the grid loads (the correct text value displays for each grid item. See attached screenshot). Upon attempting to edit a grid item, however, the text display value changes to its corresponding numeric id value and the dropdownlist fails to load. Basically, it just looks like a regular textbox with the foreign key ID as the value. Screenshots are attached for reference. Relevant code is also below for reference. Thanks.

Relevant ViewModel property:

[UIHint("GridForeignKey")]

public int ManagerID { get; set; }

Relevant Grid code within the View file:

....

.Columns(columns =>
{
columns.Bound(p => p.Code).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
columns.Bound(p => p.Name).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
columns.Bound(p => p.StartDate).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
columns.Bound(p => p.EndDate).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
columns
.ForeignKey(p => p.ManagerID, (IEnumerable<GCEdge.Models.ViewModels.CustomerViewModels.ProjectManagerLookupViewModel>)ViewData["projectManagerLookups"], "ManagerID", "Name")
.EditorTemplateName("GridForeignKey")
.Title("Manager")
.Width(150)
.HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });

columns.Bound(p => p.Active).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
})

GridForeignKey.cshtml Editor Template:

@model object

@(
Html.Kendo().DropDownListFor(m => m)
.OptionLabel("Please select")
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

Controller method that loads the IEnumerable collection into the ViewData object:

private void LoadProjectViewData(int ID, string Code)
{
IEnumerable<ProjectManagerLookupViewModel> PMs = _context
.Employees
.ToList()
.Select(e => new ProjectManagerLookupViewModel
{
ManagerID = e.ID,
Name = e.LastName + ", " + e.FirstName
})
.ToList();

ViewData["rootID"] = ID;
ViewData["projectManagerLookups"] = PMs;

if (ID > 0)
{
ViewData["rootCode"] = Code;
}

LoadCustomerLookup();
}

Grid

answered on 26 Jul 2019

3 answers

114 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

102 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

396 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;
}
}
});