Hi,
How can I add the default edit and delete buttons to a grid row template?
Thanks … Ed
SInce the dropdownlistFor has no id, how to get/set value?
Thanks … Ed
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();
}
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
>
</
div
>
</
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; }
}
I have following document to implement treelist but there is not data display
Look at my implementation picture below
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;
}
}
});
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!
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!
Hi Telerik experts,
Could you educate me how to set the height of every line of Grid?