Telerik Forums
UI for ASP.NET Core Forum
2 answers
1.0K+ views

Hi,

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

Thanks … Ed

 

Randy Hompesch
Top achievements
Rank 1
 answered on 28 Jul 2019
1 answer
72 views

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

Thanks … Ed

 

Marin Bratanov
Telerik team
 answered on 26 Jul 2019
17 answers
1.4K+ views

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

 

Viktor Tachev
Telerik team
 answered on 26 Jul 2019
3 answers
114 views

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; }
}
Joel
Top achievements
Rank 1
Iron
 answered on 26 Jul 2019
5 answers
102 views

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

Look at my implementation picture below

 

Randy
Top achievements
Rank 1
 answered on 25 Jul 2019
3 answers
395 views

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

Fanda
Top achievements
Rank 1
 answered on 25 Jul 2019
1 answer
290 views

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!

 

Tsvetomir
Telerik team
 answered on 25 Jul 2019
3 answers
103 views

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!

YN
Top achievements
Rank 1
 answered on 24 Jul 2019
2 answers
202 views

Hi Telerik experts,

 

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

YN
Top achievements
Rank 1
 answered on 24 Jul 2019
2 answers
66 views
how to make the grid use all the width of the page?
YN
Top achievements
Rank 1
 answered on 23 Jul 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?