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
>
Hello I would like to know if there is a way to add new tabs to a tab strip via a button that contain a kendo chat widget inside the tab?
I have seen examples of how to open new tabs with a button and I have also been able to have a chat widget inside of a tab but I cannot get them to work together.
Is this possible?
I have a grid in which the first column of the Grid is a drop down (ForeignKey column), while all other columns are readonly. Whenever user makes a selection, I want all the readonly columns be populated with relevant data against the selection made in the drop down column. For example: Drop down column is the Badge No of the employees, when user selects a badge #, I want first name, last name etc. populated for the selected badge # in other columns for that particular row only. How can I achieve this?
01.
@(Html.Kendo().Grid<
IMCC.TrainingTracker.Models.EmployeeMasterViewModel
>()
02.
.Name("trainersGrid")
03.
.Columns(columns =>
04.
{
05.
columns.ForeignKey(c => c.emp_badge_no, (SelectList)(ViewBag.employees)).Width(90);
06.
columns.Bound(c => c.emp_first_name);
07.
columns.Bound(c => c.emp_last_name);
08.
columns.Bound(c => c.emp_company).Width(150);
09.
columns.Bound(c => c.emp_designation_text).Width(150);
10.
columns.Bound(c => c.emp_email_address).Width(120);
11.
})
12.
.Editable(editable => editable.Mode(GridEditMode.InCell))
13.
.ColumnMenu()
14.
.Pageable(p => p.Refresh(true).PageSizes(true))
15.
.Selectable(selectable =>
16.
{
17.
selectable.Mode(GridSelectionMode.Single);
18.
selectable.Type(GridSelectionType.Row);
19.
})
20.
.Sortable(sortable =>
21.
{
22.
sortable.SortMode(GridSortMode.MultipleColumn);
23.
})
24.
.Events(e => e.Edit("onEdit"))
25.
.Filterable()
26.
.Resizable(r => r.Columns(true))
27.
.Events(events =>
28.
{
29.
events.Change("onGridChange"); events.DataBound("onGridDataBound");
30.
})
31.
.DataSource(dataSource => dataSource
32.
.Ajax()
33.
.Model(model =>
34.
{
35.
model.Id(p => p.id);
36.
model.Field(p => p.emp_first_name).Editable(false);
37.
model.Field(p => p.emp_last_name).Editable(false);
38.
model.Field(p => p.emp_company).Editable(false);
39.
model.Field(p => p.emp_designation_text).Editable(false);
40.
model.Field(p => p.emp_email_address).Editable(false);
41.
})
42.
.Read(read => read.Action("CourseTrainers_Read", "CourseTrainer").Data("GetCurrentCourse"))
43.
Update(update => update.Action("CourseMaster_Update", "CourseMaster"))
44.
.Destroy(destroy => destroy.Action("CourseMaster_Destroy", "CourseMaster"))
45.
)
46.
)
Several fields are configured as not editable and working as designed except for:
- ReportCategoryDesc (Text field)
- IsVisibleInMenu (Boolean)
Any ideas why these 2 are still editable?
Thanks
@( Html.Kendo().Grid<ShelfLife.ViewModels.Telerik.ReportMaintenanceItemVM>()
.Name("client")
.Columns(columns =>
{
columns.Bound(c => c.ReportID).Width(70).Title("ID");
columns.Bound(c => c.ReportTitle);
columns.Bound(c => c.ReportDescription);
columns.Bound(c => c.Categories.ReportCategoryDesc).Filterable(ftb => ftb.Multi(true).Search(true));
columns.Bound(c => c.ReportOrder).Width(100).Title("Order");
columns.Bound(c => c.TRDXFile);
columns.Bound(c => c.IsVisibleInMenu).Width(130).ClientTemplate("<input type='checkbox' #= IsVisibleInMenu ? checked='checked' :'' # />");
columns.Bound(c => c.Active).Width(120).ClientTemplate("<input type='checkbox' #= Active ? checked='checked' :'' # />"); ;
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.HtmlAttributes(new { style = "height: 900px;" })
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable()
.Pageable(pageable => pageable.PageSizes(new int[] { 10, 20, 50, 100, 999 }))
.ColumnMenu()
.Groupable()
.Navigatable()
.Sortable()
.Scrollable(scr => scr.Height(900))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
//.Model(model => model.Id(p => p.ReportID))
.Model(model => {
model.Id(p => p.ReportID);
model.Field(p => p.ReportID).Editable(false);
model.Field(p => p.ReportCategoryID).Editable(false);
model.Field(p => p.ReportCategoryDesc).Editable(false);
model.Field(p => p.ReportDescription).Editable(false);
model.Field(p => p.ReportOrder).Editable(false);
model.Field(p => p.ReportTitle).Editable(false);
model.Field(p => p.TRDXFile).Editable(false);
model.Field(p => p.IsVisibleInMenu).Editable(false);
})
.Create("Filter_Multi_Editing_Create", "Telerik")
.Read("Filter_Multi_Editing_Read", "Telerik")
.Update("Filter_Multi_Editing_Update", "Telerik")
.Destroy("Filter_Multi_Editing_Destroy", "Telerik")
)
)
I am using MultiColumnComboBox in my application which binds to the datasource correctly but when I click the dropdown button, the list does not render properly. All the data shows in one column. The column headings render properly though.
<
div
class
=
"col-md-6 col-sm-12"
style
=
"margin-top:10px"
>
@(Html.Kendo().MultiColumnComboBoxFor(model=>model.Trainers)
.Name("trainersCombo")
.DataTextField("emp_badge_no")
.DataValueField("id")
.Filter("contains")
.FilterFields(new string[] { "emp_first_name", "emp_last_name", "emp_company" })
.Columns(columns =>
{
columns.Add().Field("emp_badge_no").Title("Badge No").Width(100);
columns.Add().Field("emp_company").Title("Company").Width(200);
columns.Add().Field("emp_first_name").Title("First Name").Width(200);
columns.Add().Field("emp_last_name").Title("Last Name").Width(100);
})
.FooterTemplate("Total #: instance.dataSource.total() # items found")
.HtmlAttributes(new { style = "width:100%;" })
.Height(400)
.DataSource(source => source
.Custom()
.Transport(transport => transport
.Read(read =>
{
read.Action("GetAllEmployees", "CourseTrainer").Data("onAdditionalData");
}))
)
)
</
div
>
and here is the code for GetAllEmployees
public JsonResult GetAllEmployees(string badgeNo)
{
var items = db.EmployeeMasters.AsQueryable();
if (!string.IsNullOrWhiteSpace(badgeNo))
{
items = items.Where(p => p.emp_badge_no == badgeNo);
}
var data = items.Select(p => new { p.id, p.emp_badge_no, p.emp_first_name, p.emp_last_name, p.emp_company });
return Json(data, JsonRequestBehavior.AllowGet);
}
I have 2018.3.1017.545 version of Kendo.mvc.dll. Below image shows how the data is render in the drop down.