Hi all,
I currently have a grid that contains a datetime column that we use to display just the time. When retrieving the time data, we're parsing it with code as follows before the data is being returned to the grid:
var tz = System.TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time");schedule.StartTimeDT = System.TimeZoneInfo.ConvertTimeToUtc(DateTime.Parse(schedule.StartTime), tz);
In the grid definition the column is set up as such:
columns.Bound(c => c.StartTimeDT).Title("Start Time").HtmlAttributes(new { style = "text-align: center;" })
When viewed in from a computer that's not in the EST zone, the time value gets automatically changed to whatever the computer timezone is. We got around to forcing it to display EST in the view mode of the grid by modifying the column definition to use a client template:
columns.Bound(c => c.StartTimeDT).Title("Start Time").HtmlAttributes(new { style = "text-align: center;" }).EditorTemplateName("_TimePicker1").ClientTemplate("\\#= moment(data.StartTimeDT).tz('America/New_York').format('HH:mm') \\#");
Which works fine in view mode. But once I click on the edit button to go into the inline edit mode, the time is being changed again. How do I stop this automatic time zone shift when in edit mode?
My .cshtml file contains
@(Html.Kendo().Grid(Model.PlanOrderToMachineModelList)
.Name("GrdPlanOrderToMachine")
.AutoBind(false)
.BindTo(Model.PlanOrderToMachineModelList)
.Columns(columns =>
{
columns.Bound(p => p.CustomerOrder).Filterable(true).Width(120).Title("Customer Order");
columns.Bound(p => p.SlitPattern).Filterable(false).Width(100).Title("Slit Pattern");
columns.Bound(p => p.FinishSeq).Filterable(false).Width(50).Title("Fin Seq");
columns.Bound(p => p.Status).Filterable(false).Width(50).Title("Status");
columns.Bound(p => p.WorkCenter).Filterable(false).Width(100).Title("Work Center");
columns.Bound(p => p.CSR).Filterable(false).Width(50).Title(("CSR"));
columns.Bound(p => p.Roll).Filterable(false).Width(100).Title("Roll");
columns.Bound(p => p.Width).Filterable(false).Width(100).Title("Width");
columns.Bound(p => p.Length).Filterable(false).Width(100).Title("Length");
columns.Bound(p => p.FinishDate).Filterable(false).Width(100).Title("Finish Date") .ClientTemplate((
@Html.Kendo().DatePicker()
.Name("FDPicker_#=CustomerOrder#")
.Value("#=FinishDate#")
.Format("{0:dd/MM/yyyy}")
.ToClientTemplate()).ToHtmlString());
columns.Bound(p => p.ShipDate).Filterable(false).Width(100).Title("Ship Date").Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.FinishTime).Filterable(false).Width(100).Title("Finish Time").Format("{0:HH:mm}");
columns.Bound(p => p.ShipTime).Filterable(false).Width(100).Title("Ship Time").Format("{0:HH:mm}");
columns.Bound(p => p.PackageId).Filterable(false).Width(100).Title("Pkg");
columns.Bound(p => p.OrderType).Filterable(false).Width(100).Title("Ord Type");
columns.Bound(p => p.ServiceVariant).Filterable(false).Width(100).Title("Srvc. Vmt");
columns.Bound(p => p.TentativeInd).Filterable(false).Width(100).Title("Ttty");
columns.Bound(p => p.Machines).Filterable(false).Width(100).Title("Mach ID").ClientTemplate((
@Html.Kendo().ComboBox()
.Name("Machines_#=CustomerOrder#")
.DataTextField("MachineId")
.DataValueField("MachineId")
.HtmlAttributes(new { style = "width:250px" })
//.Filter("contains")
//.AutoBind(false)
//.MinLength(3)
//.BindTo((System.Collections.IEnumerable)"#=Machines#")
//.BindTo((System.Collections.IEnumerable)Model.Machines[0].MachineId)
.ToClientTemplate()).ToHtmlString());
//.DataSource(p => p.Machines)
//columns.Bound(p => p.Machines).Filterable(false).Width(100).Title("Mach ID").ClientTemplate("#=Machines.MachineId#");
columns.Bound(p => p.PlanningInd).Filterable(false).Width(100).Title("Pln Ind");
columns.Bound(p => p.PlanningSeq).Filterable(false).Width(100).Title("Seq");
columns.Bound(p => p.Grd).Filterable(false).Width(100).Title("Grd");
columns.Bound(p => p.Message).Filterable(false).Width(100).Title("Msg");
columns.Bound(p => p.MasterRoll).Filterable(false).Width(100).Title("Master-roll");
columns.Bound(p => p.MasterRollDesc).Filterable(false).Width(100).Title("Master-roll Description");
columns.Bound(p => p.Customer).Filterable(false).Width(100).Title("Customer");
columns.Bound(p => p.SumOfSlitWidth).Filterable(false).Width(100).Title("SumOfSlitWidth").Hidden(true);
columns.Bound(p => p.MaximumCrossWidth).Filterable(false).Width(100).Title("MaximumCrossWidth").Hidden(true);
columns.Bound(p => p.ProductWidth).Filterable(false).Width(100).Title("ProductWidth").Hidden(true);
})
//.ToolBar(toolbar =>
//{
// toolbar.Save();
//})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Resizable(resize=>resize.Columns(true))
.Editable(p => p.Mode(GridEditMode.InCell))
.HtmlAttributes(new { style = "height:400px;width:900px" })
.Events(e => e.DataBound("onGridDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Batch(true)
.Model(model =>
{
model.Id(p => p.CustomerOrder);
model.Field(p => p.CustomerOrder).Editable(false);
model.Field(p => p.SlitPattern).Editable(false);
model.Field(p => p.FinishSeq).Editable(false);
model.Field(p => p.Status).Editable(false);
model.Field(p => p.WorkCenter).Editable(false);
model.Field(p => p.CSR).Editable(false);
model.Field(p => p.Roll).Editable(false);
model.Field(p => p.Width).Editable(false);
model.Field(p => p.Length).Editable(false);
model.Field(p => p.FinishDate).Editable(false);
model.Field(p => p.ShipDate).Editable(false);
model.Field(p => p.ShipTime).Editable(false);
model.Field(p => p.PackageId).Editable(false);
model.Field(p => p.OrderType).Editable(false);
model.Field(p => p.ServiceVariant).Editable(false);
model.Field(p => p.TentativeInd).Editable(false);
model.Field(p => p.PlanningSeq).Editable(false);
model.Field(p => p.Grd).Editable(false);
model.Field(p => p.Message).Editable(false);
model.Field(p => p.MasterRoll).Editable(false);
model.Field(p => p.MasterRollDesc).Editable(false);
model.Field(p => p.Customer).Editable(false);
})
.Read(read => read.Action("Index", "PlanOrderToMachine").Data("AdditionalParameters"))
.PageSize(10)
.Update("Index","Home")
)
)
I am getting the combobox and the datepicker, but the values are not binded. It is coming as empty. Please help me to solve this issue. I am using Client Template.
Please give a code sample, that will help me better.
Kind Regards,
Suniel
Hello,
so, i want to make multi level hierarchy and i dont know how to make it, The one i want to make is Hierarchy of ProductID , so i can click on it and display the product name , price , etc.
here's my current code,
controller :
namespace TelerikMvcApp100.Controllers{ public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "Welcome to ASP.NET MVC!"; return View(); } public ActionResult Headers_Read([DataSourceRequest]DataSourceRequest request) { using (var salesheaders = new SalesHeaderEntities1()) { IQueryable<Header> headers = salesheaders.Headers; DataSourceResult result = headers.ToDataSourceResult(request, header => new { header.OrderID, header.CustomerID, header.TotalAmount }); return Json(result); } } public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request, int orderID) { using (var salesheaders = new SalesHeaderEntities1()) { IQueryable<Order> orders = salesheaders.Orders.Where(order => order.OrderID == orderID); DataSourceResult result = orders.ToDataSourceResult(request, order => new { order.LinesID, order.ProductID, order.Quantity, order.Unit, order.TotalPrice }); return Json(result); } } public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request, int productID) { using (var salesheaders = new SalesHeaderEntities1()) { IQueryable<Product> products = salesheaders.Products.Where(product => product.ProductID == productID); DataSourceResult result = products.ToDataSourceResult(request, product => new { product.ProductName, product.Price }); return Json(result); } } }}
view :
@(Html.Kendo().Grid<TelerikMvcApp100.Models.Header>() .Name("grid") .Columns(columns => { columns.Bound(header => header.OrderID); columns.Bound(header => header.CustomerID); columns.Bound(header => header.TotalAmount); }) .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Headers_Read", "Home")) ) .ClientDetailTemplateId("client-template"))<script id="client-template" type="text/x-kendo-template"> @(Html.Kendo().Grid<TelerikMvcApp100.Models.Order>() .Name("grid_#=OrderID#") .Columns(columns => { columns.Bound(order => order.ProductID); columns.Bound(order => order.Quantity); columns.Bound(order => order.Unit); columns.Bound(order => order.TotalPrice); }) .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Orders_Read", "Home", new { orderID = "#=OrderID#" })) ) .Pageable() .ToClientTemplate() ) </script>@(Html.Kendo().Grid<TelerikMvcApp100.Models.Product>() // CORRECT THIS CODE PLS .Name("grid_#=ProductID#") .Columns(columns => { columns.Bound(product => product.ProductName); columns.Bound(product => product.Price); }) .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Products_Read", "Home", new { producID = "#=ProductID#" })) ) .Pageable() .ToClientTemplate())
Is there a way to set a panelbar individual panel title text with a ViewBag value instead of a literal string? In my code on line 7, the text is set as "Not Submitted". But I would like to populate it with a string value I build and place in Viewbag that shows a count of records for the type of "Not Submitted". It would read like this - "Not Submitted - (20)". If it's possible, what would be the syntax to use a variable/constant instead of literal string?
01.@(Html.Kendo().PanelBar()02..Name("panelbar")03..ExpandMode(PanelBarExpandMode.Single)04..HtmlAttributes(new { style = "width:100%" })05..Items(panelbar =>06.{07. panelbar.Add().Text("Not Submitted")08. .Expanded(false)09.}I'm trying to show a line chart (date axis) that changes color. I realize the best way to do this is probably to have multiple series and each series a different color.
@model TimeLineChartViewModel<div style=""> @(Html.Kendo().Chart(Model.Data) .Name("chart123jjhj423") .Title("Probability of Failure") .Legend(false) .Series(series => { foreach (var dataGroup in Model.Data.GroupBy(x => x.Color)) { series.Line(x => x.Value, x => x.DateTime) .NoteTextField(Util.GetPropertyName<TimeLineChartDataPoint>(x => x.Note)) //.CategoryField("Color") // causes error (Cannot read property 'getTime' of undefined) .Notes(notes => notes .Label(label => label .Position(ChartNoteLabelPosition.Outside)) .Position(ChartNotePosition.Bottom)) .Color(dataGroup.Key) .Style(ChartLineStyle.Smooth) .Markers(x => x.Visible(false)); } }) .CategoryAxis(axis => axis .Date() .BaseUnit(ChartAxisBaseUnit.Days) .RoundToBaseUnit(false) // .Title("time") .Labels(labels => labels.Rotation(310).Step(365 * 5).Format("yyyy")) .MajorGridLines(lines => lines.Visible(false)) .MinorGridLines(lines => lines.Visible(false)) .MajorTicks(lines => lines.Visible(true).Step(365 * 5).Size(15)) .MinorTicks(lines => lines.Visible(false).Step(365)) ) .ValueAxis(axis => axis.Numeric() .Max(1.05) .Labels(labels => labels.Template("#= kendo.format('{0:P0}', value ) #") // labels.Visible(true) ) .Title("Probability of Asset Failure") .MajorGridLines(lines => lines.Visible(false)) //.MajorUnit(0.2) //.MinorUnit(0.5) .Visible(true) ) //.Zoomable(zoomable => zoomable // .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y)) // .Selection(selection => selection.Lock(ChartAxisLock.Y)) //) .Tooltip(tooltip => tooltip .Visible(true) .Template("#= kendo.format('{0:p0}', value) # - #= kendo.toString(category, 'd') #") //.Template("#= kendo.toString(category, 'd') # ") ))</div>
public class TimeLineChartViewModel{ public List<TimeLineChartDataPoint> Data { get; set; } public bool Legend { get; set; } public string Title { get; set; } public string XAxisTitle { get; set; } public string YAxisTitle { get; set; }}public class TimeLineChartDataPoint{ public DateTime DateTime { get; set; } public double Value { get; set; } public string Note { get; set; } public string Color { get; set; }}
When I try running the above, only one color shows for all data points? How do I get the line color to be different? Setting the Category field in the series generates an error:
jquery?v=iMGCS2tVV4GjIWlaD6Jt8YXksWeHsA8tUmaXpQPvHJw1:1 Uncaught TypeError: Cannot read property 'getTime' of undefined at fu (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1) at wo (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1) at hi (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1) at init.roundToTotalStep (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1) at new init (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1) at initFields (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1) at init (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1) at i [as constructor] (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1) at new i (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1) at i.createCategoryAxes (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)Attached I have attached some sample data (sorry it's a screenshot).
I'm getting a "ReferenceError: Roles is not defined" in the javascript when I try to add a new record. It all works well for existing ones.
Please see info here https://stackoverflow.com/questions/54089911/create-toolbar-function-not-working-with-multiselect-in-teleris-grid-for-mvc
Thanks in advance.

I've created some grids that are bound to dynamic data. I used dapper to get the data i want from my database. for each grid i have set the model id and fields with the correct data types. my problem is, when creating/updating/deleting a record, the grid only sends an empty object to the appropriate controller. using reflection i can see this object has no fields, properties, or methods. Below I've included my grid configuration (Razor) and the update method. Can anyone see where i've gone wrong? i followed the example at this link to get as far as i currently am https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-bind-to-collection-dynamic/KendoMVCWrappers
Grid
<div class="container">
@{
int ctr = 0;
foreach(var table in Model)
{
<div style="margin-top:50px;">
@(Html.Kendo().Grid(table)
.Name($"Grid_{ctr.ToString()}")
.DataSource(ds=>ds
.Ajax()
.Model(m=> {
var dict = (IDictionary<string, object>)table.First();
var keyfield = dict.ElementAt(0).Key;
m.Id(keyfield);
foreach (var i in dict )
{
string key = i.Key;
var valuetype = i.Value.GetType();
m.Field(key,valuetype);
}
})
.Events(e=> { e.Sync("syncHandler");e.Change("syncHandler"); })
.Update(update=>update.Action("Update","MultiTable"))
.Create(create=>create.Action("Create","MultiTable"))
)
.BindTo(table)
.Pageable()
.Events(e => { e.Save("saveHandler");e.SaveChanges("saveChangesHandler"); })
.ToolBar(toolBar => { toolBar.Create();toolBar.Save(); })
.Editable(e=>e.Mode(GridEditMode.InCell)))
</div>
ctr++;
}
}
</div>
update method (dynamic id is always blank/empty)
[HttpPost]
public async Task<IActionResult> Update([DataSourceRequest]DataSourceRequest request, dynamic id)
{
//var m = id.model;
Type myType = id.GetType();
FieldInfo[] fields = myType.GetFields();
foreach (var field in fields)
{
var name = field.Name;
var tmp = field.GetValue(null);
if (tmp is int)
{
Console.Write("int");
}
else if (tmp is string)
{
Console.Write("string");
}
}
IList<PropertyInfo> props = new List<PropertyInfo>(myType.GetProperties());
foreach (PropertyInfo prop in props)
{
object propValue = prop.GetValue(id, null);
}
return View();
}
Have a field in ViewModel:
[Required]
[UIHint("ValueViewTemplate")]
[Display(Name = "Approval Type")]
public int ApprovalTypeId { get; set; }
||||||||||||||||||||||||||||||||||||||||||||||||||||
Using GridEditMode.PopUp:
||||||||||||||||||||||||||||||||||||||||||||||||||||
ValueViewTemplate is:
@model object
@(Html.Kendo().DropDownListFor(m => m)
.DataValueField("Id")
.DataTextField("Value")
.OptionLabel("- Select -")
.BindTo((System.Collections.IEnumerable)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)])
.Template("<span class=\"drop-down-list-item\" title=\"#=Value#\">#=Value#</span>")
)
||||||||||||||||||||||||||||||||||||||||||||||||||||
Works, but only problem is the label is not showing "Approval Type" from [Display(Name = "Approval Type")] of the viewmodel, but the actual field name of ApprovalTypeId.
What should one do..? First time using Grid control... thnks.
Hi, inside a TabStrip item (which is inside a Grid detail template) I need to call a Helper function and pass some property from the TabStrip's parent Master to it.
@(Html.Kendo().TabStrip() .Name("TabStripsEliXer#=idTotaalBeoordeling#") .SelectedIndex(0) .Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In))) .Items(tabstrip => { tabstrip.Add().Text("IdentiteitTab").Selected(true).Content(@<text> <div id="pdf" style="width:70%;height:500px;"> @using Elixer_Bekostiging.Helpers @XtendisHelper.GetPDF_BPVO(SomeProperty) </div>
SomeProperty needs to be the ID of a document that exists in the Master Grid data, for example 486629 as shown in the attached screenshot.
GetPDF_BPVO expects an integer and returns a PDF as <object> stream (string). How can I pass the DocumentID (486629) to this Helper?
When I hardcode the value it is working as expected, now I need it to be dynamic :-)
Preferably this must be like "Get me the DocumentID from this selected row's Master property xtendisdocumentPerStamnummers where SoortDocument = B".
N.B. The other SoortDocument types (O and I) are needed inside another TabStrip Item.
TIA,
Peter
public class ProposalTypeViewModel{ public decimal ID { get; set; } public string User_Facility_ID { get; set; } public string Code { get; set; } public string Description { get; set; } public bool Active { get; set; } public IEnumerable<SelectListItem> UserFacilities { get; set; }}public ActionResult ProposalTypes(){ var context = new PASSEntities(); User user = new User(); int userID = user.GetUserIDByBNLAccount(User.Identity.Name); var model = (from a in context.Proposal_Types join b in context.User_Facilities on a.User_Facility_ID equals b.ID join c in context.Users_Roles on b.ID equals c.User_Facility_ID join d in context.Users on c.User_ID equals d.ID join e in context.Roles on c.Role_ID equals e.ID where d.ID == userID && e.Name == "User_Facility_Admin" select new ProposalTypeViewModel() { ID = a.ID, User_Facility_ID = a.User_Facility_ID, Code = a.Code, Description = a.Description, Active = a.Active, UserFacilities = (from f in context.User_Facilities join g in context.Users_Roles on f.ID equals g.User_Facility_ID join h in context.Users on g.User_ID equals h.ID join i in context.Roles on g.Role_ID equals i.ID where h.ID == userID && i.Name == "User_Facility_Admin" select new SelectListItem { Text = f.ID, Value = f.ID }) }); return View(model);}@model PASSAdmin.ViewModels.UserFacilityAdmin.ProposalTypeViewModel<div class="editor-label"> @Html.Label("User Facility")</div><div class="editor-field"> @Html.DropDownListFor(model => model.User_Facility_ID, new SelectList(Model.UserFacilities, "Value", "Text"), "(Select One)") @Html.ValidationMessageFor(model => model.User_Facility_ID)</div>