3

Is it true that: (or am I missing something?)

  • Kendo UI MVVM doesn't support css binding;

If it is, how to define a custom css binding?

I found an implementation here, but I only have the minified kendo js files, can anyone give a link to download the uncompressed kendo js files?

update

temp solution: http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/2782980-add-an-mvvm-css-binding

have to modify the kendo.web.js source code.

Dean
  • 1,281
  • 3
  • 15
  • 23
  • You don't edit the kendo source, just add the binders to a separate file and load them after kendo is loaded, placing them in a script tag below kendo is probably adequate, to be sure use something like yepnope or require.js – ocodo Mar 09 '13 at 22:28

5 Answers5

11

Kendo UI supports the "style" binding which sets arbitrary CSS attributes. Documentation is available here: http://docs.kendoui.com/getting-started/framework/mvvm/bindings/style

On a side note you can create a custom binder without editing the source code. Here is how: http://docs.kendoui.com/getting-started/framework/mvvm/bindings/custom

Finally you can use the attr binding to set the class attribute: http://jsbin.com/ojayoq/1/edit

Atanas Korchev
  • 30,562
  • 8
  • 59
  • 93
  • I know how to define normal custom bindings,
    - how to define this kind of custom binding?     – Dean Feb 26 '13 at 19:28
  • Currently you can't. But you can use the one shown here: http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/2782980-add-an-mvvm-css-binding It is not the same as knockout's but would do the job. – Atanas Korchev Feb 26 '13 at 20:28
  • Two questions about that implementation: 1.It seems I have to modify the "kendo.web.js"/"kendo.all.js", otherwise there is exeptions; 2.can you tell me where to download the "kendo.web.js"/"kendo.all.js" files? thanks. – Dean Feb 27 '13 at 03:54
  • 1
    and for the attr binding solution, there is a problem: if the html element has some inline css classes defined, they will be overwritten: http://jsbin.com/ojayoq/4/edit. – Dean Feb 27 '13 at 04:12
  • 2
    You don't need the source code in order to create custom binders. This online demo proves that: http://demos.kendoui.com/web/mvvm/custom.html The source code is available in the src directory of the distribution (not included in the trial version of course): http://docs.kendoui.com/getting-started/downloading-kendo – Atanas Korchev Feb 27 '13 at 08:05
  • Thanks for your comments. I'm using this: http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/2782980-add-an-mvvm-css-binding, but the source code has to be modified, otherwise there will be exceptions. – Dean Feb 27 '13 at 12:13
  • 1
    For newcomers to this question, KendoUI now supports the binding `css: { active: shouldBeActive }` – Daniel Higueras Feb 08 '16 at 12:39
2

There's a couple of CSS binders at https://coderwall.com/p/gwa2jg

CSS toggle

<div data-bind="cssToggle: truthyProperty" 
     data-enabled-css="on-class" 
     data-disabled-css="off-class"></div>

There's also

CSS state

<div data-bind="cssState: switch"
     data-css-states="stop:red, go:green, slowdown:amber">
ocodo
  • 29,401
  • 18
  • 105
  • 117
  • looks good, but these bindings seems to have one shortage: cannot bind two or more css classes to one div, something like: `data-bind="css: { answered: answered, answer-accepted: answerAccepted }"` – Dean Mar 09 '13 at 13:59
  • @Dean, The cssState: binder does exactly that, with as many CSS classes as there are values applicable to the property. These aren't shipped, they are custom. – ocodo Mar 09 '13 at 21:03
  • What would be cool is one that matches ranges, ie. 0-25% - 26-50% etc. – ocodo Mar 09 '13 at 21:04
  • I think they would be feasible, the cssState binder does text parsing on the binder expression and turns it into JSON, but there's no reason a different parser couldn't work with say, "0..25:low, 26..50:below-mid, 51..75:above-mid, 76-100:high" – ocodo Mar 09 '13 at 21:10
  • @Dean the only difference with the cssState binder is that the value and CSS class name are reversed. ie. answerAccepted:answer-accepted – ocodo Mar 09 '13 at 21:13
2

I wrote an example binder for the Kendo UI blog that does what I think you are looking for: Making Kendo UI Binders for Complex Types

HTML usage example:

<div data-bind="class: { selected: isSelected, error: hasError }">

This would add the "selected" class if isSelected is truthy, and the "error" class if hasError is truthy. Likewise, it would remove those classes if the bound values were falsy.

CodingWithSpike
  • 42,906
  • 18
  • 101
  • 138
1

Kendo now (since Q2 2015) offers a CSS class binding along with the style binding.

Example:

<div data-bind="css: { someClass: isSomeClassEnabled }"></div>
Connor Pearson
  • 63,902
  • 28
  • 145
  • 142
0

Isn't this the CSS binding that you are looking for?

Petur Subev
  • 19,983
  • 3
  • 52
  • 68