Can't make it work (the simplest example ever)

1 posts, 0 answers
  1. dejavu
    dejavu avatar
    18 posts
    Member since:
    Sep 2008

    Posted 27 Aug 2012 Link to this post

    Hi there. I've just created the simplest ASP.NET MVC 3 web application I could. It has just one controller, just one view, and all Kendo's prerequisites up and running. Checked that using a simple DatePicker as sugested.

    Now, my problems are:

    1.- Initially, NO DATA is loaded. The method that retrieves records from the DB is executed without problems, buts data isn't showing on Kendo's grid.

    2.- When I click on a column (right now I reduced my example entity to just two attribs, one "FullName" the other one "Email"), data IS coming to grid, but surprisly, it renders in the browser like PLAIN TEXT (!?).

    Here's my current controller class code:

    /// <summary>
    ///
    /// </summary>
    public class NotificacionController : Controller
    {
        /// <summary>
        ///
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            return View(CargarEmpleados());
        }
        /// <summary>
        ///
        /// </summary>
        /// <param name="request"></param>
        /// <returns></returns>
        public ActionResult CargaEmpleados([DataSourceRequest] DataSourceRequest request)
        {
            return Json(CargarEmpleados().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
     
        /// <summary>
        ///
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EmpleadoModel> CargarEmpleados()
        {
            return EmpleadosGateway.ObtenerEmpleados();
        }
    }
     And here, markup:

    @(Html.Kendo().Grid<Sic.Mvc.Eventos.Models.Base.EmpleadoModel>()   
        .Name("Grid")
        .Columns(columns => {
            columns.Bound(e => e.NombreCompleto).Groupable(false).Width(140);
            columns.Bound(e => e.Email);
        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Groupable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("CargaEmpleados", "Notificacion"))
         )
    )

    Last but not least, Layout.cshtml:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title</title>
            <link href="@Url.Content("~/Content/kendo.common.min.css")" rel="Stylesheet" />
            <link href="@Url.Content("~/Content/kendo.default.min.css")" rel="Stylesheet" />
            <link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="Stylesheet" />
            <link href="@Url.Content("~/Content/Header.css")" rel="Stylesheet" />
            <link href="@Url.Content("~/Content/Footer.css")" rel="Stylesheet" />
            <link href="@Url.Content("~/Content/Site.css")" rel="Stylesheet" />
            <link href="@Url.Content("~/Scripts/jquery.min.js")" />
            <link href="@Url.Content("~/Scripts/kendo.all.min.js")" /> <!-- Usaremos kendo.all.min.js para disponer de Kendo UI y DataViz -->
            <link href="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")" />
        </head>
        <body>
        <div id="Contenedor">
                <div id="header">
                    @{Html.RenderPartial("_Panel");}
                    @{Html.RenderPartial("_Reloj");}
                </div>
                <div id="section">
                    @RenderBody()
                </div>
                <div id="footer">
                    <img src="@Url.Content("~/Content/Images/HTML5.png")" alt="HTML5 compatible" />
                </div>
            </div>
        </body>
    </html>

    Cheers!!
  2.
Back to Top