DataReader must be closed first

[Amanda]

I'm following the 'Basic Usage' example and did the following:

@model IEnumerable<DigiBob.Model.Governance.RolesResponsibilities.RoleName>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name);
    })
    .Pageable()
    .Sortable()
    .Scrollable(scr=>scr.Height(430))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
        )
)

And:

RoleNameRepository _roleNameRepository = new RoleNameRepository(new DigiBobContext());

        public ActionResult Index()
        {
            return View(_roleNameRepository.GetAll());
        }

I'm getting this error:
There is already an open DataReader associated with this Command which must be closed first.There is already an open DataReader associated with this Command which must be closed first.

I added .ToList() to the last command and am now getting this error:
A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.RoleName_9130BF9423DB97238B259DFD54766A3850EC298A017442C28EED589A812C582A'

How can I get this simplest of grid examples to show the results of my query?

[Vladimir Iliev]

Hi Amanda,

 
I would suggest to check this troubleshooting article in our documentation for more information about the circular reference error and how to fix it.

Kind Regards,
Vladimir Iliev
Telerik

[Amanda]

That link doesn't work

[Amanda]

I got the page nevertheless.  I assume it's this one: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq

Seems like KendoUI isn't really designed to work with EF code first.  Not without extra code (which I don't really want to write).

And, how do I get the result of the example to the view?  You are creating and setting a variable called 'result', but don't do anything with it.  Also, no indication as to how to use it in the view.  What do I need to pass back to the view?  And how do you use it in the view?  I've tried something similar to this at the end of the method: 

return View(result);

And this is my view:

@model IEnumerable<DigiBob.Model.Governance.RolesResponsibilities.RoleName>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name);
    })
    .Pageable()
    .Sortable()
    .Scrollable(scr=>scr.Height(430))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
        )
)

I'm getting this error:
The model item passed into the dictionary is of type 'Kendo.Mvc.UI.DataSourceResult', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[DigiBob.Model.Governance.RolesResponsibilities.RoleName]'.
If I change the first line in the view to:

@model IEnumerable<Kendo.Mvc.UI.DataSourceResult>

Now I'm getting a different error (line 7):
CS1660: Cannot convert lambda expression to type 'string' because it is not a delegate type

I don't care about Ajax binding at this stage.  I merely want to show data in a grid, but seems like I have to follow Ajax examples to do that. 
I'm using EF code first.  If this doesn't work soon, I'm afraid all I have to show in my demo is Infragistic's IgniteUI controls.

[Amanda]

I finally found a good example of how to use EF code first with your controls.  It's here:
http://www.kendoui.com/code-library/mvc/grid/entity-framework-code-first-crud.aspx

I changed the code a bit to use AutoMapper instead, but it doesn't work.  Here is how I did it:

public class Bootstrapper
    {
        public static void ConfigureAutoMapper()
        {
            Mapper.CreateMap<RoleName, RoleNameViewModel>();
        }
    }

With the following extension methods:

public static class RoleNameMapperExtensionMethods
    {
        public static IEnumerable<RoleNameViewModel> ConvertToViewModelList(this IEnumerable<RoleName> models)
        {
            IList<RoleNameViewModel> viewModels = new List<RoleNameViewModel>();

            foreach (RoleName p in models)
            {
                viewModels.Add(p.ConvertToViewModel());
            }

            return viewModels;
        }

        public static RoleNameViewModel ConvertToViewModel(this RoleName model)
        {
            return AutoMapper.Mapper.Map<RoleName, RoleNameViewModel>(model);
        }
    }

//Controller code

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

        public ActionResult GetRoleNames([DataSourceRequest] DataSourceRequest request)
        {
            _roleNameRepository = new GenericRepository<RoleName>(_context);
            return Json(RoleNameMapperExtensionMethods.ConvertToViewModelList(_roleNameRepository.Get()));
        }

The .Get method above is to a Generic repository.
In my view:

@(Html.Kendo().Grid<DigiBob.Model.Governance.RolesResponsibilities.RoleName>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name);
    })
    .Pageable()
    .Sortable()
    .Scrollable(scr=>scr.Height(430))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(c => c.ID))
        .Read("GetData", "Home")
        )
)

It is now giving the following error:
0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'kendoGrid'

I think I have the data problem solved, but cannot tell until I can get the controls to work.  I'm getting this same error for the kendoPanelBar and kendoTabStrip.  Can anyone help?

[Atanas Korchev]

Hello,

 This is a well known JavaScript error which happens when some of the required JavaSript files is not included. It also happens if jQuery is included more than once. More info is available in the documentation: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/troubleshooting#javascript-error-that-kendo-widgets-are-unavailable-or-undefined

Regards,
Atanas Korchev
Telerik

[Amanda]

I've now went back to step 1 and am trying to add KendoUI using the procedure for MVC3 applications as described here: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction.  It seems to be a lot simpler.  The only step that I omitted is step 6, because I'm not using th dataviz controls.  However, it still doesn't work.  This is my complete head section in my _Layout.cshtml file:

<head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - DigiBob</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/MindFusion.Diagramming.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

        <link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
        <link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">
        <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
    </head>

I've tried removing the 3rd to last line, but the error is exactly the same.  Also the jquery-1.7.1.min.js line, but the error is the same.
All the script files are in the exact locations as in the declarations.

What am I doing wrong?

[Amanda]

Please also tell which scripts must be included in the project.  I'm looking at a sample application and it has the following:
jquery.min.js
kendo.aspnetmvc.min.js
kendo.web.min.js
This is not mentioned in the documentation.  Also not mentioned is the fact that all the files that were copied into the Content folder must be included in the project.
Adding only the above 3 doesn't work.  It does in the sample app.  The documentation is very unclear.

[Atanas Korchev]

Hi,

 The documentation mentions which files need to be included:

1. Configure your ASP.NET MVC layout page to include the Kendo UI Web JavaScript and CSS files:

   • WebForms:

      <link href="<%= Url.Content("~/Content/kendo.common.min.css") %>" rel="stylesheet" type="text/css" /> <link href="<%= Url.Content("~/Content/kendo.default.min.css") %>" rel="stylesheet" type="text/css" /> <script src="<%= Url.Content("~/Scripts/jquery.min.js") %>"></script> <script src="<%= Url.Content("~/Scripts/kendo.web.min.js") %>"></script> <script src="<%= Url.Content("~/Scripts/kendo.aspnetmvc.min.js") %>"></script>

   • Razor:

      <link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")"> <link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")"> <script src="@Url.Content("~/Scripts/jquery.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

We are not sure why it is unclear - the list of files is shown for every view engine. If you want you can also use ASP.NET bundles (also documented).

Your code you have pasted includes jQuery twice which isn't supported. You cannot include multiple versions of jQuery. This is also mentioned in the documentation.Regards,
Atanas Korchev
Telerik

[Amanda]

Hi there,
My code includes jQuery twice, but as mentioned, I tried to remove one at a time, but the error still shows no matter which one I remove.
And, as to what needs to be included, the documentation only says the the content of the js and styles folders must be copied.  It doesn't say which must be included in the project.

[Amanda]

One more thing, step number 3 on this page (http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction) shows to copy the files from \js to my Scripts folder.  It doesn't say which files, so I assumed all the files that's in the folder.  Here's the line:

3. Copy the Kendo UI JavaScript files from the \js folder of the installation to the Scripts folder of your application.
If you want to use CDN skip steps 3, 4 and 5 and check the Using CDN section.

Step 4 gives clear instruction on which files to copy from the styles folder.  Not specifying any files for step 3, I assumed it must be all the files.  I realized this after looking at the code-first example.  I now removed all the files except for the 3 files to be mentioned in the _Layout page.

The code now runs, but, although data is retrieved from the database into my ViewModel, it isn't showing in the grid.  Here is my view's code:

@(Html.Kendo().Grid<DigiBob.Model.Governance.RolesResponsibilities.RoleName>()
    .Name("Grid")
    .Pageable()
    .Sortable()
    .Scrollable(scr=>scr.Height(430))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(c => c.ID))
        .Read("GetRoleNames", "Home")
        )
    .Columns(columns =>
    {
        columns.Bound(p => p.Name);
    })
)

In my controller:

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

public ActionResult GetRoleNames([DataSourceRequest] DataSourceRequest request)
        {
            _roleNameRepository = new GenericRepository<RoleName>(_context);
            return Json(MapperExtensionMethods.ConvertToViewModelList(_roleNameRepository.Get()));
        }

Why wouldn't it show?

[Atanas Korchev]

Hi,

 We cannot tell why it doesn't work without seeing the complete code. You may consider zipping your project and attaching it here so we can take a look.

Regards,
Atanas Korchev
Telerik

[Amanda]

Is this a public forum?

[Atanas Korchev]

Hello Amanda,

 Yes, this is a public forum. If you want to attach your real project it may be a better idea to use a support ticket instead. However have in mind that running a real-life project may require access to your database. 

I created a sample project which binds the Kendo UI Grid to the Northwind database (SQL Server LocalDB Express). It is based on the instructions found in the documentation.

Regards,
Atanas Korchev
Telerik

[Amanda]

No need to see the complete code.  The error was right there.  The line in the GetRoleNames method returns the JSon string should end with .ToDataSourceResult(request).  Can't just send a list of ViewModel objects.