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 314 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Neilton
Top achievements
Rank 1
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


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

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

Sort by
0
Atanas Korchev
Telerik team
answered on 02 Oct 2013, 07:30 AM
Hello,

 This would happen if kendo.aspnetmvc.min.js isn't included in your application. More info is available in the troubleshooting help topic.

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Neilton
Top achievements
Rank 1
answered on 02 Oct 2013, 12:12 PM
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.
0
Accepted
Atanas Korchev
Telerik team
answered on 02 Oct 2013, 12:26 PM
Hello,

I think the problem is caused by the fact that you have a field called "data" in your model. This is the parameter name used by the default row template which the grid generates internally. Unfortunately this makes the template not to work.

I can suggest the following script block as a workaround (put it before your grid declaration)

<script>
kendo.ui.Grid.prototype.options.templateSettings = { paramName: "d" };
</script>

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Neilton
Top achievements
Rank 1
answered on 02 Oct 2013, 01:09 PM

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

0
Hassan
Top achievements
Rank 1
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.
0
khaja Nawaz
Top achievements
Rank 1
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 = "2​xxxxx ";
            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,

 

 

 

 

 

 

 ​

 

Tags
Grid
Asked by
Neilton
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Neilton
Top achievements
Rank 1
Hassan
Top achievements
Rank 1
khaja Nawaz
Top achievements
Rank 1
Share this question
or