hello, I'm working through a trial of UI for .NET Core and not having much luck with a very simple task. I'm following the example in the demo for cascading dropdowns and I can't even get the first dropdownlist to load. It just shows a list of items marked Undefined.

Here's the code from the View (Create.cshtml):

 <div class="form-group">
                <label asp-for="CategoryID" class="control-label"></label>
                @(Html.Kendo().DropDownList()
             .Name("categories")
             .HtmlAttributes(new { style = "width:100%" })
             .OptionLabel("Select category...")
             .DataTextField("CategoryName")
             .DataValueField("CategoryID")
             .DataSource(source =>
                     {
                  source.Read(read =>
                         {
                      read.Action("LoadCategories", "Groups");
                  });
             })
                )
                <span asp-validation-for="CategoryID" class="text-danger"></span>
            </div>


            <div class="form-group">
                <label asp-for="SubcategoryID" class="control-label"></label>
                
                @(Html.Kendo().DropDownList()
              .Name("subcategories")
              .HtmlAttributes(new { style = "width:100%" })
              .OptionLabel("Select subcategories...")
              .DataTextField("SubcategoryName")
              .DataValueField("SubcategoryID")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("LoadSubcategories", "Groups")
                          .Data("filterSubcategories");
                  })
                  .ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("categories")
                )

                <span asp-validation-for="SubcategoryID" class="text-danger"></span>
            </div>

            <script>
                function filterSubcategories() {
                    return {
                        categories: $("#categories").val()
                    };
                }
            </script>

Here's the code from GroupsController.cs:

public JsonResult LoadCategories()
        {
            List<Category> categories = new List<Category>();

            var catQuery = from d in _context.Category
                             where d.IsActive
                             orderby d.CategoryName // Sort by name.
                             select d;


            categories = catQuery.ToList();

            return new JsonResult(categories);
        }

        public JsonResult LoadSubcategories(int? categories)
        {
            List<Subcategory> subcategories = new List<Subcategory>();

            var catQuery = from d in _context.SubCategory
                           where d.CategoryID == categories.GetValueOrDefault()
                           orderby d.SubCategoryName // Sort by name.
                           select d;


            subcategories = catQuery.ToList();

            return new JsonResult(subcategories);
        }

I get the same result when using code in GroupsController LoadCategories more similar to your demo source code:

return Json(_context.Category
                     .Select(c => new { CategoryID = c.CategoryID, CategoryName = c.CategoryName }).ToList());

Clicking on item in DropDownList in a Grid Popup Editor causes a javascript "undefined" error. Attached are screen shots from the Chrome debugger. Relevant code is below:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using TelerikTest.Models;
using System.Net.Http;
using Newtonsoft.Json;
using System.Text;
using System.IO;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;

namespace TelerikTest.Controllers {
   public class PeopleController : Controller {

      public PeopleController() {
         }

      private List<Person> InitPersons() {
         var persons = new List<Person>();
         persons.Add(new Person() { Id = 1, FirstName = "Joe", LastName = "Smith", JobTitle = "President", Street = "409 State St.", City = "Chicago", State = "IL", Zip = "60606" });
         persons.Add(new Person() { Id = 2, FirstName = "Bob", LastName = "Brown", JobTitle = "Vice President", Street = "1200 Fifth Ave.", City = "New York", State = "NY", Zip = "10005" });
         return persons;
         }

      public IActionResult Index() {
         var persons = InitPersons();
         return View(persons);
         }

      public IActionResult EditForms(int id) {
         var persons = InitPersons();
         var person = persons.Single(x => x.Id == id);
         ViewData["name"] = person.LastName;

         var cfi = new List<CategoryFormItem>();
         cfi.Add(new CategoryFormItem() { id = 1, category = "Medical", form = "Medical Conditions" });
         cfi.Add(new CategoryFormItem() { id = 2, category = "Medical", form = "Physical" });
         cfi.Add(new CategoryFormItem() { id = 3, category = "Permission", form = "Participation" });
         cfi.Add(new CategoryFormItem() { id = 4, category = "Permission", form = "Travel" });
         cfi.Add(new CategoryFormItem() { id = 5, category = "Incident", form = "Behavior" });
         cfi.Add(new CategoryFormItem() { id = 6, category = "Incident", form = "Injury" });

         var cf = new List<CategoryForm>();
         foreach (var f in cfi) {
            var c = new CategoryForm();
            c.id = f.id;
            c.cf = $"{f.category}: {f.form}";
            cf.Add(c);
            }

         ViewData["categoryforms"] = cf;

         var pforms = new List<PersonFormViewModel>();
         var vmForm = new PersonFormViewModel() { id = 1, category = "Medical", formId = 1, name = "Physical", personId = id, received = DateTime.Today, remarks = "Required physical" };
         pforms.Add(vmForm);

         return View(pforms);
         }

      public IActionResult CreateForm([DataSourceRequest]DataSourceRequest request, [FromForm] PersonFormViewModel vm) {
         return Json(new[] { vm }.ToDataSourceResult(request, ModelState));
         }

      public IActionResult UpdateForm([DataSourceRequest]DataSourceRequest request, PersonFormViewModel vm) {
         return Json(new[] { vm }.ToDataSourceResult(request, ModelState));
         }

      public IActionResult DeleteForm([DataSourceRequest]DataSourceRequest request, PersonFormViewModel vm) {
         return Json(new[] { vm }.ToDataSourceResult(request, ModelState));
         }
      }
   }

@model IEnumerable<TelerikTest.Models.PersonFormViewModel>
@using Kendo.Mvc.UI

@section Scripts {
<script type="text/javascript">
    function onDataBound() {
        var btn = $("#addPeopleForm").data("kendoButton");
        if (btn == undefined) {
            $("#addPeopleForm").kendoButton({
                icon: "plus",
                click: function (e) {
                    e.preventDefault();
                    var grid = $('#gridPersonForms').data('kendoGrid');
                    grid.addRow();
                }
            });
        }
    };
</script>
}

<div class="text-center">
     <h1 class="display-4">@ViewData["name"]</h1>
</div>
<div>
    @(Html.Kendo().Grid<PersonFormViewModel>(Model)
       .Name("gridPersonForms")
       .Columns(columns => {
           columns.Bound(c => c.id).Hidden();
           columns.Bound(c => c.personId).Hidden();
           columns.Bound(c => c.formId).Hidden();
           columns.Bound(c => c.category).Hidden().ClientGroupHeaderTemplate("#= value #");
           columns.Bound(c => c.catfrm).Hidden();
           columns.Bound(c => c.name).Width(100).Title("Form");
           columns.Bound(c => c.received).Width(60).Title("Date Received");
           columns.Bound(c => c.remarks).Title("Remarks");
           columns.Command(c => { c.Edit(); c.Destroy(); }).Width(250).ClientHeaderTemplate("<button id='addPeopleForm'>Add New Form Receipt</button>");
       })
       .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AddPeopleForm"))
       .Events(e => e.DataBound("onDataBound"))
       .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
       .DataSource(dataSource => dataSource
           .Ajax()
           .Model(m => m.Id(p => p.id))
           .Create("CreateForm", "People")
           .Update("UpdateForm", "People")
           .Destroy("DeleteForm", "People")
           .Group(g => g.Add(x => x.category))
           .ServerOperation(false)
           )
    )
</div>

using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace TelerikTest.Models {
   public class PersonFormViewModel {
      public int id { get; set; }
      public int personId { get; set; }
      public int formId { get; set; }

      [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString ="{0:MM/dd/yyyy}")]
      [DataType(DataType.Date)]
      [DisplayName("Date Received")]
      public DateTime received { get; set; }

      [DisplayName("Remarks")]
      public string remarks { get; set; }

      public string category { get; set; }
      public string name { get; set; }

      [UIHint("CategoryFormEditor")]
      [DisplayName("Category: Form")]
      public CategoryForm catfrm { get; set; }

      public PersonFormViewModel() {
         }
      }
   }

@model TelerikTest.Models.PersonFormViewModel

<div class="k-edit-form-container">
    @Html.HiddenFor(m => m.id)
    @Html.HiddenFor(m => m.personId)
    @Html.HiddenFor(m => m.formId)

    <div class="k-edit-label">
        @Html.LabelFor(model => model.catfrm)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.catfrm)
        @Html.ValidationMessageFor(model => model.catfrm)
    </div>

    <div class="k-edit-label">
        @Html.LabelFor(model => model.received)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.received)
        @Html.ValidationMessageFor(model => model.received)
    </div>
    <div class="k-edit-label">
        @Html.LabelFor(model => model.remarks)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.remarks)
        @Html.ValidationMessageFor(model => model.remarks)
    </div>
</div>

@using Kendo.Mvc.UI

@(Html.Kendo().DropDownList()
   .Name("catfrm")
   .DataValueField("id")
   .DataTextField("cf")
   .BindTo((System.Collections.IEnumerable) ViewData["categoryforms"])
   )

using System;
namespace TelerikTest.Models {
   public class CategoryForm {
      public int id { get; set; }
      public string cf { get; set; }

      public CategoryForm() {
         }
      }

   public class CategoryFormItem {
      public int id { get; set; }
      public string category { get; set; }
      public string form { get; set; }

      public CategoryFormItem() {
         }
      }
   }

Hi,

I have some values that are DateTimeOffsets. I'm having trouble formatting them in a grid though.

This code:

produces:

2019-06-06T17:47:52.0256922+01:00

when what I want to see is:

06/06/2019 17:47:52

Is the Grid unable to format DateTimeOffsets, or am I missing something?

Thanks,

Gary

Hi,

I have 4 columns (Round1, Round2, Round3, Total) of which Total is a non editable int column.Whenever user updates Round1, 2 and 3 by clicking Update.. The total is saved in the database using Employee_Update action and my hope is that Total column will automatically refresh.  But thats not happening. Only Round1, 2 and 3 refresh.

Here is my grid

@(Html.Kendo().Grid<EmployeeManagement.Models.Employee>()
                    .Name("EmployeeGrid")
                    .Columns(columns =>
                    {

                        columns.Bound(p => p.EmployeeID);
                        columns.Bound(p => p.Round1);
                        columns.Bound(p => p.Round2);
                        columns.Bound(p => p.Round3);
                        columns.Bound(p => p.Total).Width(100);
                        columns.Command(command => { command.Edit(); }).Width(250);
                    })
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                    .Pageable(a => a.PageSizes(new int[] { 50, 100 }))
                    .Sortable()
                    .Scrollable()
                    .HtmlAttributes(new { style = "height:700px;" })
                    .Events(events => { events.Save("updateTotal"); }
                    )
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(100)
                .Model(model =>
                {
                    model.Id(p => p.EmployeeID);
                    model.Field(p => p.Total).Editable(false);
                })

                .Update(update => update.Action("Employee_Update", "Admin"))

        )
    )

<script>

function updateTotal(e) {

        var totalCount = 0;
        if (e.model.Round1 !== null)
            totalCount += 1;
        if (e.model.Round2 !== null)
            totalCount += 1;
        if (e.model.Round3 !== null)
            totalCount += 1;
        
        // totalCount has correct total

e.model.set('Total', totalCount); // Doesnt refresh

e.container.parents('tr').find('td:eq(4)').html(totalCount); // Doesnt refresh

        e.container[0].children[4].innerText = totalCount; // Doesnt refresh

    }

</script>

There are no developer tools console errors.

can someone supply a complete set of instructions on how to apply the all.css and variables.scss files downloaded from the SASS Themebuilder to my .Net Core project

There seems to be no documentation regarding this for telerik ui for asp.net core

thanks

Jim

I have a grid with 2 numeric columns. One of the column has to have a maximum of 5 decimals while the other should display all the decimals it has. The configuration is like this:

columns.Bound(m => m.Numeric1).Format("{0:#.#####}");
columns.Bound(m => m.Numeric2);

However when I tried to view the values in the culture "de-DE" for example for the first column it uses the correct decimal separator "," but for the second column it still display the decimal separator ".".

Is the format of numeric values mandatory when using i18n ? What is the format for numeric with all the decimals?

my excel file is uploaded in to azure blob storage ,now I want to load this file using telerik Workbook 

from my local path its loaded successfully but from azure its give me  this error " System.InvalidOperationException"

I would like to display a simple inline grid but for some reason the view is not able to display the data sent by controller.

public class Employee
    {
        public int EmployeeID { get; set; }
        public string Name { get; set; }
        public string NetworkID { get; set; }
        public DateTime SeniorityDate { get; set; }
        public string Shift { get; set; }
    }

public ActionResult Employees_Read([DataSourceRequest] DataSourceRequest request)
        {
            var employeeList = new List<Employee>()
            {
                new Employee
                {
                    EmployeeID = 1,
                    Name = "Bill",
                    NetworkID = "123",
                    SeniorityDate = DateTime.Now,
                    Shift = "Day"
                },
                new Employee
                {
                    EmployeeID = 2,
                    Name = "Gates",
                    NetworkID = "456",
                    SeniorityDate = DateTime.Now,
                    Shift = "Day"
                }
            };

            IQueryable<Employee> employees = employeeList.AsQueryable();
            DataSourceResult result = employees.ToDataSourceResult(request);
            return Json(result);
        }

@(Html.Kendo().Grid<EmployeeManagement.Models.Employee>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Name).Width(300);
            columns.Bound(p => p.NetworkID).Width(100);
            columns.Bound(p => p.SeniorityDate).Width(200);
            columns.Bound(p => p.Shift).Width(100);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(300);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Model(model => model.Id(p => p.EmployeeID))
            .Read(read => read.Action("Employees_Read", "Admin"))

        )
    )

There are no errors in Developer tools console.

In the network tab, I see the response.

Please let me know if I am missing anything?

Thank you

Our current kendo-grid spinner is... not easy on the eyes.  I would like to use SpinKit instead (SpinKit is an extremely popular, simple CSS-based spinner library, available on GitHub with over 16.5k stars https://github.com/tobiasahlin/SpinKit).  Specifically, this one below taken from the SpinKit demo page (https://tobiasahlin.com/spinkit/ - it's the fourth one in the carousel) : 

<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>

With the following css:

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}