ASP.NET CORE using Razor Pages

20 posts, 1 answers
  1. John
    John avatar
    12 posts
    Member since:
    May 2016

    Posted 11 Dec 2017 Link to this post

    Hi, 

    I am trying to find a suitable example of using a Kendo UI Grid to display data from a

    Microsoft.AspNetCore.Mvc.RazorPages.PageModel

     (v 2.0.1.0)

    I can already successfully render to a native html <table> without problem so I know I have no errors in fetching and displaying data without Kendo Grid.

    I have tried so far - without success :

    1) http://demos.telerik.com/aspnet-core/grid/local-data-binding

    2) http://demos.telerik.com/aspnet-core/grid/remote-data-binding

    When the page loads I see no client-side js errors.  The grid is simply no rendered.

    The IndexModel class serves as the Model for the Razor Page.

    It has a simple 

    public async Task OnGetAsync(int? id)

     

    This sets a Public Property to expose a collection/list of a type.

    So for example if I use Kendo grid with a local datasource like so:

     

    @(Html.Kendo().Grid(Model.Practice.Practices)
                  .Name("grid")
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.Id).Width(140);
                      columns.Bound(c => c.Name).Width(190);
                      columns.Bound(c => c.PracticeAddresses[0].Address1);
                      columns.Bound(c => c.PracticeAddresses[0].Address2);
                      columns.Bound(c => c.PracticeAddresses[0].PostCode);
                  })
                  .HtmlAttributes(new { style = "height: 380px;" })
                  .Scrollable()
                  .Groupable()
                  .Sortable()
              .Pageable()
              .Sortable()
              .Scrollable(scr=>scr.Height(430))
              .Filterable()
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(20)
                  .ServerOperation(true)
              )
        )

    The page shows no grid.

     

    Thanks in advance for any suggestions...

     

    [using 

    Microsoft Visual Studio Enterprise 2017 
    Version 15.5.1
    VisualStudio.15.Release/15.5.1+27130.2003
    Microsoft .NET Framework
    Version 4.7.02053

    ]

     

     

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 14 Dec 2017 Link to this post

    Hello, John,

    I made an example of Razor Page which is working as expected on my end.

    The Grid is using data passed from the PageModel:

    public class IndexModel : PageModel
    {
        public List<Product> Data { get; set; } = new List<Product>();
     
        public void OnGet()
        {
            for (int i = 1; i <= 100; i++)
            {
                Data.Add(new Product() { ProductName = "product" + i, UnitPrice = i });
            }
        }
    }

    @(Html.Kendo().Grid<Product>(Model.Data)
        .Name("Grid")

    I have attached the project for reference.

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. John
    John avatar
    12 posts
    Member since:
    May 2016

    Posted 14 Dec 2017 in reply to Stefan Link to this post

    Hi Stefan, thanks for the assistance - it has been very insightful.

    In the StartUp.cs - i see there seems to be no need to add the line below - curious a i thought that would be required.

    I'm assuming this will all work fine for async as well?

     

    app.UseKendo(env)
  4. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 18 Dec 2017 Link to this post

    Hello, John,

    I'm happy that the example was helpful.

    As for the UseKendo method, it is an important part of the configuration and event that it would seem that it is not causing any issues when missing, it should be added. It was missed in the example as is it showing a standard approach:

    https://docs.telerik.com/aspnet-core/getting-started/getting-started

    The approach should work with async, but if you have any issues with that please open a support ticket and I will gladly assist.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Long
    Long avatar
    2 posts
    Member since:
    Jun 2012

    Posted 07 Apr 2018 in reply to Stefan Link to this post

    Hi Stefan,

    It seems to me that step #7 is not needed in the getting-started guide.  Please verify.

    Thanks,

    Long

  6. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 09 Apr 2018 Link to this post

    Hello, Long,

    The step is required otherwise the content files will not be available.

    This may work if all of the resources are coming from a CDN, but in the general use case, this step is required. 

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Arnaud
    Arnaud avatar
    2 posts
    Member since:
    Apr 2008

    Posted 11 Sep 2018 Link to this post

    How would you use it with Html.Kendo().Menu() ? since there is no controller ?

    thx

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 14 Sep 2018 Link to this post

    Hello Arnaud,

    Once you include the UI fro ASP.NET Core you should be able to use the helpers in the same way, even if there is no controller.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Anand Kumar
    Anand Kumar avatar
    3 posts
    Member since:
    Sep 2018

    Posted 04 Oct 2018 in reply to Stefan Link to this post

    Hi Stefan,

    During form submit the keno grid model value is not passing to view . i have multiple tabs and multiple table.

    i need to pass value while clicking submit button but the model values clears during submit.

     

  10. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 08 Oct 2018 Link to this post

    Hi Anand,

    The Grid is data management control and only editors pass their data when a form is submitted. For passing the Grid data with Form you need to follow the approach demonstrated in the following HowTo example:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Anand Kumar
    Anand Kumar avatar
    3 posts
    Member since:
    Sep 2018

    Posted 09 Oct 2018 in reply to Konstantin Dikov Link to this post

    Hello Admin,

    I Created The grid as mentioned in the link only.

    During the form submit the model becomes empty.

    This is asp.net core MVC application.

  12. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 12 Oct 2018 Link to this post

    Hi Anand,

    You need to ensure that the ClientTemplate for each column contains the hidden input element which submits the values of the Grid rows. If the problem persists, please share the model and the Grid configuration, so we can see what else could be causing the issue.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. Joel
    Joel avatar
    203 posts
    Member since:
    Jun 2018

    Posted 15 Nov 2018 in reply to John Link to this post

    Note, this method is now depreciated starting with R2 2018.
  14. Joel
    Joel avatar
    203 posts
    Member since:
    Jun 2018

    Posted 15 Nov 2018 in reply to Joel Link to this post

    Its annoying that the Forum posts don't keep their context.  When I reply to a post, I my reply should remain attached to and in context with that post.

    The app.UseKendo() method is depreciated as of R2 2018.  This method is still referenced in the .NET CORE documentation so it seems the .NET CORE documentation has become out of date.

  15. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 20 Nov 2018 Link to this post

    Hi Joel,

    In the following help article there is information about the app.UseKendo method and that it is required prior to version R2 2018:
    Notwithstanding, although that we are doing our best to keep the documentation up-to-date, there might be cases with missing information.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  16. Joel
    Joel avatar
    203 posts
    Member since:
    Jun 2018

    Posted 20 Nov 2018 in reply to Konstantin Dikov Link to this post

    Some notes while stepping through your link:

    • At the end of step 5 it shows that I need to add app.UseKendo(env); to the Startup.Configure method.  Is this needed?  This method call is marked as depreciated.
    • This document references NPM Client Install Copying Kendo UI Client Resources through NPM and Webpack
      • Step 6 says I need to run command line: npm run build
      • My package.json has the scripts section with "build" but the command line responds with the "npm ERR! missing script: build" error.  Here is my package.json definition:
      {
        "version": "1.0.0",
        "name": "asp.net",
        "private": true,
        "main": "main.js",
        "scripts": {
          "build": "webpack"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "dependencies": {
          "css-loader": "^1.0.0",
          "jquery": "^3.3.1",
          "popper.js": "^1.14.5",
          "style-loader": "^0.23.1",
          "@progress/kendo-theme-default": "^2.54.1",
          "@progress/kendo-ui": "2018.3.1114"
        },
        "devDependencies": {
          "webpack": "^4.26.0",
          "webpack-cli": "^3.1.2",
          "bootstrap": "3.3.1",
          "bootstrap-touch-carousel": "0.8.0",
          "jquery": "3.3.1",
          "jquery-validation": "1.18.0",
          "jquery-validation-unobtrusive": "3.2.11"
        }
      }

    Build points to webpack so this is what my webpack.config.js file looks like:

    const path = require('path');
    const webpack = require('webpack');
     
    module.exports = {
        entry: './main.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'wwwroot')
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
                }
            ]
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            }),
        ],
    }

    Here is the log file:

    0 info it worked if it ends with ok
    1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
    1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
    1 verbose cli   'run',
    1 verbose cli   'build' ]
    2 info using npm@6.4.1
    3 info using node@v10.13.0
    4 verbose stack Error: missing script: build
    4 verbose stack     at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
    4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
    4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:115:5
    4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:418:5
    4 verbose stack     at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:373:45)
    4 verbose stack     at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:416:3)
    4 verbose stack     at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:160:5)
    4 verbose stack     at ReadFileContext.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:332:20)
    4 verbose stack     at ReadFileContext.callback (C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:78:16)
    4 verbose stack     at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:235:13)
    5 verbose cwd C:\GSI\Gsi.Amtas.Cloud\GsiAmtasPortal
    6 verbose Windows_NT 10.0.14393
    7 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
    8 verbose node v10.13.0
    9 verbose npm  v6.4.1
    10 error missing script: build
    11 verbose exit [ 1, true ]

     

     

  17. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 23 Nov 2018 Link to this post

    Hi Joel,

    As stated in the documentation, the app.UseKendo method is needed for versions prior to R2 2018.

    Regarding the issue that you are facing with the NPM, could you please open regular support ticket with attached project, so we can inspect locally what could be causing the issue in question?


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  18. Joel
    Joel avatar
    203 posts
    Member since:
    Jun 2018

    Posted 28 Nov 2018 in reply to Konstantin Dikov Link to this post

    I came back to do this again and I believe this failure was because I didn't originally run the Command Prompt as Administrator.  My bad.  Thanks for your help.

  19. Chris
    Chris avatar
    1 posts
    Member since:
    Oct 2014

    Posted 03 Apr 2019 in reply to Stefan Link to this post

    How do I add what is needed for Kendo UI in an existing ASP.NET Core Razor project in Visual Studio?
  20. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 08 Apr 2019 Link to this post

    Hi Chris,

    Please refer to the answer in the following forum thread:

    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top