Questions on Kendo UI for jQuery Forum

1 answer

164 views

Multirow Headers

Hi,

I am trying to implement multirow headers in the jquery spreadsheet widget.

Please refer to the attached excel screenshot of what i am trying to do.

All the examples i see render the data directly through sheets.rows.cells configuration.

But I am binding the data from a datasource and setting the custom column headers using setDataSource function.

Everything is rendering fine with the custom column headers in row 1 and the date from row 2 onwards.

But I want to set a header for I2 to L2 and M2 to P2 in row 1 and then my custom column headers in row 2 and the data from row 3.

Can you please point me to the correct way of implementing this.

Spreadsheet

answered on 05 Jun 2017

1 answer

434 views

autocomplete in grid popup editor template.

I'm having difficulty using the autoComplete in a popup editor template.when the datasource for the autocomplete has separate value and text fields.

This example works fine if we use the firstName for both the data-value-field and data-text-field.

However, if we change the datasource to include a "fullname" property:

var autoCompleteDS = new kendo.data.DataSource({

data: [

{firstName: "Alex", fullName:"Alex Smith"},

{firstName: "Alice", fullName:"Alice Smith"},

{firstName: "Antony", fullName:"Antony Smith"},

{firstName: "Anne", fullName:"Anne Smith"},

{firstName: "Anna", fullName:"Anna Smith"}

]

});

And configure the autocomplete to reference this property:

<input name="FirstName"

data-bind="value:FirstName"

data-value-field="firstName"

data-text-field="fullName"

data-source="autoCompleteDS"

data-role="autocomplete" />

When we add a record, the record's firstName field is set to the fullName. I obviously have the binding specified incorrectly but I can't figure out what I've done wrong.

Thanks,

Todd

Grid

answered on 05 Jun 2017

9 answers

2.5K+ views

[Solved] format numbers as 1.2M instead of full number

Is it possible to format numbers in the value axis to use "short format" numbers?
1,000,000 => 1.00M
1,234,567 => 1.23M
1,234,567,890 => 1.23B

Is there a format string that the kendo charts support thats similar to something like "{0:C}"? If theres no simple format string to achieve this, is there a way to pass the kendo chart's value axis numbers to a function to format the numbers like this?

Right now, I've resorted to just simply dropping the font size down on the chart value axis. If I don't drop the size down, the numbers will just overlap (I attached chart with the dropped font size):

valueAxis: {
            labels: {
                visible: true,
                format: '{0}',
                font: '7px Arial'
            }
        }

Charts

answered on 04 Jun 2017

1 answer

190 views

Scheduler Horizontal Scroll in IE11

Hi, I'm experimenting with the Timeline view of the scheduler control and having issues getting the horizontal scrollbar to display on IE11. The horizontal scroll displays fine in chrome so I was wondering if this is a known issue, or just something that I have not set.

I'm using angular js and have declared my scheduler like so:

<div kendo-scheduler="myScheduler" k-options="vm.SchedOptions" kendo-droptarget>

<div k-event-template>

<label>{{dataItem.title}}</label>

</div>

'vm.SchedOptions' is defined in the typescript, shown below:

private SetupScheduler() {

var observableDataSource = new kendo.data.SchedulerDataSource({

data: this.observableData,

schema: {

model: {

id: "taskId",

fields: {

taskId: { from: "id", type: "number" },

title: { from: "title", defaultValue: "No title", validation: { required: true } },

start: { type: "date", from: "start" },

end: { type: "date", from: "end" },

isAllDay: { type: "boolean", from: "isAllDay" }

}

});

var startTime = moment().toDate();

startTime.setHours(4);

startTime.setMinutes(0);

startTime.setSeconds(0);

var endTime = moment().toDate();

endTime.setHours(18);

endTime.setMinutes(0);

endTime.setSeconds(0);

var viewSettings: kendo.ui.SchedulerView = {

type: 'timeline',

eventHeight: 85,

startTime: startTime,

endTime: endTime,

showWorkHours: false

}

this.SchedOptions = {

date: this.SelectedStartDate,

startTime: this.SelectedStartDate,

majorTick: 60,

views: [

viewSettings

],

dataSource: observableDataSource,

group: {

resources: ["Users"],

orientation: "vertical"

},

resources: [

{

field: "users",

name: "Users",

dataSource: [],

multiple: true,

title: "Users"

}

]};

}

Are there any properties that I can set to force the horizontal scrollbar to show in IE11?

Thanks.

Stewart.

Scheduler

answered on 02 Jun 2017

2 answers

316 views

Notification Top Right

I'd like to be able to float a notification top right.

I have looked at http://dojo.telerik.com/inAma, but I would hope something super-common like this would look something like:

kendo.notification('my message', TOP-RIGHT);

thanks!

[Note: the default of bottom right is not useful, that is not prominent enough]

Notification

answered on 02 Jun 2017

5 answers

933 views

Angular2 MultiSelect not binding to the returned response

I am building an Angular2 application where on one of the pages we have MultiSelect component. Upon typing minimum of 3 characters it makes web service call and starts to show possible matches. When we select items in MultiSelect and save; I am saving ID's of the selected items in a table which is there just to save selected id's from the multiselect. To retrieve the data back in my web api call I am returning the object type which has all the information to display what I had save earlier in MultiSelect which includes Code as well as rest of supporting fields in CPTdata

My problem is when I browse to the page where I have MultiSelect control the selected value does not bind/display to the control. I looked at the web api response and validate that the selected values along with supporting fields are present there. Is there some other step I need to complete in order to display the saved values that I had selected earlier ?

Here is my html code:

<kendo-multiselect id="txtCptCode" #CptCodemultiselect

[filterable]="true"

(filterChange)="handleCptFilter($event)"

[data]="CPTdata"

[textField]="'Code'"

(valueChange)="CptValueChange($event)"

[valueField]="'CptId'"

[(ngModel)]="Model.CPTCodes">

</kendo-multiselect>

Here is handleCptFilter

handleCptFilter(value: any) {

if (value.length >= 3) {

this.cptRequest.value = value;

this._surgeryRequestFormService.getCPTByCodeOrDesc1(this.cptRequest).subscribe(

data => {

this.CPTdata = data;

},

error => {

console.log("Error", error);

}

)

}

else {

console.log("Do nothing");

}

};

Here is CptValueChange

public CptValueChange(value: any): void {

var _this = this;

var model = new surgeryReservationModel();

if ((this.CPTdata != null) && (value != null || undefined || "")) {

for (let entry of this.CPTdata) {

for (let selectedCPT of value) {

if (entry.Code == selectedCPT.Code) {

var CPTDescription;

if (_this.Model.CPTDescription != null)

{

CPTDescription = _this.Model.CPTDescription;

_this.Model.CPTDescription = (CPTDescription + "\n" + entry.ShortDescription);

}

else if (_this.Model.CPTDescription == null)

{

_this.Model.CPTDescription = entry.ShortDescription;

}

// _this.surgeryReservationModel.CPTCodeId = entry.CptId;

console.log("CPT Description is " + "" + _this.Model.CPTDescription);

break;

}

console.log("valueChange", value);

}

MultiSelect

answered on 02 Jun 2017

3 answers

468 views

HierarchicalDataSource, get parent fields in parameters from child url function

Hi,

Is it possible to access in child url function, the parent fields (I want the type to make a condition for the url) ?
Thank you in advance.
Here a part of the source code

let matieresSource: kendo.data.HierarchicalDataSourceOptions = {

transport: {

read: {

url: (params) => {

this.$log.info("params", params);

return this.apiEndpoint + "/v1/parcours/" + params.id + "/matieres/edito/tree";

},

type: "GET",

dataType: "json",

beforeSend: function (req) {

let authData = localStorage.getItem('authData');

let auth = "Bearer " + JSON.parse(authData).access_token;

req.setRequestHeader('Authorization', auth);

}

},

parameterMap: (data: kendo.data.DataSourceTransportParameterMapData, type: string) => {

// Remove query string in the URL

data = null;

return data;

}

},

schema: {

model: {

fields: {

id: "id",

name: "name",

type: "type",

baseElement: "baseElement",

isDirty: "isDirty",

hasDirty: "hasDirty",

nbChildren: "nbChildren"

},

hasChildren: (data: any) => {

return data.nbChildren > 0 ? true : false;

},

children: modulesSource

}

};

let parcoursSource: kendo.data.HierarchicalDataSourceOptions = {

transport: {

read: {

url: (params) => {

return this.apiEndpoint + "/v1/parcours/edito/tree";

},

type: "GET",

dataType: "json",

beforeSend: function (req) {

let authData = localStorage.getItem('authData');

let auth = "Bearer " + JSON.parse(authData).access_token;

req.setRequestHeader('Authorization', auth);

}

},

parameterMap: (data: kendo.data.DataSourceTransportParameterMapData, type: string) => {

return data;

}

},

schema: {

model: {

fields: {

id: "id",

idLms: "idLms",

name: "name",

type: "type",

baseElement: "baseElement",

isDirty: "isDirty",

nbChildren: "nbChildren"

},

hasChildren: (data: any) => {

return data.nbChildren > 0 ? true : false;

},

children: matieresSource

}

};

TreeView

answered on 02 Jun 2017

3 answers

293 views

[Solved] Kendo Angular Treeview filter

Hey,

I have been working on a kendo treeview with angularjs. I couldn't find any sources or documentation about filtering nodes in angular as below

http://demos.telerik.com/kendo-ui/treeview/filter-treeview-in-dialog

Thanks in advance.

TreeView

answered on 02 Jun 2017

3 answers

198 views

Map Polygon in Long/Lat

Hello,

I'm working with the map control and trying to consume geojson data which is formatted in long/lat arrays instead of lat/long arrays. Is there any way to tell the map it's in this format without having to reformat the data itself?

Thanks. -Jason

Map

answered on 02 Jun 2017

3 answers

167 views

bubble type layer with geojson

Hi Frds i have requirement like need to draw a bubble on kendo map from geojson response.

I am receiving data like [Longitude, Latitude] but when i try to plot this on map kendo consider this like [latitude, longitude] . Please do needful help for me.

Thanks in advance.

Map

answered on 02 Jun 2017