// Editor definitionelement.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 valuehandlers_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 hackhandlers_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"); }); }); }},
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
Hi,
There is an event seriesClick; how if I want to ignore single click and only respond to double click ?]
Thank you.

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

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)); }
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!

@(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); }) ) )
@using System.Collections@using Kendo.Mvc.UI @(Html.Kendo().DropDownList() .Name("BenefitRecordId") .DataTextField("BenefitDescriptionText") .DataValueField("BenefitRecordId") .SelectedIndex(-1) .OptionLabel("Select...") .BindTo((IEnumerable) ViewData["OtherBenefitDescriptionData"]) )
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); }
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.cssModule 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 errorsfor 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, }, { 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' ] } ]},
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
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.
