Populate Grid

[Jose]

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.

[Dimiter Madjarov]

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

[Jean-Pierre]

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.

[Michele]

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

[Michele]

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

[Michele]

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?

[Jean-Pierre]

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.

[Dimiter Madjarov]

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

[Michele]

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