This is a migrated thread and some comments may be shown as answers.

Kendo Grid MVC - binding to remote data with AJAX - Does not work

6 Answers 456 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Neilton asked on 01 Oct 2013, 05:30 PM

Kendo grid mvc não carrega os dados.

--- My Class

    public class ItemPainelValidacao
    {
        public int id { get; set; }
        public string linkAcao { get; set; }
        public string statusAcao { get; set; }
        public DateTime? data { get; set; }
        public TimeSpan? horaValidacao { get; set; }
        public string numeroProtocolo { get; set; }
        public string usuarioSolicitante { get; set; }
        public string emailUsuario { get; set; }
        public string nomeCadastro { get; set; }
        public string tipoCadastro { get; set; }
        public string tempoEspera { get; set; }
        public string status { get; set; }
        public string usuarioValidador { get; set; }
    }

--- My Controller.

        public ActionResult CarregarPainel([DataSourceRequest]DataSourceRequest request)
        {
            List<ItemPainelValidacao> dados = new PainelValidacao().getAll();
            DataSourceResult result= dados .ToDataSourceResult(request);
            return Json(result, "text/x-json", JsonRequestBehavior.AllowGet);
        }

-- My View

-- Json generated

{"Data":[{"id":1,"linkAcao":"Cliente/Validar/25","statusAcao":null,"data":"\/Date(1380198093000)\/","horaValidacao":null,"numeroProtocolo":"CLI03091325","usuarioSolicitante":"XXXXXXXXXXXXXXXXXXXX","emailUsuario":"XXXXXXXXXXXXXXXXXXXX","nomeCadastro":"Cliente","tipoCadastro":"Alteração","tempoEspera":"5 dia(s) 3 hora(s) 33 minuto(s) 50 segundo(s)","status":"ForaDoPrazo","usuarioValidador":null},{"id":2,"linkAcao":"Cliente/Validar/0","statusAcao":null,"data":"\/Date(1378477021000)\/","horaValidacao":null,"numeroProtocolo":"CLI0609130","usuarioSolicitante":"XXXXXXXXXXXXXXXXXXXX","emailUsuario":"XXXXXXXXXXXXXXXXXXXX","nomeCadastro":"Cliente","tipoCadastro":"Novo","tempoEspera":"25 dia(s) 1 hora(s) 38 minuto(s) 22 segundo(s)","status":"ForaDoPrazo","usuarioValidador":"XXXXXXXXXXXXXXXXXXXX"},{"id":3,"linkAcao":"Cliente/Validar/53","statusAcao":null,"data":"\/Date(1378478562000)\/","horaValidacao":null,"numeroProtocolo":"CLI06091353","usuarioSolicitante":"XXXXXXXXXXXXXXXXXXXX","emailUsuario":"XXXXXXXXXXXXXXXXXXXX","nomeCadastro":"Cliente","tipoCadastro":"Novo","tempoEspera":"25 dia(s) 1 hora(s) 12 minuto(s) 41 segundo(s)","status":"ForaDoPrazo","usuarioValidador":null},{"id":4,"linkAcao":"Cliente/Validar/54","statusAcao":null,"data":"\/Date(1378478778000)\/","horaValidacao":null,"numeroProtocolo":"CLI06091354","usuarioSolicitante":"XXXXXXXXXXXXXXXXXXXX","emailUsuario":"XXXXXXXXXXXXXXXXXXXX","nomeCadastro":"Cliente","tipoCadastro":"Novo","tempoEspera":"25 dia(s) 1 hora(s) 9 minuto(s) 5 segundo(s)","status":"ForaDoPrazo","usuarioValidador":null},{"id":5,"linkAcao":"Cliente/Validar/62","statusAcao":null,"data":"\/Date(1379017479000)\/","horaValidacao":null,"numeroProtocolo":"CLI12091362","usuarioSolicitante":"XXXXXXXXXXXXXXXXXXXX","emailUsuario":"XXXXXXXXXXXXXXXXXXXX","nomeCadastro":"Cliente","tipoCadastro":"Novo","tempoEspera":"18 dia(s) 19 hora(s) 30 minuto(s) 44 segundo(s)","status":"ForaDoPrazo","usuarioValidador":null},{"id":6,"linkAcao":"Cliente/Validar/86","statusAcao":null,"data":"\/Date(1379610704000)\/","horaValidacao":null,"numeroProtocolo":"CLI19091386","usuarioSolicitante":"XXXXXXXXXXXXXXXXXXXX","emailUsuario":"XXXXXXXXXXXXXXXXXXXX","nomeCadastro":"Cliente","tipoCadastro":"Novo","tempoEspera":"11 dia(s) 22 hora(s) 43 minuto(s) 39 segundo(s)","status":"ForaDoPrazo","usuarioValidador":null},{"id":7,"linkAcao":"Cliente/Validar/100","statusAcao":null,"data":"\/Date(1380290092000)\/","horaValidacao":null,"numeroProtocolo":"CLI270913100","usuarioSolicitante":"XXXXXXXXXXXXXXXXXXXX","emailUsuario":"XXXXXXXXXXXXXXXXXXXX","nomeCadastro":"Cliente","tipoCadastro":"Novo","tempoEspera":"4 dia(s) 2 hora(s) 0 minuto(s) 31 segundo(s)","status":"ForaDoPrazo","usuarioValidador":null},{"id":8,"linkAcao":"Cliente/Validar/30","statusAcao":null,"data":"\/Date(1380310072000)\/","horaValidacao":null,"numeroProtocolo":"CLI27091330","usuarioSolicitante":"XXXXXXXXXXXXXXXXXXXX","emailUsuario":"XXXXXXXXXXXXXXXXXXXX","nomeCadastro":"Cliente","tipoCadastro":"Alteração","tempoEspera":"3 dia(s) 20 hora(s) 27 minuto(s) 31 segundo(s)","status":"ForaDoPrazo","usuarioValidador":null},{"id":9,"linkAcao":"Transportadora/Validar/25","statusAcao":null,"data":"\/Date(1380198093000)\/","horaValidacao":null,"numeroProtocolo":"TRA26091325","usuarioSolicitante":"XXXXXXXXXXXXXXXXXXXX","emailUsuario":"XXXXXXXXXXXXXXXXXXXX","nomeCadastro":"Transportadora","tipoCadastro":"Alteração","tempoEspera":"5 dia(s) 3 hora(s) 33 minuto(s) 51 segundo(s)","status":"ForaDoPrazo","usuarioValidador":null},{"id":10,"linkAcao":"Veiculo/Validar/88","statusAcao":null,"data":"\/Date(1380567784000)\/","horaValidacao":null,"numeroProtocolo":"VEI30091388","usuarioSolicitante":"XXXXXXXXXXXXXXXXXXXX","emailUsuario":"XXXXXXXXXXXXXXXXXXXX","nomeCadastro":"Veiculo","tipoCadastro":"Novo","tempoEspera":"0 dia(s) 20 hora(s) 52 minuto(s) 20 segundo(s)","status":"ForaDoPrazo","usuarioValidador":null}],"Total":10,"AggregateResults":null,"Errors":null}

The JSON file is generated , but the grid is not loaded with data.
What should I do for this to work? Any help will be appreciated.

6 Answers, 1 is accepted

answered on 02 Oct 2013, 12:12 PM

imgtelerik.png

Atanas Korchev,
Good morning,
This file kendo.aspnetmvc.min.js, is included in the project.
The strange thing is that if you make this change in view works, follows the change:

        <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/2013.2.918/jquery.min.js")"></script>
        <style type="text/css">
            #Grid *
            {
                font-size: 12px !important;
            }
        </style>
        @(Html.Kendo().Grid<ItemPainelValidacao>()
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(o => o.data).HeaderTemplate("Data");
                columns.Bound(o => o.linkAcao).HeaderTemplate("Ação");
                columns.Bound(o => o.numeroProtocolo).HeaderTemplate("Numero Protocolo").ClientTemplate("#= numeroProtocolo #");
                columns.Bound(o => o.usuarioSolicitante).HeaderTemplate("Usuario Solicitante");
                columns.Bound(o => o.emailUsuario).HeaderTemplate("Email Usuário");
                columns.Bound(o => o.nomeCadastro).HeaderTemplate("Nome Cadastro");
                columns.Bound(o => o.tipoCadastro).HeaderTemplate("Tipo Cadastro");
                columns.Bound(o => o.tempoEspera).HeaderTemplate("Tempo Espera");
                columns.Bound(o => o.status).HeaderTemplate("Status");
                columns.Bound(o => o.usuarioValidador).HeaderTemplate("Usuário Validador");
            })
                .Pageable(pagerAction => pagerAction.Numeric(false))
                .Pageable(pagerAction => pagerAction.Input(true))
                .Sortable()
                .Filterable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                        .Read(read => read.Action("CarregarPainel", "Validacao"))
                )
            )

The change in this highlight.
Attached image grid.

thanks.

Accepted

answered on 04 Oct 2013, 11:08 AM

Hi,

I am having the same issue with Kendo Grid MVC that in the following to scenarios:

First Scenario:

If pass the local data from the controller and set the datasource to ajax and serverside paging sorting is enabled then first time the grid populates successfully but if i do any operation like next page or sorting then only JSON will be displayed and every thing including grid will be removed. code of controller and view is as follows:

controller code:

public class GridController : Controller
{
//
// GET: /Grid/

public ActionResult Index()
{
return View(StudentsData.mStudents);
}

public ActionResult Populate_Read([DataSourceRequest] DataSourceRequest request)
{
DataSourceResult result = StudentsData.mStudents.ToDataSourceResult(request, student => new StudentsModels()
{
StudentId = student.StudentId,
StudentName = student.StudentName,
Department = student.Department,
Section = student.Section
});
JsonResult jsonResult = Json(result,JsonRequestBehavior.AllowGet);
return jsonResult;
}

}

View Markup:

@model List<KendoUIGrid.Models.StudentsModels>

@{
ViewBag.Title = "Grid";
}

<h2>StudentList</h2>

@(Html.Kendo().Grid(Model)
.Name("StudentsGrid")
.Columns(column =>
{
column.Bound(p => p.StudentId);
column.Bound(p => p.StudentName);
column.Bound(p => p.Department);
column.Bound(p => p.Section);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("Populate_Read", "Grid"))))

Second Scenario:

if i do ajax binding in it initially grid will be empty but if i sort the grid since it's server side operation is enable, so it show me only the JSON. following is the code of controller and view

Controller code:

public class GridController : Controller
{
//
// GET: /Grid/

public ActionResult Index()
{
return View();
}

public ActionResult Populate_Read([DataSourceRequest] DataSourceRequest request)
{
DataSourceResult result = StudentsData.mStudents.ToDataSourceResult(request, student => new StudentsModels()
{
StudentId = student.StudentId,
StudentName = student.StudentName,
Department = student.Department,
Section = student.Section
});
JsonResult jsonResult = Json(result,JsonRequestBehavior.AllowGet);
return jsonResult;
}

}

View markup:

@{
ViewBag.Title = "Grid";
}

<h2>StudentList</h2>

@(Html.Kendo().Grid<KendoUIGrid.Models.StudentsModels>()
.Name("StudentsGrid")
.Columns(column =>
{
column.Bound(p => p.StudentId);
column.Bound(p => p.StudentName);
column.Bound(p => p.Department);
column.Bound(p => p.Section);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("Populate_Read", "Grid"))))

Kindly guide me asap.

thanks in advance.

answered on 01 Sep 2015, 05:04 PM

Hi,

I am facing same kind of problem , my data is not getting binded with the grid and also it opens in a new page. here is my code any help would be appreciated.

Razor

@(Html.Kendo().Grid<TelerikMvcApp3.Models.EmployeeViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(e => e.FirstName);
columns.Bound(e => e.Phone);
columns.Bound(e => e.company);
columns.Bound(e => e.address);
columns.Bound(e => e.city);
columns.Bound(e => e.country);
columns.Bound(e => e.postalcode);
}).DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("_AjaxBinding", "Home"))).Pageable().Sortable()
)

public ActionResult_AjaxBinding([DataSourceRequest]DataSourceRequest request)
{
IList<TelerikMvcApp3.Models.EmployeeViewModel> listemployee = new List<TelerikMvcApp3.Models.EmployeeViewModel>();
TelerikMvcApp3.Models.EmployeeViewModel empl = new TelerikMvcApp3.Models.EmployeeViewModel();
empl.FirstName = "test";
empl.Phone = "1235648";
empl.company = "xxx";
empl.address = "2xxxxx ";
empl.city = "xxxx;
empl.country = "xxxxx;
empl.postalcode = "xxxxx";
listemployee.Add(empl);
IQueryable<TelerikMvcApp3.Models.EmployeeViewModel> products = listemployee.AsQueryable<TelerikMvcApp3.Models.EmployeeViewModel>();
DataSourceResult result = products.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}

Thanks,

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Kendo Grid MVC - binding to remote data with AJAX - Does not work

Kendo grid mvc não carrega os dados.

--- My Class

--- My Controller.

-- My View

-- Json generated

The JSON file is generated , but the grid is not loaded with data. What should I do for this to work? Any help will be appreciated.

6 Answers, 1 is accepted

This file kendo.aspnetmvc.min.js, is included in the project. The strange thing is that if you make this change in view works, follows the change:

The change in this highlight. Attached image grid.

Resolved, was it even changed the name of the field "Data" to "DataCadastro" and it worked, thank you.

First Scenario:

Second Scenario:

The JSON file is generated , but the grid is not loaded with data.
What should I do for this to work? Any help will be appreciated.

This file kendo.aspnetmvc.min.js, is included in the project.
The strange thing is that if you make this change in view works, follows the change:

The change in this highlight.
Attached image grid.