Menu
  • HOME
  • TAGS

KendoUI Validate Numeric Textbox

Tag: kendo-ui

The KendoUI validation does not work with kendo-numeric-textbox. I get the following error. "An invalid form control with name='amount' is not focusable. "

See example below. Try submit and see error in browser console.

http://plnkr.co/edit/pXpXexPq3u9xAzzpKR8Y?p=preview

I´m trying to get required popup "Please fill out this field" with the Kendo numeric textbox.

Can anyone help?

Best How To :

Seems to be some strange issue with hidden fields using the kendoNumericTextBox.

I was able to get it to work using the kendo validator: [See here]

There's also an interesting article [Here]

Updated Code:

$(document).ready(function () {


   $("#amount").kendoNumericTextBox();


    var validator = $("#testForm").kendoValidator().data("kendoValidator"), status = $(".status");
    $("form").submit(function(event) {
                    event.preventDefault();

                    if (validator.validate()) {
                        status.text("Valid")
                            .removeClass("invalid")
                            .addClass("valid");
                    } else {
                        status.text("Not Valid")
                            .removeClass("valid")
                            .addClass("invalid");
                    }
                });

});

kendo window fill parent

jquery,kendo-ui,kendo-window

Try it using the jQuery .on() and delegate to the .k-i-fillparent selector: dialog.wrapper.on("click", ".k-i-fillparent", function(e){ dialog.setOptions({ width: $(".content").width(), height: $(".content").height() - 30, position: { top: $(".content").offset().top, left: $(".content").offset().left } }); e.preventDefault(); }); Working DEMO...

array from javascript to controller java in kendo ui

kendo-ui,kendo-grid

Try using kendo.stringify: parameterMap: function(data, type) { if (type != "read") { data = kendo.stringify(data.models); } return data; } Not sure if this will fix your issue but I'm also using batch: true for my dataSource and this seems to be working for my view models. You probably also want...

How to get all the values of particular column of kendo grid?

javascript,kendo-ui,kendo-grid,kendo-ui-grid

Since you're using kendo which you must include jQuery. To make life easier why don't try to use jQuery, as per my suggestion at the moment i don't know any other way but to get & loop through the grid datasource get the date and push it into an array...

How to save multiple files to database rather than disk

asp.net-mvc,file-upload,kendo-ui,jquery-file-upload,kendo-upload

The following method declaration - private IEnumerable<string> GetFileInfo(IEnumerable<HttpPostedFileBase> files) which receives the uploaded files have IEnumerable<HttpPostedFileBase> as parameter. It is collection of all the uploaded files. Each file exposes a property InputStream. For more information visit this msdn page So now that you have the file content in form of...

MouseOver with Cursor Pointer on Y Axis

javascript,kendo-ui,kendo-chart

You can apply the same color trick to the axis labels: valueAxis: { labels: { format: "N0", color: "rgba(60,60,60, 0.9995)" }, $(document).on("mouseover", '#chart text[fill="rgba(60,60,60, 0.9995)"]', function(){ $('#chart text[fill="rgba(60,60,60, 0.9995)"]').css("cursor", "pointer"); }); Updated DEMO In this example I use the same color for title and labels, you could easily use a...

How do I check specific data when reading in data from a remote source with kendo.data.datasource

kendo-ui,telerik,kendo-mobile,kendo-datasource

You should be able to get access to your json data within the datasource. I'm using the requestEnd event. You didn't explain exactly what you're trying to do with the data once you know an article is featured so I'm just showing a basic way to get the data and...

KendoGrid inline editing with dynamic drop down lists

kendo-ui

By this statement : declare a different srcEditor for each row You either mean to have entirely different datasource for each row, having same datasource but do some filter if certain condition meet, or differ in styling (for this one simply add class/style) Solution for number 1 modify your categoryDropDownEditor...

Kendo Template source binding array creates double entries

javascript,jquery,kendo-ui,kendo-mvvm,kendo-template

So, I'm not sure why this was happening (some research will need to be involved), but the cause of the problem was with my binding. Apparently the Kendo template does not like binding to object arrays that belong to other objects, as I have with classInfo.ClassDates. I changed the bindings...

Loading Animation Image Implementation

javascript,kendo-ui,kendo-chart

You need to delay the reading of the data for 4 seconds: var theDataSource = new kendo.data.DataSource({ transport: { read: function (op) { setTimeout(function () { op.success(data); }, 4000); } }, group: { field: "series" }, sort: { field: "category", dir: "asc" }, requestStart: function () { kendo.ui.progress($("#loading"), true); },...

How to programically collapse or expand Kendo Grid Group by values in row

jquery,asp.net-mvc,kendo-ui,kendo-grid

The first level of the dataSource is the groups. Then each group has a property called items which is actually the rows in the group. So try this: var grid = $("#grid").data("kendoGrid"); var dataView = grid.dataSource.view(); for (var i = 0; i < dataView.length; i++) { for ( var j...

Kendo UI ASP.NET MVC ListView fails when trying to add or edit items

c#,asp.net-mvc,listview,razor,kendo-ui

Found it. The Telerik support asked the right questions. The problem is quite simple: There is no editor template specified! There are (at least?) two ways to resolve this issue: 1. Specify the name of the editor template (e.g. .Editable(e => e.Editable(true).TemplateName("TemplateGeneratorRecord"))) and create the TemplateGeneratorRecord.cshtml in the EditorTemplates folder....

Legend Duplication

javascript,kendo-ui,kendo-chart

By logging the data that you're charting, you can see that the code is called for 6 items. If you add category to the label, you can see that legends are being created for items from Men and Women: You should debug the data structure that is actually generating labels....

kendo combobox datasource filtering before bind is not working

kendo-ui,kendo-datasource,kendo-combobox

I have fixed by using oData filtering.Here's my code. jsfiddle.net/MG89G/1497.

Kendo Scatter Chart - Reverse Dates in xAxis?

kendo-ui,kendo-dataviz,kendo-chart

You can set the reverse property on the xAxis to true: xAxis: { reverse: true }, API Doc ...

How do I attach function to kendo grid after it initialized?

javascript,jquery,kendo-ui,kendo-grid,kendo-datasource

I found the answer, this may help others. Here how you can attach function in document ready var grid = $("#grid").data("kendoGrid"); grid.dataSource.transport.options.read.data = getFilters; And then call read() to reload the grid. Every time you call read() the attached function "getFilters" will get executed. grid.dataSource.read(); ...

Kendo Date to Date Time

html,css,angularjs,kendo-ui,datepicker

You need to specify kendo date time picker parse-format and match it with kendo date picker format by default its follow your culture setting, e.g M/d/yyyy for en-US <input kendo-date-time-picker ng-model="dateString" k-ng-model="dateObject" k-parse-formats="['dd/MM/yyyy']" ng-show="!allDay"/> <input kendo-date-picker id="start-date" name="start-date" k-format="dd/MM/yyyy" ng-model="dateString" ng-show="allDay"> See my dojo...

How to mark Kendo Grid's cell as edited?

kendo-ui,kendo-grid,kendo-asp.net-mvc

Well, the best solution I came up with is to put the cell in edit mode when mouse enters that cell! So instead of the entire JS code in the question, I simply use this. tablesGrid.bind('dataBound', function () { tablesGrid.tbody.find('td').each(function () { $(this).mouseenter(function () { tablesGrid.editCell(this); }); }); }); Please...

kendo window doesn't fire ng-controller in remote content file

angularjs,kendo-ui,kendo-window

The usual way to dynamically generate kendo window cannot be recognized by angular, instead you should use kendo-window attribute http://plnkr.co/edit/?p=preview&s=Kh4syZajQnoc9Xn1...

How override Print in Kendo UI Editor?

asp.net-mvc,kendo-ui,telerik,editor

You can create a custom button in the tool bar (http://demos.telerik.com/kendo-ui/editor/custom-tools) with something like .CustomButton(cb => cb.Name("Custom Primt").ToolTip("Do stuff then Print").Exec(@<text> function(e) { var editor = $(this).data("kendoEditor"); editor.exec("inserthtml", { value: "Printing this document..." }); editor.exec("print"); } Which will add "Printing this document..." to the editor body, then call the Print...

Setting options of a Kendo Grid that is inside an Editor Template

kendo-ui,kendo-grid,kendo-asp.net-mvc

To overcome this case, I will trigger Grid-B's read manually inside Grid-A's edit event. Follow this setup: Grid-B Config: .AutoBind(false) .DataSource(ds => ds.Ajax() .Read("action", "controller") .Update(url => url.Action("update", "controller").Data(paramData))) Modify Grid-A edit function: function EditHandler(e) { var gridB = $("#gridB").getKendoGrid(), model = e.model; gridB.dataSource.read({Id: model.Id}); } // get Id for...

how to reuse kendo-ui window jquery

javascript,jquery,kendo-ui,kendo-ui-window

The issue is happening because you are destroying the window during deactivation. Instead of that you should use the close function function onDeactivate(e) { this.close(); console.log("event :: deactivate"); } Please refer the sample fiddle here...

How can i avoid conflicts of two css frameworks?

css,kendo-ui,zurb-foundation

To be honest, I don't think there is a way that you can do this. A browser will load all stylesheets in the order they are placed on your page. When there are selectors that is used in more stylesheets, the last occurrence takes precedence (meaning: it's the one that...

Getting Kendo Grid from its DataSource

kendo-ui,kendo-grid

There is no API to get Grid object from data source, but there is many approach beside that. You can create generic grid's edit event and storing in global scope variable which grid's ID was triggered that event. I prefer to do this rather than compare mutable data source. var...

Is it possible to reorder Kendo Tabstrip tabs with drag and drop?

kendo-ui,kendo-tabstrip

There is a solved question similar to this on kendo forum, it already has the answer to solve this problem by extending the kendo tabstrip widget and add kendo Reorderable into it. var numTabs = 1, tabs = null; var reorderableTabStrip = kendo.ui.TabStrip.extend({ options: { name: 'ReorderableTabStrip' }, init: function...

How to conditionally provide a style for a grid cell?

angularjs,kendo-ui,kendo-grid

You could do this by using template option on field with ng-style directive. columns: [ { field: "TradeAmount", title: "Trade Amount", width: "120px", filterable: { cell: { showOperators: false } }, template: '<span ng-style="{background: #:ApprovalStatus# == \'Approved\'? \'red\': \'green\'}"></span>' }] Small Demo here Update For getting changes to be done...

How do I Change window size on kendo grid editor template?

kendo-ui,kendo-grid

Kendo grid popup window is using kendo window, so you can set the height and width like this editable: { mode: "popup", window: { title: "My Custom Title", animation: false, width: "600px", height: "300px", } } Here is dojo for you, but since i did not define a custom template...

How can I access non-route url parameters in an angular app?

javascript,angularjs,kendo-ui,angularjs-routing

Since I was essentially getting a value out of the url, I used the old school approach until I can use routes across the entire app properly: ctrl.theGuid = ''; if (document.location.pathname.indexOf('/Something/Something/Details') != -1) { //TODO update this to the routing engine when possible //0:first '/', 1:Something, 2:Something, 3:Details, 4:...

Format Date type using a function in Kendo Grid

kendo-ui,kendo-grid,kendo-asp.net-mvc

There're several reasons why your code don't work columns.Bound(x => x.ModifyDate).ClientTemplate(@Utility.GetPersianDate((DateTime)"#: ModifyDate #")); it's not working because server code runs first, so "#: ModifyDate #" can't be converted to DateTime. It should be InvalidOperationException or smth columns.Bound(x => x.ModifyDate).Template(@<text>@Utility.GetPersianDate((DateTime)@item.ModifyDate)</text>); the second line don't work because or strange Template call. It...

How to create a hyperlink using the id of an item in a client template on Kendo Grid

asp.net-mvc,kendo-ui

If you look at the answer to this telerik question: You need to use \\#Id\\# within your ChildTemplate method to indicate you are accessing the current child element, not the parent. Change your syntax to the following: .ClientTemplate(String.Format("<a href=\"{0}\" data-title=\"View Stuff\" class=\"stuff\"><i class=\"glyphicon glyph-btn directory\">Stuff</i></a>", Url.Action("Details", "Stuff", new { Id...

Click on y (value Axis) title label (text)

javascript,kendo-ui,kendo-chart

You could assign the axis title a specific property that you can then use in a jQuery selector. For example, set the color of the title to an rgba with an opacity of 0.9995 so that it is unlikely any other element will have exactly the same color: valueAxis: {...

How would I link to an external site from a cell in a kendo grid?

c#,asp.net-mvc-4,kendo-ui,kendo-grid

here is example based on the kendo dojo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css"> <link rel="stylesheet"...

Select tabs using right click in Kendo Tabstrip

kendo-ui

This script will work, $('#tabstrip [role="tab"]').bind("contextmenu",function(e){ $('#tabstrip').getKendoTabStrip().select($(this)); return false; }); ...

How do I reference a specific cell in kendo grid with javascript?

javascript,kendo-ui,kendo-grid,kendo-asp.net-mvc

In kendoGrid each data is represented by array of objects in which one array element is one row. Kendo adds uid property to all dataObjects in array. So one dataObject looks like: var dataItem = { MetricName: "some-val", DailyActual: "some-val", DailyTarget: "some-val", MTDActual: "some-val", MTDTarget: "some-val", YTDActual: "some-val", YTDTarget: "some-val",...

Loading Image Animation only once

javascript,kendo-ui,kendo-chart

Set time to a variable which defaults to your delay time (4000). Then check your sessionStorage variable to see if we have already run. If so set time to 0. Save the sessionStorage variable on requestEnd and also check it before showing the loading animation: var time = 4000; var...

Emptying a grid in kendo UI after receiving erroneous data

javascript,ajax,kendo-ui

Can you give this a try: $("#yourGridId").empty(); // Empty the grid. $("#yourGridId").data('kendoGrid').refresh(); // Refrsh the grid. Hope this will solve your problem....

Button Not showing in Kendo Grid

asp.net,asp.net-mvc,kendo-ui,kendo-grid

For AJAX bound Kendo grids you need to use the ClientTemplate helper, and JS templates (#= …#) to incorporate values on the client side.

How to change color of row depending on a row's value in a Kendo UI Grid

kendo-ui,kendo-grid

You can apply condition in Row Template, Try Something like below $("#grid").kendoGrid({ dataSource: ds, rowTemplate: '<tr class="#:Highlight ==\"Yes\"? \"red\" : \"white\"#" data-uid="#= uid #"><td>#: MAC #</td><td>#:Time #</td><td>#:Message#</td></tr>' }); DataSource var ds = new kendo.data.DataSource({ data: [{ Highlight : "Yes", MAC :"...", Time :"...", Message:"...." }, { Highlight : "No", MAC...

Kendo TreeList - adding and updating rows

kendo-ui,treelist

Probably you should consider to use dataSource.pushCreate to add new element to the dataSource and dataSource.pushUpdate to edit existing element inside the dataSource I copy some example of basic dropdownlist, and add 3 button first button will add a new parent node second button will edit the first parent node...

Implementing KendoUI grid search with dataSource filtering

javascript,html,kendo-ui,kendo-grid

To enable the bound value to update the filter change it to: viewModel.get('searchValue') Full code: $("#grid").data("kendoGrid").dataSource.filter({ logic: 'or', filters: [ { field: 'lastName', operator: 'startswith' }, { logic: 'or', filters: [ { field: 'lastName', operator: 'startswith', value: viewModel.get('searchValue') }, { field: 'address', operator: 'startswith', value: viewModel.get('searchValue') } ] } ]...

Mouse over event and cursor pointer on the line series

javascript,kendo-ui,kendo-chart

A bit hacky, but this should work on stroke as well as the path: circle:hover, path[stroke="#ff6800"]:hover { cursor:pointer; } See: http://jsfiddle.net/3yhbyy2g/78/ But would be better to set a class here (since you are tying the mouseover to a certain color), but not sure how this would work in kendo. And...

KendoUI Popover $compile issue

angularjs,angularjs-directive,kendo-ui,angularjs-compile,kendo-tooltip

This isn't problem with kendoui-popover. The problem is unneeded scope.$apply kendo does in widgets. They will remove that in newest version: Forum discussion They committed fix today: gitbhub commit...

How to hide columns in Kendo Grid when editing in a popup

asp.net-mvc,kendo-ui,kendo-grid,kendo-asp.net-mvc

You can use the edit event of the grid to hide some element from the popup window: $("#grid").kendoGrid({ edit: function(e) { e.container.find(".k-edit-label:first").hide(); e.container.find(".k-edit-field:first").hide(); } }); ...

How can I make Kendo UI Panelbar “skip” an element when reading an HTML list?

html,knockout.js,kendo-ui,kendo-panelbar

Use the component binding on the outer <li> rather than creating a custom tag. A minimal example: <ul> <li data-bind="component:'sublist'"></li> </ul> Script: ko.components.register('sublist', { viewModel: function(params) { this.text = 'something'; this.subtext = ['one','two']; }, template: '<!-- ko text:text --><!-- /ko --><ul data-bind="foreach:subtext"><li data-bind="text:$data"></li></ul>' }); ko.applyBindings(); Demo: http://jsfiddle.net/Lohfscdg/...

Cursor clickable icon appear when mouse over event happened

javascript,kendo-ui,kendo-chart

Add this below your click handler: $(document).on("mouseover", '#chart text[fill="rgba(60,60,60, 0.9995)"]', function(){ $('#chart text[fill="rgba(60,60,60, 0.9995)"]').css("cursor", "pointer"); }); ...

Filter kendo dropdownlist to remove options

javascript,jquery,asp.net-mvc,kendo-ui,kendo-dropdown

For this implementation i have an idea, where first you need to have 3 dropdownlist that have one same datasource/observable but three different value to store each dropdownlist value and point to one same change event, example in mvvm <h4 class="title">DropDownList</h4> <input class="customdropdownlist" data-role="dropdownlist" data-text-field="text" data-value-field="value" data-bind="source:dataSource, value:dd1, events:{change:onChange}" style="width:...

kendo - datasource - parameterMap does not bind parameters

javascript,kendo-ui,kendo-grid,url-parameters,odatacontroller

kendo does support oData v4 now, so just make sure you got the right version and it will handle the url automatically. then you may want to get rid of the 'parameterMap' part and change the 'read' to read: { url:'/odata/people', dataType: 'json' } ...

How to Pass Kendo DropDownList DataTextField value to Controller

asp.net-mvc,kendo-ui,kendo-asp.net-mvc,html.dropdownlistfor,kendo-dropdown

Change your controller to this: public JsonResult GetProjects() { var projects = repository.Projects; return Json(projects.Select(m => new SelectListItem { ProjectId = m.Description, ProjectName = m.Description }).ToList(), JsonRequestBehavior.AllowGet); } Since the DropDownList uses DataTextField for the user and uses DataValueField for the server communications, so you have to use DataTextField value...

how to find class of a span used in of a kendo grid

javascript,jquery,kendo-ui,kendo-grid

hasClass is method and not selector. You can use below: $("#grid").find("span.highlight") to find all the span having class highlight. OR $("#grid span.highlight") ...

Set default attribute for all Kendo UI Grids

javascript,kendo-ui,kendo-grid

This is an all or nothing change, but will do just that. Set the default options for the scrollable to false kendo.ui.Grid.fn.options.scrollable = false; You will want to set that before any kendo grids are created....

KendoUI Grid - Complex JSON with inconsistent keys

javascript,json,kendo-ui,kendo-grid

You can use column templates: columns: [ { field: "id", title: "User Id" }, { field: "name", title: "User Name", }, { field: "type", title: "User Type", template: function(dataItem) { return dataItem.type ? kendo.htmlEncode(dataItem.type) : ""; } }, { field: "address", title: "Street 1", template: function(dataItem) { return dataItem.address.street1 ?...