ASP.NET CORE using Razor Pages

[John]

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

]

 

 

[Stefan]

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

[John]

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)

[Stefan]

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

[Long]

Hi Stefan,

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

Thanks,

Long

[Stefan]

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

[Arnaud]

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

thx

[Konstantin Dikov]

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

[Anand Kumar]

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.

 

[Konstantin Dikov]

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:

• https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/post-grid-with-form

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[Anand Kumar]

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.

[Konstantin Dikov]

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

[Joel]

Note, this method is now depreciated starting with R2 2018.

[Joel]

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.

[Konstantin Dikov]

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:

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

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

[Joel]

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 ]

 

 

[Konstantin Dikov]

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

[Joel]

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.

[Chris]

How do I add what is needed for Kendo UI in an existing ASP.NET Core Razor project in Visual Studio?

[Konstantin Dikov]

Hi Chris,

Please refer to the answer in the following forum thread:

• https://www.telerik.com/forums/how-to-add-telerik-core-to-exist-project#vNZIG4SyWUWBcSc8mZ3V8Q

Regards,
Konstantin Dikov
Progress Telerik