Questions on Kendo UI for jQuery Forum

1 answer

252 views

I am new with KendoUI and was attempting to use kendoButton.

I installed:

$ npm install -S @progress/kendo-angular-buttons
gridexample@0.0.0 H:\ECLIPSE_WORKSPACE\GridExample\frontend\src\main\frontend
`-- @progress/kendo-angular-buttons@0.20.4

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modu
les\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"
os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

When attempting to use kendoButton in html I receive the following error:

Multiple annotations found at this line:
- Undefined attribute name
(kendoButton).
- Undefined attribute name

Button

answered on 13 Mar 2017

1 answer

126 views

[Solved] Grouping using SelectListItems

Is there any support for using SelectListItems as a datasource for ComboBoxes?

I would like to use it to do grouping, but I am unsure how to group where my datasource is a list of SelectListItems:

The following causes an error When I try to group on the Group's Name. Any other way of doing it?

<div class="demo-section k-content">

<h4>Customers</h4>

@(Html.Kendo().ComboBox()

.Name("customers")

.DataTextField("Text")

.DataValueField("Value")

.MinLength(3)

.HtmlAttributes(new { style = "width:100%;" })

.Height(400)

.DataSource(source => source

.Custom()

.Group(g => g.Add("Group.Name", typeof(string)))

.Transport(transport => transport

.Read(read =>

{

read.Action("Customers_Read", "ComboBox")

.Data("onAdditionalData");

}))

.ServerFiltering(true))

)

</div>

<script>

function onAdditionalData() {

return {

text: $("#customers").val()

};

}

</script>

ComboBox

answered on 13 Mar 2017

1 answer

482 views

[Solved] Kendo UI Professional NPM Multiple Logins

I'm trying to install Kendo via npm - http://docs.telerik.com/kendo-ui/intro/installation/npm, using the command npm login --registry=https://registry.npm.telerik.com/ --scope=@progress, and as you say here - http://www.telerik.com/forums/kendo-ui-beta-npm-login-fails - "The NPM client performs username validation and does not allow special characters in the username. You have to enter whatever nickname you wish (Shaun for example) for username. The login then will ask you from password and email which are expected to be your telerik.com credentials."

I have a commercial license here - ashleigh@neovation.com - and I need to know if we need individual logins for all the computers we need to install Kendo UI on or not.

General Discussions

answered on 13 Mar 2017

1 answer

163 views

[Angular] Template error when no mask is set

According to the API documentation, the lack of a mask should result in a normal input of type `text` (http://www.telerik.com/kendo-angular-ui/components/inputs/api/MaskedTextBoxComponent/). I've tried empty string, not setting mask, having a mask of both null and undefined but nothing seems to work.

A simple plunker fork of your demo shows it breaking:

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

The error I receive is:

EXCEPTION: Error in ./MaskedTextBoxComponent class MaskedTextBoxComponent - inline template:1:8 caused by: Cannot read property 'test' of undefined

Also, is there another means to get a standard text input?

MaskedTextBox

answered on 13 Mar 2017

1 answer

941 views

Sort column based on part of header clicked

I am replacing a webforms grid with the Kendo UI Grid and have come across an odd situation. We have a column that contains 2 pieces of information (Created By and Created Date). I initially set up the column with a template that includes both pieces

<td>

<div>{{::dataItem.created | date: 'short'}}</div>

<div>{{::dataItem.createdby.fullname}}</div>

</td>

and then set up the column in the columns array as

{

field: 'created',

title: 'Created Date<br/>User',

width: '110px',

}

This works fine and sorts on the created date. However, the current webforms grid targets the sort based on where in the header the user clicks. If they click on 'Created Date', it sorts by created. If they click on 'User', it sorts by createdby.

I have seen a few posts on rewriting the column header, but I am not sure what to put in the <a> tag to distinguish between the created and createdby sorts. When I try to change it with something like

var newHeader = '<div ng-click="vm.sortCreated(created);">Created Date</div>' +

'<div ng-click="vm.sortCreated(createdby);">User</div>';

var colHeader = $('#myGrid th[data-field=created]');

colHeader.html(newHeader);

I end up showing all of the html tags and the click events don't work.

Is this possible to do, or do I need to just create 2 separate columns? Thanks!

Grid

answered on 13 Mar 2017

1 answer

530 views

Loading content with AJAX for a Dialog

Is it possible with the Dialog widget to load the content with AJAX request like the Window widget?

Window

answered on 13 Mar 2017

5 answers

660 views

HeatMap data visualization on Maps using geojson layer

Is there a way to create a heat map kind of visualization over geojson map layers in kendo map

for eg something like this :

Map

answered on 10 Mar 2017

1 answer

1.3K+ views

Grid - dynamically change grouping

I have the following switch that retrieves the group by dropdown selected value:

switch (groupValue) {
case "1":
groupField = { field : "GroupByEvent"};
break;
case "2":
groupField = { field: "GroupByHorse" };
break;
case "3":
groupField = { field: "ProductName" };
alert(groupField.field);
break;
case "4":
groupField = {field: "GroupByPaymentMethod"};
brak;
default:
groupField = { field: null };
break;

}

how can I change the kendo grid group by according to the case? (default means no grouping)

$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 5,

group: {
groupField ???
}
},

Grid

answered on 10 Mar 2017

2 answers

260 views

Double $http.post server calls

I am working on a search page where search results will get displayed in a grid. I have a search button that will trigger the to execute http call to the server to retrieve the data. However, only when for the first time search button clicked request gets sent once, every subsequent click two requests are being sent. I am out of ideas what is causing this.
Here is the code that gets executed once each time search button is clicked:

$scope.gridData = new kendo.data.DataSource({ transport: { read: function (e) { $http.post('/Provider/ProviderSearchResult', angular.toJson(dataTransferObject)) .then(function success(response) { e.success(response.data); console.log("success: " + response.data); }, function error(response) { alert('something went wrong') console.log("error: " + response); }) }, }, pageSize: 10, sort: { field: "rating", dir: "desc" }, });

Any help would be appreciated. Thank you.

Grid