Questions on Kendo UI for jQuery Forum

4 answers

279 views

Kendo with Angularjs (v1.6.2) and typescript - error

Hi,

I am using trying to use kendo chart with Angularjs (1.6.2) and typescript. I have a sample project created using Yeoman.

I have my kendo package also in the project folder. I have run the project using npm run serve

Gettting error: "index.js:23241 Error: The Kendo UI directives require jQuery to be available before AngularJS. Please include jquery before angular in the document.
at createWidget (index.js:117598)
at Object.link (index.js:118233)
at index.js:9926
at invokeLinkFn (index.js:19086)
at nodeLinkFn (index.js:18475)
at compositeLinkFn (index.js:17715)
at compositeLinkFn (index.js:17718)
at publicLinkFn (index.js:17580)
at index.js:10495
at Scope.$eval (index.js:26964) "<div kendo-chart="" k-legend="{ position: 'bottom' }" k-series-defaults="{ type: 'bar' }" k-series="[
{ field: 'nuclear', name: 'Nuclear electricity' },
{ field: 'hydro', name: 'Hydro electricity' },
{ field: 'wind', name: 'Wind electricity' }
]" k-data-source="electricity" k-series-hover="onSeriesHover" style="height: 400px;">""

I have the below code in my index.html.

-------------------------------------------------------------------------

-------------------------------------------------------------------------

In my index.ts file, I have the below code

import * as $ from "jquery";
import * as angular from 'angular';
import {techsModule} from './app/techs/index';
import 'angular-ui-router';
import routesConfig from './routes';
import {main} from './app/main';
import {header} from './app/header';
import {title} from './app/title';
import {footer} from './app/footer';
import './index.scss';
import '@progress/kendo-ui/';
/// <reference path="./app/kendo/typescript/kendo.all.d.ts" />
angular
.module('app', [techsModule, 'ui.router','kendo.directives'])
.config(routesConfig)
.component('app', main)
.component('fountainHeader', header)
.component('fountainTitle', title)
.component('fountainFooter', footer);

-------------------------------------------------------------------------

Please give suggestions. I am new to angularjs and typescript...I have attached the project without the kendo package files which was earlier inside src/app/kendo folder.

General Discussions

answered on 08 Sep 2017

1 answer

227 views

Angular - improving webpack performance

Hi, not very familiar with the webpack tool, but its slow to build my SPA using VS2017 and JavaScriptServices, about 50 seconds. Is there some way to cache the webpack output for the Telerik angular modules/css? Specifically the requests :

Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request starting HTTP/1.1 GET http://localhost:52626/dist/main.css?v=lTMQDsn6qiFEshoAdXck56k4BIPX0Y7qdkml_OMV67E

Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request starting HTTP/1.1 GET http://localhost:52626/dist/main-client.js?v=9miPYLaRFn3FUiIl4DMnHaXSLA7W1TNPUmhx5OdN8Jw

seem to be part of the problem as the response are:

Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request finished in 39309.1692ms 200 text/css; charset=UTF-8

Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request finished in 41590.2456ms 200 application/javascript; charset=UTF-8

This is the start of the webpack output:

Microsoft.AspNetCore.NodeServices: Information: webpack built e833ab89a2ae6f1de16b in 47695ms

Microsoft.AspNetCore.NodeServices: Error: Hash: e833ab89a2ae6f1de16b

Version: webpack 2.7.0

Time: 47695ms

Asset Size Chunks Chunk Names

main-client.js 7.25 MB 0 [emitted] [big] main-client

main.css 456 kB 0 [emitted] [big] main-client

main-client.js.map 8.2 MB 0 [emitted] main-client

main.css.map 85 bytes 0 [emitted] main-client

chunk {0} main-client.js, main.css, main-client.js.map, main.css.map (main-client) 6.49 MB [entry] [rendered]

Sorry I don't really know more precisely what the problem is, just trying to get a fast build environment for VS2017+Telerik Angular. Note that I'm using the JavaScriptServices over the CLI as I have a many plain c# projects in the solution.

General Discussions

answered on 08 Sep 2017

1 answer

228 views

Require Image Browser Alternate Text

Is there a way to make the "Alternate Text" value required for the Image Browser. I have found a way to implement this functionality for the Insert button, but I cannot find a way for it to work for double-clicking the image. Note, I do consider the Insert button "solution" a hack and would prefer to implement a better solution if one exists.

// Editor definition

element.kendoEditor({

execute: handlers_editorExecute,

imageBrowser: {

apply: handlers_editorImageBrowserApply,

}

});

// This does not work for double-clicking the image because the image is inserted regardless of the return value

handlers_editorImageBrowserApply: function (e) {

var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");

if (imageBrowser.value() != "") {

if ($(".k-filebrowser-dialog #k-editor-image-title").val() == "") {

alert("Alternate text is required.");

return false;

}

},

// This does work for clicking the Insert button and the apply function is not defined, but feels like a hack

handlers_editorExecute: function (e) {

if (e.name == "insertimage") {

setTimeout(function () {

var insertButton = $(".k-filebrowser-dialog .k-dialog-insert");

insertButton.unbind("click");

insertButton.click(function () {

var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");

if (imageBrowser.value() != "") {

if ($(".k-filebrowser-dialog #k-editor-image-title").val() == "") {

alert("Alternate text is required.");

return false;

}

imageBrowser.trigger("apply");

});

}

},

Editor

answered on 08 Sep 2017

3 answers

164 views

Broken multiselection

Hello,

we are using Kendo UI for angular and dicsovered that multiselect does not work unless user clicks on checkboxes (even if checkboxOnly is set to false). Its reliably reproducible even on your sameple in documentation: http://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-selection

There if selection mode is 'mutiple' clicking on rows (not checkboxes) only allows single row to be selected at the time.

Jan

Grid

answered on 08 Sep 2017

1 answer

363 views

Series Double Click

Hi,

There is an event seriesClick; how if I want to ignore single click and only respond to double click ?]

Thank you.

Charts

answered on 08 Sep 2017

1 answer

1.3K+ views

Grid - Refresh every X seconds + ASPNETCore examples

I am wondering if anyone has experience with refreshing a grid (no paging involved) on an interval. I would like to refresh every 60 seconds but interested in making it as transparent as possible to the user. I am doing my reads from an API endpoint with JSON returns therefore wondering about the use of .read() or .sync() and preference. This is a read-only grid. I am using the jQuery Kendo grid with ASP.NET Core MVC project.

In addition if you have any examples of web sockets or using ASP.NET Core early releases of SignalR with an ASP.NET Core MVC site that would be amazing.

Thanks.

Doug

Grid

answered on 08 Sep 2017

1 answer

120 views

[Solved] Firefox 55.0.3 64bit + uBlock Origin (or Adblock I think) initialization error

On firefox 55.0.3 64bit, when I have enabled uBlock Origin or Adblock, I have strange initalization issue in version 2017.2.621

The below function from kendo.all.js is throwing exception: root is null. This happens when addon is enabled even if site is whitelisted. I need to disable addon totally to make editor work. I can reproduce issue on Dojo or demo site. I believe previous version didn't have this issue.

function textOnly(root) {

var childrenCount = root.childNodes.length;

var textChild = childrenCount && root.firstChild.nodeType == 3;

return textChild && (childrenCount == 1 || childrenCount == 2 && dom.insignificant(root.lastChild));

}

Editor

answered on 08 Sep 2017

1 answer

382 views

Remove Column Menu Item

Simply want to remove a column menu item, like "Sort Ascending". Tried numerous suggestions, nothing works. How do I remove the menu item as shown in the attached pic?

TIA!

Grid

answered on 08 Sep 2017

22 answers

1.6K+ views

Grid with Foreign Key Column Displaying Blank After Creation

I am aware of the EditorTemplate required file (GridForeignKey.cshtml) and it is where it is supposed to be.
This only happens to the first column: Benefit
Any suggestions would be appreciated.

Here is my UI code:

@(Html.Kendo().Grid<OtherBenefitMappingModel>()
.Name("OtherBenefitMappingByUserGrid")
.Columns(columns =>
	{
		columns.Bound(p => p.OtherBenefitMappingId).Hidden(true);
		columns.ForeignKey(b => b.BenefitRecordId, Model.OtherBenefitMappingsByUser, "BenefitRecordId", "BenefitDescriptionText").EditorTemplateName("BenefitDescriptionDropDown").Title("Benefit").Filterable(false);
		columns.ForeignKey(b => b.AppendixD1ElementId, Model.AppendixD1ElementModels, "AppendixD1ElementId", "AppendixD1ElementName").EditorTemplateName("AppendixD1DropDown").Title("Appendix").Filterable(false);
		columns.Bound(p => p.MappedBy).Title("Mapped By");
		columns.Bound(p => p.LastModifiedDate).Title("Mapped Date").Format("{0:MM/dd/yyyy}");
		columns.Command(command =>
			{
				command.Edit();
				command.Destroy();
			}).Width(175);
	})
.Pageable()
.Sortable()
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
										.Ajax()
										.Create(create => create.Action("OtherBenefitMappingsByUserGridCreator", "EHBReview"))
										.Read(read => read.Action("OtherBenefitMappingsByUserGridReader", "EHBReview"))
										.Update(update => update.Action("OtherBenefitMappingsByUserGridUpdater", "EHBReview"))
										.Destroy(delete => delete.Action("AjaxPrimaryOtherMappingGridRowDeleter", "EHBReview"))
										.Model(model =>
											{
												model.Id(p => p.OtherBenefitMappingId);
												model.Field(a => a.LastModifiedDate).Editable(false);
												model.Field(a => a.MappedBy).Editable(false);
											})
)
)

Here is my editor template:

@using System.Collections

@using Kendo.Mvc.UI

@(Html.Kendo().DropDownList()

.Name("BenefitRecordId")

.DataTextField("BenefitDescriptionText")

.DataValueField("BenefitRecordId")

.SelectedIndex(-1)

.OptionLabel("Select...")

.BindTo((IEnumerable) ViewData["OtherBenefitDescriptionData"])

)

Here is the corresponding code for the view:


		public ActionResult OtherBenefitMapping(int productId)
		{
			if (productId < 1)
			{
				return NoData();
			}
			Session["ProductId"] = productId;
			return View(LoadOtherBenfitMappingPageModel(productId));
		}
 
		private OtherBenefitMappingPageModel LoadOtherBenfitMappingPageModel(int productId)
		{
			IEnumerable<vOtherBenefitMap> vOtherBenefitMaps = _otherBenefitMappingDataProvider.GetByProductId(productId).ToList();
			var model = new OtherBenefitMappingPageModel
			{
				OtherBenefitMappingsBySystem = vOtherBenefitMaps.Where(a => a.MappedBy == "system").Select(e => new OtherBenefitMappingModel(e)).ToList(),
				BenefitRecordsNotMappedBySystem = vOtherBenefitMaps.Where(a => a.MappedBy != "system").Select(e => new BenefitRecordModel(e)).Distinct().ToList(),
				OtherBenefitMappingsByUser = vOtherBenefitMaps.Where(a => a.MappedBy != "system" && a.OtherBenefitMappingId > 0).Select(e => new OtherBenefitMappingModel(e)).ToList(),
				AppendixD1ElementModels = _appendixD1ElementDataProvider.GetAll().Select(e => new AppendixD1ElementModel(e)).OrderBy(e => e.AppendixD1ElementName).ToList(),
			};
			ViewData["OtherBenefitDescriptionData"] = model.BenefitRecordsNotMappedBySystem;
			ViewData["AppendixD1Data"] = model.AppendixD1ElementModels;
			return model;
		}

		public JsonResult OtherBenefitMappingsByUserGridCreator([DataSourceRequest] DataSourceRequest request, OtherBenefitMapping obm)
		{
			var result = new List<OtherBenefitMappingModel>();
			if (!ModelState.IsValid || obm == null)
			{
				return null;
			}
			obm.ProductId = (int) Session["ProductId"];
			obm.MappedBy = User.Identity.Name;
			obm.LastModifiedDate = DateTime.Now;
			OtherBenefitMapping otherBenefitMapping = _otherBenefitMappingDataProvider.Create(obm);
			result.Add(new OtherBenefitMappingModel(otherBenefitMapping));
			return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
		}
 
		public JsonResult OtherBenefitMappingsByUserGridReader([DataSourceRequest] DataSourceRequest request)
		{
			DataSourceResult result = GetOtherBenefitMappingsByUser().ToDataSourceResult(request);
			return Json(result, JsonRequestBehavior.AllowGet);
		}
 
		private IEnumerable<OtherBenefitMappingModel> GetOtherBenefitMappingsByUser()
		{
			int productId = (int)Session["ProductId"];
			var model = LoadOtherBenfitMappingPageModel(productId);
			return model.OtherBenefitMappingsByUser;
		}
 
		public JsonResult OtherBenefitMappingsByUserGridUpdater([DataSourceRequest] DataSourceRequest request, OtherBenefitMapping obm)
		{
			if (!ModelState.IsValid || obm == null)
			{
				return null;
			}
			OtherBenefitMapping otherBenefitMapping = _otherBenefitMappingDataProvider.Get(obm.OtherBenefitMappingId);
			otherBenefitMapping.AppendixD1ElementId =  obm.AppendixD1ElementId;
			otherBenefitMapping.BenefitRecordId = obm.BenefitRecordId;
			_otherBenefitMappingDataProvider.Update(otherBenefitMapping);
			var result = new List<OtherBenefitMappingModel> {new OtherBenefitMappingModel(otherBenefitMapping)};
			return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
		}
 
		public JsonResult AjaxPrimaryOtherMappingGridRowDeleter([DataSourceRequest] DataSourceRequest request, OtherBenefitMapping obm)
		{
			if (!ModelState.IsValid || obm == null)
			{
				return null;
			}
			OtherBenefitMapping otherBenefitMapping = _otherBenefitMappingDataProvider.Get(obm.OtherBenefitMappingId);
			_otherBenefitMappingDataProvider.Delete(otherBenefitMapping);
			return Json(null, JsonRequestBehavior.AllowGet);
		}

Grid

answered on 07 Sep 2017

1 answer

804 views

Using Kendo Editor with ES6 & Webpack

I'm attempting to include the Kendo UI Editor control in an ES6 project of mine, and have managed to get pretty far, but there's some wiring required to get the CSS loaded that is eluding me. As it stands, I can get a working editor created in my React component, but the resulting HTML is unstyled on the client.

Trying to add the paths to the CSS files in the node_modules folder via import statements leads to the below error.

This seems like something a AAA package like Kendo should support with ease. My alternative is to throw out the entire NPM package and just throw the static files into the /public folder. This seems a less than ideal way to proceed.

Again, the only problem I have is trying to get the CSS to work. The JS portion is being loaded and works fine.

Webpack compilation results in error:

ERROR in ../~/css-loader!../~/@progress/kendo-ui/css/web/kendo.common.core.css

Module not found: Error: Can't resolve 'file' in 'C:\sources\src'

@ ../~/css-loader!../~/@progress/kendo-ui/css/web/kendo.common.core.css 6:100917-100972

@ ../~/@progress/kendo-ui/css/web/kendo.common.core.css

@ ./components/Main/KendoTest/KendoTest.js

@ ./components/App.js

@ ./components/Routes.js

@ ./main.js

@ multi ./main.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true

React Component:

import React from 'react';

import {PropTypes} from 'prop-types';

import $ from 'jquery';

import '@progress/kendo-ui/js/kendo.core';

import '@progress/kendo-ui/js/kendo.editor';

/* todo: need to find a way to pull these via webpack without loader errors

for all the little files like .gif and .woff*/

import '@progress/kendo-ui/css/web/kendo.common.core.min.css';

import '@progress/kendo-ui/css/web/kendo.default.min.css';

import './kendotest.less';

class KendoTest extends React.Component {

constructor(props) {

super(props);

this.state = {};

}

componentWillMount() {

console.log(`Mounting kendo editor`);

}

componentDidMount() {

$('#editor').kendoEditor();

}

render() {

return (

<section className="kendo-test">

<div>Editor:</div>

<textarea id="editor" rows="10" cols="50" defaultValue="test" />

</section>

);

}

Object.assign(KendoTest, {

propTypes: {},

defaultProps: {}

});

export default KendoTest;

Webpack:

module: {

rules: [

{

test: /\.js$/,

exclude: /node_modules/,

use: jsLoaders

/* TODO: implement the loader/options object with syntax-dynamic-import,

* ref: https://webpack.js.org/guides/code-splitting-async/ */

},

{

test: /\.less$/,

use: ['style-loader', 'css-loader', 'less-loader']

},

{

test: /\.css$/,

use: ['style-loader', 'css-loader']

},

{

test: /\.json$/,

loader: 'json-loader'

},

{

test: /\.(eot|svg|ttf|woff|woff2)$/,

loader: 'file?name=public/fonts/[name].[ext]'

},

{

test: /\.(jpe?g|png|gif)$/i,

loaders: [

'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',

'image-webpack-loader?bypassOnDebug&optimizationLevel=2&interlaced=false'

]

}

]

},

Editor

answered on 07 Sep 2017