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
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
Rank 1
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)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
Rank 1
Hi Stefan,
It seems to me that step #7 is not needed in the getting-started guide. Please verify.
Thanks,
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
Rank 1
How would you use it with Html.Kendo().Menu() ? since there is no controller ?
thx
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
Rank 1
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.
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
Rank 1
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.
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
Rank 1
Veteran
Iron
Iron
Rank 1
Veteran
Iron
Iron
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.
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
Rank 1
Veteran
Iron
Iron
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 ok1 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.13 info using node@v10.13.04 verbose stack Error: missing script: build4 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:54 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:115:54 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:418:54 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\GsiAmtasPortal6 verbose Windows_NT 10.0.143937 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.09 verbose npm v6.4.110 error missing script: build11 verbose exit [ 1, true ]
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
Rank 1
Veteran
Iron
Iron
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.
Rank 1
Please refer to the answer in the following forum thread:
Regards,
Konstantin Dikov
Progress Telerik