CODEWITHSUNDEEP
ajaxasp.net-mvckendo-uitelerikkendo-grid
Lost
Lost

Reputation: 13575

KendoUI Grid fails to make Ajax call on the Page Load

I am working on a demo page for KendoUI grid and I am following example in following link almost as it is "Verbatim".

http://demos.telerik.com/aspnet-mvc/grid/index

I am not sure what am I doing wrong but it seems like the Grid is not making the first Ajax call that it is supposed to make. I am very new to both MVC and Kendo but not sure if the problem is with any particular part. Let me start with some code snippet. My Index.CsHTMl looks like following:

<!DOCTYPE html>
@using (Html.BeginForm())
{
    <div id="clientsDb">
        @(Html.Kendo().Grid<Prometheus.Core.Domain.Employee>()
              .Name("employeeGrid")
              .Columns(columns =>
              {
                  columns.Bound(c => c.Id).Width(140);
                  columns.Bound(c => c.FirstName).Width(190);
                  columns.Bound(c => c.LastName);
              })
              .HtmlAttributes(new {style = "height: 380px;"})
              .Scrollable()
              .Groupable()
              .Sortable()
              .Pageable(pageable => pageable
                  .Refresh(true)
                  .PageSizes(true)
                  .ButtonCount(5))
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Read(read => read.Action("ReadEmployee", "EmployeeGrid"))
              )
              )
    </div>
}

<style scoped>
    #clientsDb {
        width: 952px;
        height: 396px;
        margin: 20px auto 0;
        padding: 51px 4px 0 4px;
        background: url('@Url.Content("~/content/web/grid/clientsDb.png")') no-repeat 0 0;
    }
</style>

and my controller looks like following:

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

        [HttpGet]
        public ActionResult ReadEmployee([DataSourceRequest]DataSourceRequest request)
        {
            return Json(GetEmployees().ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
        }


        public static IEnumerable<Core.Domain.Employee> GetEmployees()
        {
            return new List<Core.Domain.Employee>
            {
                new Core.Domain.Employee
                {
                    Id = 1,
                    FirstName = "Someone",
                    LastName = "Else"
                },
                 new Core.Domain.Employee
                {
                    Id = 2,
                    FirstName = "FirstName",
                    LastName = "LastName"
                }
            };
        }

Which is almost replicating the behavior that is in the Demo:

  1. There is no Ajax request made from the grid when it loads the Index.cshtml
  2. When I call ReadEmployee ActionMethod by itself, it does return Json correctly. Also, when I click on any of the buttons on the "Empty" grid, it loads the same JSON.
  3. Unlike, in the example, I have added BeginForm(). It is not working with/without BeginForm.

Any ideas?

Upvotes: 0

Views: 1117

Answers (1)

David Shorthose
David Shorthose

Reputation: 4497

By default the read action is a POST and not a GET. So you either need to remove the HttpGet Verb from your read action or add .Read(read => read.Action("ReadEmployee", "EmployeeGrid").Type(HttpVerbs.Get))

To the read method.

Hope this helps.

For issues like this I like to use Fiddler to check the request being sent and make sure I am expecting either a POST, GET, DELETE etc where appropriate.

Upvotes: 2

Related Questions