This is a migrated thread and some comments may be shown as answers.
ASP.NET CORE using Razor Pages
19 Answers 559 Views
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 12 Dec 2017, 03:50 AM

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

]

 

 

19 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 14 Dec 2017, 08:21 AM
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.
0
John
Top achievements
Rank 1
answered on 14 Dec 2017, 02:12 PM

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)
0
Stefan
Telerik team
answered on 18 Dec 2017, 12:56 PM
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.
0
Long
Top achievements
Rank 1
answered on 07 Apr 2018, 04:34 PM

Hi Stefan,

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

Thanks,

Long

0
Stefan
Telerik team
answered on 09 Apr 2018, 08:13 AM
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.
0
Arnaud
Top achievements
Rank 1
answered on 11 Sep 2018, 01:36 PM

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

thx

0
Konstantin Dikov
Telerik team
answered on 14 Sep 2018, 12:22 PM
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.
0
Anand Kumar
Top achievements
Rank 1
answered on 04 Oct 2018, 07:14 AM

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.

 

0
Konstantin Dikov
Telerik team
answered on 08 Oct 2018, 04:13 PM
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.
0
Anand Kumar
Top achievements
Rank 1
answered on 09 Oct 2018, 12:56 PM

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.

0
Konstantin Dikov
Telerik team
answered on 12 Oct 2018, 08:49 AM
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.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 15 Nov 2018, 06:48 PM
Note, this method is now depreciated starting with R2 2018.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 15 Nov 2018, 06:52 PM

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.

0
Konstantin Dikov
Telerik team
answered on 20 Nov 2018, 08:44 AM
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.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 20 Nov 2018, 10:11 PM

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 ]

 

 

0
Konstantin Dikov
Telerik team
answered on 23 Nov 2018, 11:03 AM
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.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 28 Nov 2018, 10:22 PM

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.

0
Chris
Top achievements
Rank 1
answered on 03 Apr 2019, 08:57 PM
How do I add what is needed for Kendo UI in an existing ASP.NET Core Razor project in Visual Studio?
0
Konstantin Dikov
Telerik team
answered on 08 Apr 2019, 10:52 AM
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.
Asked by
John
Top achievements
Rank 1
Answers by
Stefan
Telerik team
John
Top achievements
Rank 1
Long
Top achievements
Rank 1
Arnaud
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Anand Kumar
Top achievements
Rank 1
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Chris
Top achievements
Rank 1
Share this question
or