Telerik Forums
Kendo UI for jQuery Forum
1 answer
225 views
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");
      });
    });
  }
},
Ianko
Telerik team
 answered on 08 Sep 2017
3 answers
157 views

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

Ján
Top achievements
Rank 1
 answered on 08 Sep 2017
1 answer
357 views

Hi,

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

 

Thank you.

Stefan
Telerik team
 answered on 08 Sep 2017
1 answer
1.3K+ views

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

Stefan
Telerik team
 answered on 08 Sep 2017
1 answer
118 views

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));
                }
Dimitar
Telerik team
 answered on 08 Sep 2017
1 answer
373 views

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! 

 

 

Georgi
Telerik team
 answered on 08 Sep 2017
22 answers
1.6K+ views


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.BenefitRecordIdModel.OtherBenefitMappingsByUser"BenefitRecordId""BenefitDescriptionText").EditorTemplateName("BenefitDescriptionDropDown").Title("Benefit").Filterable(false);
		columns.ForeignKey(b => b.AppendixD1ElementIdModel.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([DataSourceRequestDataSourceRequest request, OtherBenefitMapping obm)
		{
			var result = new List<OtherBenefitMappingModel>();
			if (!ModelState.IsValid || obm == null)
			{
				return null;
			}
			obm.ProductId = (intSession["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([DataSourceRequestDataSourceRequest request)
		{
			DataSourceResult result = GetOtherBenefitMappingsByUser().ToDataSourceResult(request);
			return Json(result, JsonRequestBehavior.AllowGet);
		}
 
		private IEnumerable<OtherBenefitMappingModelGetOtherBenefitMappingsByUser()
		{
			int productId = (int)Session["ProductId"];
			var model = LoadOtherBenfitMappingPageModel(productId);
			return model.OtherBenefitMappingsByUser;
		}
 
		public JsonResult OtherBenefitMappingsByUserGridUpdater([DataSourceRequestDataSourceRequest 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([DataSourceRequestDataSourceRequest request, OtherBenefitMapping obm)
		{
			if (!ModelState.IsValid || obm == null)
			{
				return null;
			}
			OtherBenefitMapping otherBenefitMapping = _otherBenefitMappingDataProvider.Get(obm.OtherBenefitMappingId);
			_otherBenefitMappingDataProvider.Delete(otherBenefitMapping);
			return Json(nullJsonRequestBehavior.AllowGet);
		}



Kevin
Top achievements
Rank 1
 answered on 07 Sep 2017
1 answer
799 views

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'
            ]
        }
    ]
},

 

 

Wes
Top achievements
Rank 1
 answered on 07 Sep 2017
5 answers
952 views

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

Mike
Top achievements
Rank 1
 answered on 07 Sep 2017
1 answer
71 views

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.

Ivan Danchev
Telerik team
 answered on 07 Sep 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
ContextMenu
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?