How to access values from a List<> in the ViewModel

[Andrew]

So I have a ViewModel that contains a string and a List<NpiList> object. 

@(Html.Kendo().Grid<ViewModels.PecosViewModel>()
        .Name("npi-grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.NpiList) <-- I cannot access the properties of the list, like FirstName or LastName. It only gives me the option to bound to the list.

        })
    )

Any suggestions?

[Andrew]

Tried this and it errors out:

@(Html.Kendo().Grid<oandp_redesign_wip.Models.ViewModels.PecosViewModel>()
        .Name("npi-grid")
        .Columns(columns =>
        {
            foreach (var item in Model.NpiList)
            {
                columns.Bound(item.NPI).Title("NPI").Width("100px");
            }
        })

 

Throws the error: Invalid property or field - '1558467555' for type: PecosViewModel

[Andrew]

Ok, looks like I'm getting closer but not quite there.

@(Html.Kendo().Grid<oandp_redesign_wip.Models.Database.vNPISearch>()
        .Name("npi-grid")
        .Columns(columns =>
        {
            columns.Bound(x => x.ProviderFirstName).Title("Provider First Name");
        })
        .Scrollable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("NPI_Read", "Pecos"))
        .PageSize(20)
    ))

in the controller, I have:

public ActionResult NPI_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetNpiList(ViewData["searchTerm"].ToString()).ToDataSourceResult(request));
        }

What I end up getting is attached. The data column shows up, but no data. There's no styling either.

Even though I have this in the BundleConfig.css

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
    "~/Scripts/kendo/2016.2.714/kendo.all.min.js",
    "~/Scripts/kendo/2016.2.714/kendo.timezones.min.js",
    "~/Scripts/kendo/2016.2.714/kendo.aspnetmvc.min.js"));

bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
    "~/Content/kendo/2016.2.714/kendo.common-bootstrap.min.css",
    "~/Content/kendo/2016.2.714/kendo.bootstrap.min.css"));

[Andrew]

Also getting these Javascript errors:

SyntaxError: Unexpected token .
 /Content/kendo/2016.2.714/kendo.common-bootstrap.min.css:24

SyntaxError: Unexpected token .
 /Content/kendo/2016.2.714/kendo.bootstrap.min.css:24

ReferenceError: jQuery is not defined
 /Pecos:56

[Andrew]

Just talking to myself right now I guess. But for some reason I cannot access the Model. Whereas I'm able to access it pretty much everywhere else.

[Andrew]

Ok, so it doesn't load any information initially, but when I click on the header it redirects to NPI_Read?npi-grid-sort=ProviderFirstName-asc and the page shows ALL the data in JSON format. 

When the page initially loads, there is no data. A user enters data into a search box when calls the same View, but this time I populate the list with items that match the search. I then return the ViewModel. The Grid doesn't show any information at this point, but my basic table that uses a foreach displays perfectly. 

So I'm left a little clueless and hoping I get a response soon so I can figure this out.

[Kostadin]

Hi Andrew,

I would recommend you to examine the following help articles which elaborate more on configuring the application and the grid.
Use with ASP.NET MVC 5
Ajax Binding​

If you still experience the same issue I would appreciate if you can share your code in order to examine it further.

Regards,
Kostadin
Telerik by Progress

[Andrew]

I thought I had a pretty good example of the code, but I guess I'll delve deeper...

On the Pecos Controller I have Index.cshtml and PecosSearchResults.cshtml. On the Index view I have a form that is basically a search form. At the bottom of the Index.cshtml, I have @Html.Partial("PecosSearchResults"). Both views use the model PecosViewModel.

In that model, I have the following:

using System.Collections.Generic;
using oandp_redesign_wip.Models.Database;

namespace oandp_redesign_wip.Models.ViewModels
{
    public class PecosViewModel
    {
        public string SearchTerm { get; set; }
        public List<vNPISearch> vNPISearchResults { get; set; }
    }
}

In the vNPISearch model, I have the following:

namespace oandp_redesign_wip.Models.Database
{
    public class vNPISearch
    {
        public string NPI { get; set; }
        public string ProviderFirstName { get; set; }
        public string ProviderLastName { get; set; }
        public string OrganizationName { get; set; }
        public string ProviderBusinessLocationAddressCity { get; set; }
        public string ProviderBusinessLocationAddressState { get; set; }
        public string PecosNPI { get; set; }
        public string PecosPendingReviewNPI { get; set; }
    }
}

Alright, so when the page initially loads, it returns an empty List<vNPISearch>. After pressing the Search, it calls a Post that looks like:

[HttpPost]
public ActionResult Index(PecosViewModel pecosViewModel)
{
    var searchTerm = pecosViewModel.SearchTerm;
    pecosViewModel.vNPISearchResults = new List<vNPISearch>();
    pecosViewModel.vNPISearchResults.AddRange(oandpService.GetPecosSearchResults(searchTerm));
    return View(pecosViewModel);
}

On the partial view, PecosSearchResults.cshtml, I have an incredibly simple table that has a foreach (var item in Model.vNPISearchResults) and it basically creates rows for each item. So, I know results are being returned.

However, I also have the following:

@(Html.Kendo().Grid<vNPISearch>()
            .Name("npi-grid")
            .DataSource(dataSource => dataSource
            .Server()
            .Read(read => read.Action("NPI_Read", "Pecos")))
            .Columns(columns =>
            {
                columns.Bound(x => x.ProviderFirstName).Title("First Name");
            })
            .Scrollable()
            .Sortable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
)

In the controller, I have the following:

public ActionResult NPI_Read([DataSourceRequest] DataSourceRequest request)
{
    return Json(oandpService.GetPecosSearchResults(SearchTerm).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

The Grid appears, but is completely blank. I went with using the CDN for the CSS & Javascript pages, and there's still no formatting of the grid. See the attached file. Up top I have the Telerik Grid and after "No items to display" is the table which clearly has results. In the Grid, if I click on the "First Name" header it takes me to a page that has the information it should display but it's just a plain page with JSON data (data isn't in any View or Layout pages).

Oh, so this is how the bottom of the Layout & Subpage Layout looks:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="http://kendo.cdn.telerik.com/<kendo ui version>/js/kendo.all.min.js"></script>
<script src="http://kendo.cdn.telerik.com/<kendo ui version>/js/kendo.aspnetmvc.min.js"></script>
@RenderSection("scripts", required: false)
</html>

And within the head tag, I have the following:

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/<kendo ui version>/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/<kendo ui version>/styles/kendo.bootstrap.min.css" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

Is that enough detail for you? I'd really appreciate a prompt response as we're in trial. I truly love Telerik and KendoUI as I've used the Telerik WebForms controls in the past. However, if I can't figure this out I'm gonna start looking at other tools.

[Andrew]

Regarding the formatting, I overlooked the Javascript & CSS files. Changed them to:

    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.aspnetmvc.min.js"></script>

and

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.bootstrap.min.css" />

 

Now the grid displays nicely, but it's still not showing any data.

[Andrew]

There are two javascipt errors. One is jQuery is not defined. $ is not defined.

The jQuery error is: jQuery(function(){jQuery("#npi-grid").kendoGrid({"columns":[{"title":"First Name","headerAttributes":{"data-field":"ProviderFirstName","data-title":"First Name"},"field":"ProviderFirstName","encoded":true}],"pageable":{"autoBind":false,"refresh":true,"pageSizes":[5,10,20],"buttonCount":5},"sortable":true,"scrollable":{"height":"200px"},"messages":{"noRecords":"No records available."},"autoBind":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-server']){return 'aspnetmvc-server';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Pecos/NPI_Read"},"prefix":"npi-grid-"},"pageSize":10,"page":1,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"NPI":{"type":"string"},"ProviderFirstName":{"type":"string"},"ProviderLastName":{"type":"string"},"OrganizationName":{"type":"string"},"ProviderBusinessLocationAddressCity":{"type":"string"},"ProviderBusinessLocationAddressState":{"type":"string"},"PecosNPI":{"type":"string"},"PecosPendingReviewNPI":{"type":"string"}}}}}});});

 

The other is when I try to make the table an MVC Grid table:

<script>
    $(document).ready(function() {
        $("#mvcGrid").kendoGrid({
            height: 550,
            sortable: true
        });
    });
</script>

In the bottom of the page I have:

<script src="/Scripts/jquery-3.1.0.js"></script>

<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.aspnetmvc.min.js"></script>

In the header, I have:

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.bootstrap.min.css">
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/site.css" rel="stylesheet">

<script src="/Scripts/modernizr-2.8.3.js"></script>

[Andrew]

Eliminated the jQuery errors by changing the header section to be:

    @Scripts.Render("~/bundles/jquery")
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.aspnetmvc.min.js"></script>

I removed the Scripts.Render jQuery from the footer.Still doesn't load results.

[Andrew]

Ok, I finally got it to load results. Holy cow.

Now the problem is with paging. If someone types a name for a provider, for example "Thomas" it returns 32,729 rows. Each page has 20 items per page. Since it's results are all loaded (I think?) I'd imagine the paging should be pretty fast, but it takes almost 40 seconds to load the next results. Should there be something else that I should do?

[Andrew]

Sorting also doesn't work. Trying it with a smaller dataset (14 records) and when I click on First Name header, it shows the spinner image, but doesn't sort anything.

[Andrew]

Adding ServerOperation(false) to the DataSource got the sort working.

 

However, now when I try searching for "Thomas" which has over 30k records, it times out. In Visual Studio 2015, using the ApplicationInsights the error I get is: Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.

[Andrew]

Also, when loading 1900 records, in SQL it takes 1 second to get all the results; however, using Entity Framework and the grid it takes almost 10 seconds to load the grid. Any suggestions?

[Kostadin]

Hi Andrew,

I would recommend you to use Ajax binding and enable ServerOperation option of the datasource. For your convenience I prepared a small sample based on the previously provided help articles and attached it to this thread. You can see I am binding the grid to a List of product with 100 000 items and all enabled features of the grid are performed for a couple of seconds.
If you still experience performance issues after applying the suggestions I would appreciate if you can replicate the issue either in my sample or in a small runnable one in order to examine it further.

I am looking forward to your reply.

Regards,
Kostadin
Telerik by Progress

[Andrew]

I'm doing literally the exact same thing, except my data service returns an IQueryable. Should it return a list?

[Andrew]

I switched up the code to return a List, but it still takes 8-10 seconds to load and to page through the grid. 

[Andrew]

I posted a link in https://www.telerik.com/account/support-tickets/view-ticket?threadid=1062216 with a copy of the project. I put the database's in the App_Data folder so you can see my pain if you search for something like "Backman" which returns 55 results.

[Andrew]

I posted a reply in https://www.telerik.com/account/support-tickets/view-ticket?threadid=1062216 with a copy of my project. I put the database's mdf into App_Data. If you try searching for "Backman" it returns 55 results and takes 8-10 seconds to load and page.

[Andrew]

I posted a reply in https://www.telerik.com/account/support-tickets/view-ticket?threadid=1062216 with a copy of my project. I put the database's mdf into App_Data. If you try searching for "Backman" it returns 55 results and takes 8-10 seconds to load and page.

[Kostadin]

Hello Andrew,

I already answered the support ticket and I would appreciate if we continue our conversation in it.

Regards,
Kostadin
Telerik by Progress