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

With this well underway now when might we see some versions that work with the 3.0 preview? Thinking mainly of the grid and, not for this forum, the reporting functionality.

Thanks,

Scott

I have created a ClientDetails template so that I can edit a grid row in a 'form style' with tabs. I would like to put a command button on the template so that I can save the changes in the same way that I get an Update button with inline editing. I would like to know the best way of doing this. Does any one know of an example demo/code for doing that would set me in the right direction.

Is there a good demo example of how to customise a filter row. I would like a filter row which is a combination of input boxs and dropdowns.  GridFilterMode.Row just gives be inputboxes and GridFilterMode.Menu just gives me a dropdown filter. I would like something like the attached with multicheck dropdowns. .

Hi All,

I have a grid working without any problems when I load the data locally using BindTo(), but it takes a few seconds to load because it's a lot of data.

I wanted to play with paging on the server side to avoid the long delay, so I switched to remote binding. But now the data never gets loaded in the grid. I know the Ajax call works because I get data on the screen if I just put the URL for the Action method that produces the JSON data directly in the browser address bar.

I know it's probably something stupid that I'm not doing. Thanks in advance for any help.

Here's the code:

Contents of TestController.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using CONY.Models;

namespace CONY.Controllers
{
    public class TestController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public JsonResult GetGridDataRemotely()
        {
            TestData[] data = new TestData[2];
            data[0] = new TestData("Hello", "Goodbye");
            data[1] = new TestData("Red", "Blue");
            return Json(data);
        }

        public ViewResult TestGridLocalBinding()
        {
            TestData[] data = new TestData[2];
            data[0] = new TestData("Hello", "Goodbye");
            data[1] = new TestData("Red", "Blue");
            ViewBag.TheData = data;
            return View();
        }

        public ViewResult TestGridRemoteBinding()
        {      
            return View();
        }
    }
}

Contents of TestGridRemoteBinding.cshtml:

@{
    ViewData["Title"] = "TestGridRemoteBinding";
}
<h1>TestGridRemoteBinding</h1>
@(Html.Kendo().Grid<CONY.Models.TestData>()
    .Name("TestGrid")

    .Columns(columns =>
    {
        columns.Bound(l => l.RecordType).Width(91);
        columns.Bound(l => l.GroupAcctID).Width(106);
    })

    .HtmlAttributes(new { style = "height: 430px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Resizable(resizing => resizing.Columns(true))

    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetGridDataRemotely", "Test").Type(HttpVerbs.Get))
    )
)
<script>
    $(document).ready(function () {
        var grid = $("#TestGrid").data("kendoGrid");
        grid.dataSource.read();
})
</script>

Contents of TestGridLocalBinding.cshtml:

@{
    ViewData["Title"] = "TestGridLocalBinding";
}
<h1>TestGridLocalBinding</h1>
@(Html.Kendo().Grid<CONY.Models.TestData>()
    .Name("TestGrid")

    .Columns(columns =>
    {
        columns.Bound(l => l.RecordType).Width(91);
        columns.Bound(l => l.GroupAcctID).Width(106);
    })
    .HtmlAttributes(new { style = "height: 430px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Resizable(resizing => resizing.Columns(true))
    .BindTo((IEnumerable<CityOfNewYork.Models.TestData>)ViewBag.TheData)
)

Contents of TestData.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace CONY.Models
{
    public class TestData
    {
        public string RecordType { get; set; }
        public string GroupAcctID { get; set; }

        public TestData(string RecordType, string GroupAcctID)
        {
            this.RecordType = RecordType;
            this.GroupAcctID = GroupAcctID;
        }
    }
}

I have the following grid set.  Is there a way I can override the template or something else that will disable the checkbox based on a boolean from the data object?

I have a model with SourceId, LanguageId, OriginalLanguageId, which are bound to some dropdownlists, using :

All 3 fields are int, non nullable, yet only LanguageId and OriginalLanguageId are bound and displayed/selected in their dropdowns.

The data structures for Language and Source have only {Id: int, Name: string}.

SourceId is bound, but is not displayed/selected, unless I set ValuePrimitive(true).

I see that it is bound because when I click the dropdown, the value is selected in the list.

So I would like to understand why do I have to set ValuePrimitive(true) only for a field.

Thank you.

I have a model bound via MVVM with a collection of related entities:

The data structure retrieved by amendedRegulationsDataSource and AmendedRegulation have {Id : int, Title: string}.

When kendo.bind executes, the data in AmendedRegulations is bound, is displayed in the multi select, however, when I click the multi select, to maybe change the selection, the selected items disappear, which causes confusion to the user.

Now, is there a setting that I need to make/activate in order to preserve the selected items in the multi select?

Thank you.

Hi,

I am trying to create a grid like this

But it fails at runtime with the exception

However if I comment lines

toolbar.Create();

and

.Editable(e=>e.Mode(GridEditMode.InLine))

makeing grid readonly everything seems to work fine. Any idea why this is happening ?