Questions on Kendo UI for jQuery Forum

1 answer

438 views

Bootstrap Switch with custom MVVM binding

I'm trying to include a Bootstrap-Switch control (or anything similar). I've got a regular ASP.NET MVC site, with a TypeScript MVVM view model.

I've included the bootstrap switch from here:

https://github.com/nostalgiaz/bootstrap-switch

If you know of an easier way to accomplish the same thing, I'm definitely open to that.

<input type="checkbox" data-bind="bootstrapSwitch: billingSettings.capsIncludeFees, events: {change: cpChanged}"/>

Here's my markup in the view:

And then I have the following custom binding:

kendo.data.binders.bootstrapSwitch = kendo.data.Binder.extend({

init: function (element, bindings, options) {

var x = this;

kendo.data.Binder.fn.init.call(this, element, bindings, options);

var that = this;

$(that.element).bootstrapSwitch();

$(that.element).on('switchChange.bootstrapSwitch',

function(event, state) {

that.change();

});

},

refresh: function() {

var that = this;

var value = that.bindings["bootstrapSwitch"].get();

$(that.element).bootstrapSwitch("state", value);

},

change: function () {

if (this.bindings.events && this.bindings.events.change && this.bindings.events.change.parents) {

var changeBinding = this.bindings.events.change;

for (var i = 0; i < changeBinding.parents.length; i++) {

var parentObservable = changeBinding.parents[i];

var method = changeBinding.path;

//parentObservable[method]();

}

var value = this.element.value === "on";

this.bindings["bootstrapSwitch"].set(value);

}

});

But the custom binding doesn't actually change the property on my viewModel itself -- or fire the change event. I hit the breakpoints in my custom binding and can see that the "parents" within the bindings have the stuff I need, but not the "this" object itself.

If you have a better way to do what I'm after, let me know. Otherwise, can you help me figure out what is wrong with my custom binding?

Thanks in advance -

Erik

ps I tried setting up a snippet in the dojo for this, but couldn't figure out how to properly include bootstrap and the bootstrap switch. I can create a sample project on github if it becomes required.

MVVM

answered on 13 Jan 2017

5 answers

342 views

[Solved] Spreadsheet Range ForEachCell

I am using this method to iterate a range, however, the value parameter does not have a value attribute - it only has the prototype value.

I am populating the data using a webservice, and use AngularJS in my application.

Can you think of any reason I dont have the value attribute (the cells have data in)

Thanks

Marc!

Spreadsheet

answered on 13 Jan 2017

5 answers

375 views

Install Kendo UI Professional package using JSPM

I'm trying to set up a Kendo UI application environment based on JSPM using the instructions in this article:

http://developer.telerik.com/featured/choose-es6-modules-today/

The only place I deviate from that article is that I want to install Kendo UI Pro, not the free version. There is documentation about install Kendo UI Pro using Bowser. See here and here:

http://docs.telerik.com/kendo-ui/install/bower

http://www.telerik.com/forums/install-kendo-ui-professional-bower-package

So I went ahead and ran these commands:

sudo npm install jspm-bower-endpoint

sudo jspm registry create bower jspm-bower-endpoint

sudo jspm install kendo-ui=bower:https://bower.telerik.com/bower-kendo-ui.git

The commands seemed to complete successfully. But then when I run my "serveit" Browsersync page, I get this error in the Chrome browser:

XMLHttpRequest cannot load bower:https://bower.telerik.com/bower-kendo-ui.git@2015.2.813.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

How do i get this to work? Thanks.

General Discussions

answered on 13 Jan 2017

1 answer

136 views

Pager icons for first/last not vertically aligned in themes with round buttons

Looking at the demo here:

http://demos.telerik.com/kendo-ui/grid/remote-data-binding

The pager icons for first/last/next/previous are not vertically aligned (See attached picture) for all themes that use round buttons (like "default", blue opal, flat, silver, etc.). However, if you change the style rule for:

.k-pager-wrap > .k-link

and change line-height from 2em to 1.7 or 1.8em, then it's fine.

Grid

answered on 13 Jan 2017

2 answers

97 views

Unable to create connection while using connection content template

Hi,

I am trying to create a diagram (Editable) with local datasource in which the user can

1.) Edit connection between shapes

2.) Create new connection between shapes

On connectiondefaults, i have specified content template as below

connectionDefaults: {
content: {
template: "#= label#"
}
}

But when i am trying to create a connection with mouse , it fails.Meanwhile trying to create a connection using button on top bar works fine

i.e

editable: {
tools: ["createShape", "createConnection", "delete"]
},

Diagram

answered on 13 Jan 2017

4 answers

383 views

[Solved] On Hover

Hi, is there any kind of on hover event, which can show the selected cell(s) value(s) in a small pop up?

Thanks!

Marc

Spreadsheet

answered on 13 Jan 2017

5 answers

335 views

[Solved] Spreadsheet Import

After importing data from an Excel file into the Kendo spreadsheet, all the alignment is off (by the width of the "row number column").

Spreadsheet

answered on 13 Jan 2017

2 answers

223 views

[Solved] Spreadsheet Unselected Cell Class

Hi, can you tell me the class used to apply the background colour and font colour to the normal (unselected) spreadsheet cells?

Thanks!

MArc

Spreadsheet

answered on 13 Jan 2017

6 answers

1.1K+ views

Grouping Breaks DropDownList Sorting

I'm trying to create a drop down list with grouping where I custom sort the data by group in a non-alphabetical way. I've created a sort function that I run on the data before I pass it to the Kendo DataSource and if I output the array to the console at that point the data is in the correct order. Once I create the Kendo DropDownList though it seems to break the sort and puts back to alphabetical order. I further tested things by turning grouping off on the drop down and in that case the drop down displays the data in the correct order as sorted by my sort function. Any ideas?

The data is an array of objects that look like:

{

Value: "value",

Group: "group"

}

The sort function is

newData.sort(function(a, b) {

var av, bv;

switch(a.Group.toLowerCase()) {

case "group 1":

av = 1;

break;

case "group 2":

av=2;

break;

default:

av=3;

break;

}

switch(b.Group.toLowerCase()) {

case "group 1":

bv = 1;

break;

case "group 2":

bv=2;

break;

default:

bv=3;

break;

}

return av-bv;

});

The function to build the drop down is

$.fn.sampleDD = function(options) {

var ds = new kendo.data.DataSource({

transport: {

read: function(opts) {

$.ajax({

type: "GET",

url: "<SharePoint REST Service URL>",

dataType: "json",

success: function(results) {

//converts the data a bit to account for SharePoint's weird data returns

//runs the sort function referenced above

opts.success(sortedResults); //sortedResults is created from the conversion and sorting

},

error: function(results) {

opts.error(results);

}

});

}

});

//listed separately because there's an if statement here that doesn't always group it

ds.group({

field: "Group"

})

return this.kendoDropDownList({

dataTextField: "Value",

dataValueField: "Value",

dataSource: ds,

optionLabel: "Make a selection",

}).data("kendoDropDownList");

});

};

which is then called by

$("#dropDown").sampleDD();

DropDownList

answered on 13 Jan 2017

5 answers

1.2K+ views

[Solved] Duplicating multiple rows in Grid

Hi, Kendo newbie here,

I've been evaluating whether the Grid control or the spreadsheet control is best for my application requirements. I'm leaning toward the Grid, but I'd like to get a second, third, nth opinion.

In general, I think the Spreadsheet is overkill, and I like the aesthetic of the Grid much more. However, here are some features I need that I don't see in the Telerik demos.

I'd like my user to be able to easily duplicate one or more rows:

- Either by checking off the rows with shift-clicks, or in some other way highlight and select multiple rows.

- duplicate the selected rows with a button and/or keystroke

Thoughts?

Thanks in advance.

Grid