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

22 posts, 0 answers
  1. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 08 Sep Link to this post

    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?

  2. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 08 Sep in reply to Andrew Link to this post

    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

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 09 Sep Link to this post

    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"));     

  5. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 09 Sep Link to this post

    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

  6. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 09 Sep Link to this post

    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.
  7. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 09 Sep Link to this post

    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.

  8. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 12 Sep Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 12 Sep in reply to Kostadin Link to this post

    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.

  10. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 12 Sep in reply to Andrew Link to this post

    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.

  11. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 12 Sep Link to this post

    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>

  12. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 12 Sep Link to this post

    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.

  13. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 12 Sep Link to this post

    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?

  14. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 12 Sep Link to this post

    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.
  15. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 12 Sep Link to this post

    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.

  16. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 12 Sep Link to this post

    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?
  17. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 14 Sep Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  18. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 14 Sep in reply to Kostadin Link to this post

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

  19. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 14 Sep in reply to Andrew Link to this post

    I switched up the code to return a List, but it still takes 8-10 seconds to load and to page through the grid. 
  20. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 14 Sep Link to this post

    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.
  21. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 14 Sep Link to this post

    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.
  22. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 14 Sep Link to this post

    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.
  23. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 16 Sep Link to this post

    Hello Andrew,

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

    Regards,
    Kostadin
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready