Questions on Kendo UI for jQuery Forum

1 answer

97 views

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

344 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.5K+ 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

737 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

5 answers

886 views

Dates not sorting correctly in Grid

Date is not sorting correctly in my grid. It seems that older dates than 2000 are not sorting correctly. In the database, the data type is datetime2.

Here is the code for the grid:

$("#reportsGridIn").kendoGrid({
selectable: "multiple",
sortable: {
allowUnsort: false,
initialDirection: "asc"
},
schema: {
model: {
fields: {
transDate: { type: "date" }
}
}
},
columns: [
{ field: "id", hidden: true },
{ field: "corporationName", title: "Corporation", width: 20 },
{ field: "transDate", title: "Trans Date", width: 18, template: "#= kendo.toString(new Date(parseInt(transDate.substr(6))),'MM/dd/yyyy')#", type: "date" },
{ field: "headline", title: "Headline", width: 38 },
{ field: "marketScope", title: "Market Scope", width: 25 }
]
});

Thanks,

Mike

Grid

answered on 07 Sep 2017

1 answer

54 views

Bug - inline editor drop-down tools make the editable element loose focus

Hello,

Please see this example provided by Kiril in my earlier post: http://dojo.telerik.com/IcIPoZ/4

Try selecting some text in the editable div, and using the Format tool to change the style, or to change the text or background colour.

Could you kindly suggest a work-around for this issue.

Many thanks.

Editor

answered on 07 Sep 2017

1 answer

259 views

View Server Side Validation Messages

Hello friends.
I am developing an application where client side uses Kendo UI plus JSDO components and the server side uses Progress Application Server for OpenEdge (PASOE). The application is entirely based on OERA best practices.
I'm using a DataGrid with server side pagination for browsing through a CRUD records and editing is done on a KendoUI popup form. So far so good.
Now I need your help to capture and display validation messages generated on the server side (EntityBusiness).
The response of the PUT, POST, and DELETE HTTP requests in which validation errors occur contains the validation messages, I have already confirmed this when monitoring requests with the browser development components.
How do I display these messages in the Kendo UI form? Better still, if possible, display each message next to the field with the invalid value.

Data Source

answered on 07 Sep 2017

5 answers

669 views

kendo treeview with lazy loading

Hi, Telerik Team

I am utilizing kendo treeview to show organizational structure of sales forces, and this tree is made of uncountable layers (hundreds or thousands, and even ten thousand nodes) Therefore, I hope that this treeview can only display the first layers, and by expanding tree nodes, child nodes will emerge from data transferred via web services. Is that possible for me to capitalize on functions of kendo treeview for the sake of achieving the feature, lazy loading mentioned.

Another question is that if overwhelming data, such as ten thousand nodes, is loaded in kendo treeview, will there be a performance issue encountered?

Could you please offer me some suggestions?

Thanks & Best Regards

James Shen

TreeView

answered on 07 Sep 2017

3 answers

288 views

Bug : Datasource.Transport.Read.Data

I notice an error while using Kendo MVC FluentAPI to generate a Datasource with additionnal data in the request URL.

Using this :

ds.Custom().Transport(t => t.Read(r => r.Action("GetUsers", "Application").Data(x => new { IncludeCurrentUser = false })

generate a javascript property of :

"data":{ IncludeCurrentUser = false }

and result in a javascript error of "Uncaught SyntaxError: Invalid shorthand property initializer"

The javascript should not be like C# writting but like "data":{ IncludeCurrentUser: false }

Data Source

answered on 07 Sep 2017

1 answer

315 views

Can't change default error template

I have a kendo grid with in cell editing. I extended the validator to add a new validation rule and message. This is working correctly.

However, I can't seem to change the default error template for the validation message. Here is the code used to extend the validator:

(function ($, kendo) {

$.extend(true, kendo.ui.validator, {

rules: {

uniqueTagName: function (input) {

...

},

messages: {

uniqueTagName: resources.Message_TagAlreadyExists

},

errorTemplate: "<span>#=message# TEST</span>"

});

})(jQuery, kendo);

I can see from the console that when I look at kendo.ui.validator, the errorTemplate is changed to "<span>#=message# TEST</span>". However, when the (Name) element is validated, I get the default error template.

Through $("#Name").kendoValidator().data("kendoValidator"), i get this template:

<span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"> </span> #=message#</span>

However,both validators have the extended rule and validation message.

I also tried to create a <span data-for="Name" class="k-invalid-msg"> as I have found somewhere in the documentation, but this seems to have no effect.

Validation

answered on 07 Sep 2017