Telerik Forums
UI for ASP.NET MVC Forum
1 answer
129 views

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).

 

 

 

Tsvetina
Telerik team
 answered on 10 Jan 2019
1 answer
97 views

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.

Viktor Tachev
Telerik team
 answered on 10 Jan 2019
1 answer
829 views

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

        }

 

 

Alex Hajigeorgieva
Telerik team
 answered on 09 Jan 2019
2 answers
363 views

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.

 

Edward
Top achievements
Rank 1
 answered on 07 Jan 2019
2 answers
242 views

 

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

 

Peter
Top achievements
Rank 1
 answered on 04 Jan 2019
14 answers
1.8K+ views
So I've got a Kendo Grid populated by a view model.  All works fine when I am editing existing rows but when I try to add a new row I get a "Value cannot be NULL" error on my DropDownListFor control.  The property for the selected id of the dropdownlist is a string and it is a non-nullable field in the database.

Here is my code:

ViewModel:
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; }
}
UserFacilities is my list for the dropdownlist and User_Facility_ID would be the selected item.

Controller:
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);
}
This is the Get method for the grid which populates the ViewModel.  I never get to the POST.  It throws the error as soon as I click the "Add New Record" button on the grid.

EditorTemplate:
@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>
This is the DropDownListFor in my EditorTemplate being used on the grid.

I feel like I am missing something simple here...like somehow initializing the User_Facility_ID to an empty string or something so on a new record it doesn't have a null value which it is not allowed to have.   I have tried doing this in the ViewModel but unless I was doing it wrong it didn't help.
John
Top achievements
Rank 1
 answered on 03 Jan 2019
5 answers
384 views

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?

Plamen
Telerik team
 answered on 03 Jan 2019
5 answers
898 views

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.)
Alex Hajigeorgieva
Telerik team
 answered on 02 Jan 2019
1 answer
4.4K+ views

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")
        )
    )

John
Top achievements
Rank 1
 answered on 31 Dec 2018
2 answers
224 views

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.

 

Wasim
Top achievements
Rank 1
 answered on 30 Dec 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?