Populate Grid

9 posts, 0 answers
  1. Jose
    Jose avatar
    1 posts
    Member since:
    May 2013

    Posted 24 Jul 2013 Link to this post

    Hi, I nedd some help.
    I  want to populate a Grid in MVC but I can't
    I have the next code in view Index

    <%: Html.Kendo().Grid<KronosWorkV2.Models.Employee>()
                        .Name("Grid")
                        .Columns(columns => {        
                            columns.Bound(p => p.id);
                            columns.Bound(p => p.Name).Width(140);
                        })                        
                        .Pageable()
                        .Navigatable()
                        .Sortable()
                        .Scrollable()
                        .DataSource(dataSource => dataSource        
                            .Ajax()
                            .Read(read => read.Action("Editing_Read", "SupEmps"))                        
                        ) %>

    then I have the nex code in ActionResult:

    public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request)
            {            
                return Json(db.Employees.ToDataSourceResult(request));            
            }

    when I debug in the action I see that the object db.Employees has items(rows) but when return to Index.aspx the Grid is empty.
     
    where I am rong, some body please can help me.
    Thanks beforehand for your help.
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 25 Jul 2013 Link to this post

    Hi Jose,


    The provided sample code seems correct, so I cannot tell the exact reason for the issue. Please check the developer console of the browser for any JavaScript errors and also the Network tab to ensure that the read request was performed correctly. 

    If you are still experiencing any issues, please send me a sample project, where the issue is reproducing, so I could assist you further.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Jean-Pierre
    Jean-Pierre  avatar
    2 posts
    Member since:
    Jul 2013

    Posted 29 Jul 2013 Link to this post

    Hi,
    I'm new to Kendo UI and ASP NET MVC.
    I use VB Net (sorry ...)
    I have the same problem, exactly.
    I tried to use IE Development tools to detect a script bug but I found nothing.
    On the controller side, my code is the folllowing : 
      
                Dim resultList As List(Of AOCBDRV2_ARTICLES) = New List(Of AOCBDRV2_ARTICLES)
                Try
                    Dim db As AOCBDREntities = New AOCBDREntities()
                    resultList = db.AOCBDRV2_ARTICLES.ToList()
                Catch ex As Exception
                    log.Error("ERR100021: " + User.Identity.Name + " / " + ex.Message, ex.InnerException)
                    ModelState.AddModelError(String.Empty, ErrorsManagement.Errors(ex))
                End Try
                Return Json(resultList.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet)
    The resultList variable contains the records from the model table.
    If I try to add a record using the grid, the Editing-Create procedure works correctly : I can see the new record inserted in the model table. But if I refresh the grid ... nothing appears ...
    On the View Side, the code is the following (The "error_handler" function is in a separate file) :
      
    @ModelType IEnumerable(Of AOCBDR.Domain.AOCBDRV2_ARTICLES)
    ...
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#export span").addClass("k-icon k-exportExcel");
            $("#imprimer span").addClass("k-icon k-imprimer");
        });
      
        function onDataBound(e)
        {
            // Get the export link as jQuery object
            var $exportLink = $('#export');
            var $imprimerLink = $('#imprimer');
      
            // Update the 'href' attribute
            $exportLink.attr('href', createHref($exportLink));
            $imprimerLink.attr('href', createHref($imprimerLink));
        }
      
        function createHref(link)
        {
            var grid = $('#Grid').data('kendoGrid');
            // ask the parameterMap to create the request object for you
            var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))
            .options.parameterMap({
                page: grid.dataSource.page(),
                sort: grid.dataSource.sort(),
                filter: grid.dataSource.filter()
            });
      
            var href = link.attr('href');
      
            // Update the 'page' parameter with the grid's current page
            href = href.replace(/page=([^&]*)/, 'page=' + requestObject.page || '~');
      
            // Update the 'sort' parameter with the grid's current sort descriptor
            href = href.replace(/sort=([^&]*)/, 'sort=' + requestObject.sort || '~');
      
            // Update the 'pageSize' parameter with the grid's current pageSize
            href = href.replace(/pageSize=([^&]*)/, 'pageSize=' + grid.dataSource._pageSize);
      
            //update filter descriptor with the filters applied
            href = href.replace(/filter=([^&]*)/, 'filter=' + (requestObject.filter || '~'));
      
            return href;
        }
    </script>
      
    <h2>Titre de la page</h2>
    <br />
    <p>
        <h2><marquee>N'oubliez pas d'enregistrer une fois vos modifications terminées.</marquee></h2>
    </p>
    @(Html.Kendo().Grid(Model) _
                              .Name("Grid") _
                              .Columns(Function(columns)
                                               columns.Bound(Function(c) c.LIB_ARTICLE)
                                               columns.Command(Sub(command) command.Destroy()).HtmlAttributes(new with {.class="k-button-cemp"}).Width(120)
                                               columns.Template(Function(p) p.ID_ARTICLE).HtmlAttributes(new with {.class="k-button-cemp"}).ClientTemplate("<a class='k-button k-button-icontext' href="+Url.Action("ImprimerDetails","Articles")+"?pId=#=ID_ARTICLE #"+"><span class='k-icon k-imprimer'></span>Imprimer</a>").Width(120)
                                       End Function) _
                                .ToolBar(Function(toolbar)
                                                 toolbar.Create()
                                                 toolbar.Save()
                                                 toolbar.Custom() _
                                                        .Text("Export excel") _
                                                        .HtmlAttributes(New With {.id = "export"}) _
                                                        .Url(Url.Action("ExportExcel", "Articles", New With {.page = 1, .pageSize = 20, .filter = "~", .sort = "~"}))
                                                 toolbar.Custom() _
                                                        .Text("Imprimer") _
                                                        .HtmlAttributes(New With {.id = "imprimer"}) _
                                                        .Url(Url.Action("Imprimer", "Articles", New With {.page = 1, .pageSize = 20, .filter = "~", .sort = "~"}))
                                         End Function) _
                                .Editable(Function(editable) editable.Mode(GridEditMode.InCell)) _
                                .Pageable() _
                                .Navigatable() _
                                .Filterable() _
                                .Groupable() _
                                .Reorderable(Function(c) c.Columns(True)) _
                                .Resizable(Function(c) c.Columns(True)) _
                                .Sortable() _
                                .Scrollable() _
                                .Events(Function(events) events.DataBound("onDataBound")) _
        .DataSource(Function(dataSource)
                            dataSource.Ajax() _
                            .Batch(True) _
                            .ServerOperation(False) _
                            .Events(Function(events)
                                            events.Error("error_handler")
                                    End Function) _
                            .Model(Function(model)
                                           model.Id(Function(c) c.ID_ARTICLE)
                                   End Function) _
                            .Create("Editing_Create", "Articles") _
                            .Read("Editing_Read", "Articles") _
                            .Update("Editing_Update", "Articles") _
                            .Destroy("Editing_Destroy", "Articles")
                    End Function)
      
    Best regards.
    Hi,
    I'm new to Kendo UI and ASP NET MVC.
    I use VB Net (sorry ...)
    I have the same problem, exactly.
    I tried to use IE Development tools to detect a script bug but I found nothing.
    On the controller side, my code is the folllowing :
                Dim resultList As List(Of AOCBDRV2_ARTICLES) = New List(Of AOCBDRV2_ARTICLES)
                Try
                    Dim db As AOCBDREntities = New AOCBDREntities()
                    resultList = db.AOCBDRV2_ARTICLES.ToList()
                Catch ex As Exception
                    log.Error("ERR100021: " + User.Identity.Name + " / " + ex.Message, ex.InnerException)
                    ModelState.AddModelError(String.Empty, ErrorsManagement.Errors(ex))
                End Try
                Return Json(resultList.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet)

    The resultList variable contains the records from the model table.
    If I try to add a record using the grid, the Editing-Create procedure works correctly : I can see the new record inserted in the model table. But if I refresh the grid ... nothing appears ...
    On the View Side, the code is the following (The "error_handler" function is in a separate file) :
    @ModelType IEnumerable(Of AOCBDR.Domain.AOCBDRV2_ARTICLES)
    ...
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#export span").addClass("k-icon k-exportExcel");
            $("#imprimer span").addClass("k-icon k-imprimer");
        });
        function onDataBound(e)
        {
            // Get the export link as jQuery object
            var $exportLink = $('#export');
            var $imprimerLink = $('#imprimer');
            // Update the 'href' attribute
            $exportLink.attr('href', createHref($exportLink));
            $imprimerLink.attr('href', createHref($imprimerLink));
        }
        function createHref(link)
        {
            var grid = $('#Grid').data('kendoGrid');
            // ask the parameterMap to create the request object for you
            var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))
            .options.parameterMap({
                page: grid.dataSource.page(),
                sort: grid.dataSource.sort(),
                filter: grid.dataSource.filter()
            });
            var href = link.attr('href');
            // Update the 'page' parameter with the grid's current page
            href = href.replace(/page=([^&]*)/, 'page=' + requestObject.page || '~');
            // Update the 'sort' parameter with the grid's current sort descriptor
            href = href.replace(/sort=([^&]*)/, 'sort=' + requestObject.sort || '~');
            // Update the 'pageSize' parameter with the grid's current pageSize
            href = href.replace(/pageSize=([^&]*)/, 'pageSize=' + grid.dataSource._pageSize);
            //update filter descriptor with the filters applied
            href = href.replace(/filter=([^&]*)/, 'filter=' + (requestObject.filter || '~'));
            return href;
        }
    </script>
    <h2>Titre de la page</h2>
    <br />
    <p>
        <h2><marquee>N'oubliez pas d'enregistrer une fois vos modifications terminées.</marquee></h2>
    </p>
    @(Html.Kendo().Grid(Model) _
                              .Name("Grid") _
                              .Columns(Function(columns)
                                               columns.Bound(Function(c) c.LIB_ARTICLE)
                                               columns.Command(Sub(command) command.Destroy()).HtmlAttributes(new with {.class="k-button-cemp"}).Width(120)
                                               columns.Template(Function(p) p.ID_ARTICLE).HtmlAttributes(new with {.class="k-button-cemp"}).ClientTemplate("<a class='k-button k-button-icontext' href="+Url.Action("ImprimerDetails","Articles")+"?pId=#=ID_ARTICLE #"+"><span class='k-icon k-imprimer'></span>Imprimer</a>").Width(120)
                                       End Function) _
                                .ToolBar(Function(toolbar)
                                                 toolbar.Create()
                                                 toolbar.Save()
                                                 toolbar.Custom() _
                                                        .Text("Export excel") _
                                                        .HtmlAttributes(New With {.id = "export"}) _
                                                        .Url(Url.Action("ExportExcel", "Articles", New With {.page = 1, .pageSize = 20, .filter = "~", .sort = "~"}))
                                                 toolbar.Custom() _
                                                        .Text("Imprimer") _
                                                        .HtmlAttributes(New With {.id = "imprimer"}) _
                                                        .Url(Url.Action("Imprimer", "Articles", New With {.page = 1, .pageSize = 20, .filter = "~", .sort = "~"}))
                                         End Function) _
                                .Editable(Function(editable) editable.Mode(GridEditMode.InCell)) _
                                .Pageable() _
                                .Navigatable() _
                                .Filterable() _
                                .Groupable() _
                                .Reorderable(Function(c) c.Columns(True)) _
                                .Resizable(Function(c) c.Columns(True)) _
                                .Sortable() _
                                .Scrollable() _
                                .Events(Function(events) events.DataBound("onDataBound")) _
        .DataSource(Function(dataSource)
                            dataSource.Ajax() _
                            .Batch(True) _
                            .ServerOperation(False) _
                            .Events(Function(events)
                                            events.Error("error_handler")
                                    End Function) _
                            .Model(Function(model)
                                           model.Id(Function(c) c.ID_ARTICLE)
                                   End Function) _
                            .Create("Editing_Create", "Articles") _
                            .Read("Editing_Read", "Articles") _
                            .Update("Editing_Update", "Articles") _
                            .Destroy("Editing_Destroy", "Articles")
                    End Function)
    Best regards.
  4. Michele
    Michele avatar
    426 posts
    Member since:
    Jun 2009

    Posted 29 Jul 2013 Link to this post

    Got the same problem.... ASP.NET MVC 4 and Kendo UI Complete 2013.2.716.340...

       <%
           Html.Kendo().Grid<KendoUIMvcApplication1.TestObj>()
               .Name("grid")
            .Columns(columns =>
            {
                columns.Bound("Description");
                columns.Bound("Value");

            })
            .DataSource(datasource =>
                {
                    datasource.Server().Read("GetCombo", "TestIDEA");
                })
           .Render();
            %>

    and in the controller .

     public ActionResult GetCombo([DataSourceRequest] DataSourceRequest request)
            {

                List<TestObj> myList = new List<TestObj>();

                myList.Add(new TestObj { Value = "1", Description = "A1" });
                myList.Add(new TestObj { Value = "2", Description = "A2" });

                return Json(myList, "text/html", Encoding.UTF8, JsonRequestBehavior.AllowGet);
              
            }

    What's wrong?
    Thanks
  5. Michele
    Michele avatar
    426 posts
    Member since:
    Jun 2009

    Posted 30 Jul 2013 Link to this post

    Got the same problem.... ASP.NET MVC 4 and Kendo UI Complete 2013.2.716.340...



       <%

           Html.Kendo().Grid<KendoUIMvcApplication1.TestObj>()

               .Name("grid")

            .Columns(columns =>

            {

                columns.Bound("Description");

                columns.Bound("Value");



            })

            .DataSource(datasource =>

                {

                    datasource.Server().Read("GetCombo", "TestIDEA");

                })

           .Render();

            %>



    and in the controller .



     public ActionResult GetCombo([DataSourceRequest] DataSourceRequest request)

            {



                List<TestObj> myList = new List<TestObj>();



                myList.Add(new TestObj { Value = "1", Description = "A1" });

                myList.Add(new TestObj { Value = "2", Description = "A2" });



                return Json(myList, "text/html", Encoding.UTF8, JsonRequestBehavior.AllowGet);

              

            }



    What's wrong?

    Thanks
  6. Michele
    Michele avatar
    426 posts
    Member since:
    Jun 2009

    Posted 30 Jul 2013 Link to this post

    Got the same problem.... ASP.NET MVC 4 and Kendo UI Complete 2013.2.716.340...

    Got the same problem.... ASP.NET MVC 4 and Kendo UI Complete 2013.2.716.340...
           Html.Kendo().Grid<KendoUIMvcApplication1.TestObj>()
               .Name("grid")
            .Columns(columns =>
            {
                columns.Bound("Description");
                columns.Bound("Value");
            })
            .DataSource(datasource =>
                {
                    datasource.Server().Read("GetCombo", "TestIDEA");
                })
           .Render();
    and in the controller :

     public ActionResult GetCombo([DataSourceRequest] DataSourceRequest request)
      {
                List<TestObj> myList = new List<TestObj>();
                myList.Add(new TestObj { Value = "1", Description = "A1" });
                myList.Add(new TestObj { Value = "2", Description = "A2" });
                return Json(myList, "text/html", Encoding.UTF8, JsonRequestBehavior.AllowGet);
      }



    What's wrong?
  7. Jean-Pierre
    Jean-Pierre  avatar
    2 posts
    Member since:
    Jul 2013

    Posted 30 Jul 2013 Link to this post

    Hi,
    I think I've found the explanation about this problem :)
    I noticed that in the Editing_Create, Editing_Update and Edition_destroy functions, a bind parameter (prefix::="models") was called.
    Then I realized that a folder "models" was in my solution.
    First, I have to tell you that my company uses a specific architecture for MVC solutions. We place the models into a special folder called <AppName>.Domain
    That's what I did when I created my Project.
    I tried to move the model contained in the folfer <AppName>.Domain into the folder called "Models" and then I ran the project ...
    It works perfectly !!! =)

    Now my question is simple : Is there a way to make work this function using a specific folder (e.g. <AppName>.Domain) instead of the "Models" folder ?
    You maybe find my question is stupid but - sorry - I'm new to Kendo UI and ASP NET MVC 4
    Your answers are important to me because it could get my company to change the structure of our MVC solutions.

    Best regards.
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 31 Jul 2013 Link to this post

    Hello guys,


    Jean, I answered this question in the support thread. Please check my answer, so we could move the discussion there.

    Paolo, I answered this question in a support thread too. If you have any further question, please feel free to answer me there.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Michele
    Michele avatar
    426 posts
    Member since:
    Jun 2009

    Posted 31 Jul 2013 Link to this post

    Dimiter, I'm ok on this...was missing the ToDataSourceResult...
Back to Top