Questions on UI for ASP.NET Core Forum

1 answer

805 views

I have a Kendo professional license. I have install @progress/kendo-ui via NPM. WebPack is bundling it as expected and everything compiles fine. When the page loads it can't find kendo to initialize any of the controls.

in my index.cshtml I have:

...

<head>
 <script src="~/js/vendors-node_modules_jquery_dist_jquery_js.bundle.js" type="text/javascript" asp-append-version="true"></script>
 <script src="~/js/vendors-node_modules_jquery-validation-unobtrusive_dist_jquery_validate_unobtrusive_js.bundle.js" type="text/javascript" asp-append-version="true"></script>
 <script src="~/js/vendors-node_modules_popperjs_core_lib_index_js.bundle.js" type="text/javascript" asp-append-version="true"></script>
 <script src="~/js/vendors-node_modules_progress_kendo-ui_js_kendo_all_js.bundle.js" type="text/javascript" asp-append-version="true"></script>
 <script src="~/js/vendors-node_modules_progress_kendo-ui_js_kendo_all_js-node_modules_kendo-ui-core_js_kendo_ui-55088d.bundle.js" type="text/javascript" asp-append-version="true"></script>
 <script src="~/js/vendors-node_modules_toastr_toastr_js.bundle.js" type="text/javascript" asp-append-version="true"></script>
</head>

...

<div class="results">
		@(Html.Kendo().ListView<UserProfile>()
   .Name("userProfileSearchResults")
   .TagName("div")
   .Bordered(false)
   .DataSource(dataSource => dataSource
    .Ajax()
    .Model(m => m.Id(p => p.Id))
    .PageSize(25)
    .Read("UserProfiles_Search", "Home")
    .ServerOperation(false)
    .Sort(sorter =>
    {
     sorter.Add(c => c.ProfileName).Ascending();
     sorter.Add(c => c.EmailAddress).Ascending();
     sorter.Add(c => c.AccountNumber).Ascending();
     sorter.Add(c => c.Id).Ascending();
    })

   )
   .AutoBind(false)
   .Pageable(pager => pager
    .ButtonCount(10)
    .Numeric(true)
    .Enabled(true)
   )
   .ClientTemplateId("userProfileSearchResultItem")
   )
	</div>

which generates a chunk of script into the page to initialize that control. But for the inline kendo script....kendo is not defined. It is expecting a global kendo reference which no longer happens with webpack.

package.json:

{
	"version": "1.0.0",
	"name": "asp.net",
	"private": true,
	"scripts": {
		"build-Debug": "webpack --mode development --no-color --stats-error-details",
		"build-Release": "webpack --mode production --no-color"
	},
	"dependencies": {
		"@popperjs/core": "^2.9.2",
		"@progress/kendo-ui": "^2021.2.511",
		"jquery": "3.5.1",
		"jquery-validation": "^1.19.3",
		"jquery-validation-unobtrusive": "^3.2.12",
		"kendo-ui-core": "^2021.2.511",
		"toastr": "^2.1.4"
	},
	"devDependencies": {
		"@types/glob": "^7.1.3",
		"@types/jquery": "3.5.1",
		"@types/node": "^15.0.2",
		"@types/toastr": "^2.1.38",
		"@types/webpack": "^5.28.0",
		"glob": "^7.1.7",
		"ts-loader": "^9.1.2",
		"ts-node": "^9.1.1",
		"typescript": "^4.2.4",
		"webpack": "^5.37.0",
		"webpack-cli": "^4.7.0"
	}
}

webpack.config.ts

import * as path from 'path';
import * as glob from 'glob';
import * as webpack from 'webpack';

const config: webpack.Configuration = {
	mode: 'development',
	entry: glob.sync('{./Scripts/**/*.ts,./wwwroot/lib/**/*.js}').reduce((obj, path) => {
		const match = /Scripts\/(.*)\.ts$/.exec(path);
		const isDefinition = /(.*)\.d\.ts$/.exec(path);
		const isStandardJs = /lib\/(.*)\.js/.exec(path);
		if (match && !isDefinition) {
			const item = match[1];
			obj[item] = path;
		}
		if (isStandardJs) {
			const item = isStandardJs[1];
			obj[item] = path;
		}
		return obj;
	}, {} as webpack.EntryObject),
	module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: 'ts-loader',
				exclude: /node_modules/
			}
		]
	},
	resolve: {
		extensions: [
			'.tsx',
			'.ts',
			'.js'
		]
	},
	devtool: 'inline-source-map',
	output: {
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'wwwroot/js')
	},	
	optimization: {
		splitChunks: {			
			chunks: 'all'
		}
	}
};

export default config;

General Discussions

ListView

answered on 18 May 2021

1 answer

299 views

PDF Viewer Tag Helper Toolbar Items

What is the correct Tag Helper syntax for the toolbar items Toogle Selection and Zoom? I'm guessing below because I can't find these two documented anywhere. The link below gives you some of them but not all. What I'm trying to do is have the toolbar show all the default items except the open command which requires me to specify all toolbar items except open.

https://demos.telerik.com/aspnet-core/pdfviewer/tag-helper

    <kendo-pdfviewer name="pdfviewer">
        <pdfjs-processing file="@(Url.Action("GetReportDownload", "Downloader"))"/>
        <toolbar enabled="true">
            <pdfviewer-toolbar-items>
                <pdfviewer-toolbar-item command="PageChangeCommand" type="pager" name="pager"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item type="spacer" name="spacer"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item command="ZoomCommand" type="zoom" name="zoom"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item command="ToggleSelectionCommand" type="toggleSelection" name="toggleSelection"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item type="spacer" name="spacer"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item command="OpenSearchCommand" type="button" name="search" icon="search"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item command="DownloadCommand" type="button" name="download" icon="download"></pdfviewer-toolbar-item>
                <pdfviewer-toolbar-item command="PrintCommand" type="button" name="print" icon="print"></pdfviewer-toolbar-item>
            </pdfviewer-toolbar-items>
        </toolbar>
    </kendo-pdfviewer>

PDFViewer

answered on 18 May 2021

0 answers

217 views

Breadcrumb to load partial view

Hi,

is it possible to use the breadcrumb component to load partial views into a div?

Regards

Erwin

Breadcrumb

asked on 17 May 2021

0 answers

283 views

DropDownList binding and selection in partial page

I have a dropdownlist on a partial page. As it can obviously be shared by multiple pages, code to populate is on a separate shared page. I'm loading using the code below, and that works fine

@(Html.Kendo().DropDownList() .Name("ModeOfTransport") .DataTextField("description") .DataValueField("modeOfTransportID") .HtmlAttributes(new { style = "width:100%;" })
                       .AutoBind(true) .DataSource(source => source.Custom() .Transport(transport => transport .Read(r => r .Url("/Shared/AjaxPartial?handler=ModesOfTransport").Data("dataFunction") ))
                       .ServerFiltering(true)
                         )
                       .Events(e=>e.DataBound("ModeOfTransportDataBound"))
                       )

function ModeOfTransportDataBound(e) {
        var currentModeOfTransport = $('#CurrentModeOfTransport').val();
        e.sender.value(currentModeOfTransport);
    }

ModeOfTransport maps to a bindingproperty, and when the page is saved, the correct selected value is stored in that value. However, when the DropDownList loads, the current value is not selected. The only way I can see to do this is to store the current value in a hidden field, then select on the databound event. This works, but I can't help feeling I'm taking the wrong approach. Any suggestions to improve this process?

We've been working with ASPX and Telerik for over 15 years, but new to Razor, so happy to accept I maybe doing this completely wrong.

DropDownList

asked on 17 May 2021

1 answer

185 views

Spreadsheet horizontal scrollbar not adjusted when Toolbar and SheetBar to false

When the toolbar and sheetbar are invisible, the bottom horizontal scrolbar is not ajusted (is a little bit above it should be)

@(Html.Kendo()
    .Spreadsheet()
    .Name("spreadsheet")
    .HtmlAttributes(new {style = "width:100%"})
    .Toolbar(false)
    .Sheetsbar(false)

I mean, esthetically, if we suppose that the vertical and horizontal bars should have the same distance to the external border.

For the vertical scrolbar that distance is zero. Should be the same for the horizontal then.

picture:

detailed view:

or add a similar margin to the vertical one:

ScrollView

Spreadsheet

answered on 17 May 2021

1 answer

1.6K+ views

KendoGrid Correct way to disable delete for specific rows?

ASP.NETCore KendoGrid Correct way to disable delete for specific rows?

I have a use case where I need to disable the deletion of rows that still have children to maintain referential integrity of the database. Instead of having the user hit DELETE and catch the error, I need to prevent the user from attempting to perform an invalid action. I can attempt to hide the DELETE button in the onDataBound() or the onDataBinding() events but the results are poor and inconsistent. When it works, it only works when the page is first loaded. If the user performs an in-line edit on any row, the delete button unhides. Other interactions with the page also unhide the DELETE button. I have found several posts claiming that the "k-grid-delete" class can't be hidden.

Instead of hiding the button outright, ideally I'd like to be able to still have the button visible, but in a disabled state.

Is there a solution?

     function onDataBound(e) {
          var grid = $("#grid").data("kendoGrid");
          var rows = grid.tbody.children();
          rows.each(function (e) {
               var dataItem = grid.dataItem(this);
               if (dataItem.ChildrenCount > 0) {
                    var row = $("[data-uid=" + dataItem.uid + "]");
                    var deleteButton = row.find("k-grid-delete");
                    deleteButton.hide();
               }
          });
     }

Button

Grid

answered on 14 May 2021

1 answer

790 views

Kendo grid modal lookup and submit

Hi,

We need to develop a form for submitting data using kendo grid, in ASP NET CORE 5.0 MVC

basically we need to create an empty grid based on a database table, (this is clear using model binding), the user can click on a button in a toolbar for making a "Lookup" of that database, select one or many row and then, once selected, add them to the previous grid, ready for submit.

What's the best way to achieve this with telerik controls?

Grid

answered on 14 May 2021

1 answer

694 views

Remote validation with AdditionalFields when editing the Grid

In a Grid, I try to edit a Product, that should have a unique Code.

In that case, I need the remote validation, to test, if the edited code would exist already in the database, different, from the edited product, of course.

For that, I need to send to the server the edited product Code, along with its Id.

In such cases, I would have an action like this, in the controller (documented here):

DTO:

[Remote(action: "VerifyCode", controller: "Products", AdditionalFields = nameof(ProductId))]
[Display(Name = "Product Code")]
public string Code { get; set; }

Controller:

[AcceptVerbs("GET", "POST")]
public IActionResult VerifyCode(string code, int id)
{
    if (!_productService.VerifyCode(code, id))
    {
        return Json($"The code {code} is already taken by another product but shoud be unique, please change the code.");
    }

    return Json(true);
}

how to perform such validation when editing the Grid? Ideally inCell edit, but at least in Popup Mode....

Grid

Notification

updated answer on 14 May 2021

1 answer

138 views

Search toolbar, why text not translated?

having a grid, with a search panel, the text in the search panel "Search..." is not translated, but another toolbars are translated

        .ToolBar(

            toolbar => {
                toolbar.Create(); // translated to french
                toolbar.Save(); // translated to french
                toolbar.Excel(); // translated to french
                toolbar.Search().Text("Recherche..."); // NOT translated to french
            }
        )

I should hardcode translation, but shouldn't it be already translated in JS localization files?

Please add this to translation files :

$(function () {
    /* Grid messages */
    if (kendo.ui.Grid) {
        kendo.ui.Grid.prototype.options.messages =
            $.extend(true, kendo.ui.Grid.prototype.options.messages, {
                commands: { search: "Rechercher..." }
            });
    };
});

Grid

Localization

Toolbar

answered on 13 May 2021

1 answer

313 views

Remote validation of fields in Grid Popup

Could we have an example of remote validation when Popup editing of a grid object ?

I added the [Remote] attribute to the DTO object. Added the Controller's check method, that receives always null as parameter, where should receive the modified string param. Please see for details the following question. I also get in the request playload the correct parameter, when the client sends to the server. But on the server side - always null.

Editor

Grid

answered on 12 May 2021