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.
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
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">
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.
Kendo now (since Q2 2015) offers a CSS class binding along with the style binding.
Example:
<div data-bind="css: { someClass: isSomeClassEnabled }"></div>
Isn't this the CSS binding that you are looking for?
Related
I have a grid within a grid, where parent grid is constructed in MVVM, child grid initialized on its data-detail-init http://jsbin.com/kuvejuw
<div data-role="grid"
data-columns="[
{ 'field': 'FirstName'},
{ 'field': 'LastName'}
]"
data-bind="source: dataSource"
data-detail-init="viewModel.detailInit"
>
</div>
If have a custom property (e.g. Text here) on the viewModel, and in the popup editor of the child grid, I would like to bind to this property. So e.g. in more complex scenarios I can populate a dropdownlist with a range of values by having an array (or observable array) on the viewModel.
var viewModel = kendo.observable({
dataSource: new kendo.data.DataSource ... // everything works here,
detailInit: detailInit,
Text: "This text should be displayed in editor in detail's grid",
});
kendo.bind(document.body, viewModel);
The problem is that this property (or overall viewModel) is not detectable in the template of the detail grid's editor:
function detailInit(e){
...
editable: {
mode: "popup",
template: kendo.template($("#child-editor-template").html())
}
...
}
Template is built like this:
<script type="text/x-kendo-template" id="child-editor-template">
<span data-bind="text: Text"></span>
</script>
but I also tried data-bind="text:viewModel.Text". I tried various solutions, setting the Text property on viewModel in detailGrid's edit event, or setting it on viewModel bind, but it does not work with this jsBin (3.2016 version).
Now funny thing is that I actually able able to access this property with a 2015v3 Kendo UI in my local project, but I cannot replicate it in this jsBin.
In my local project though I still cannot access the events in ViewModel e.g. I could do text: Text, but could not do events: {select: onSelect}.
Accessing the events would be ultimately the reason for asking this question once this thing is sorted, I'm looking for some hints to understand what's going on, if I'm expecting too much from mvvm.
EDIT:
I'm looking forward to this type of functionality that would be enabled in the popup editor of the child grid http://jsbin.com/canomux
Try like this,
I just make changes in your template,
<script type="text/x-kendo-template" id="child-editor-template">
<input name="ShipCountry"/>
</script>
http://jsbin.com/levenacari/edit?html,js,output
It seems the way of retrieving the data from API was somewhat unexpected, so with change of:
options.success(e.data.Orders.results.toJSON());
to
options.success(e.data.Orders.results);
the binding of text works.
With the events binding it is not working - it seems it's not something to do with detailGrid but in general with grid, which is described
here
Is there a built in TinyMCE command to change the class name of its outer-most div? I have a div which is populated with either a PHP version of TinyMCE or the jQuery version, but the TinyMCE editor's outermost div classes are different.
I would preferably like to avoid having to use jQuery.
jQuery
class="mce-tinymce mce-container mce-panel"
PHP
class="wp-core-ui wp-editor-wrap tmce-active"
I don't mind if I can only change one, although it would be nice to know how to change both. I have tried
tinymce.inti({
body_class:"classname";
});
From docs
// Add a class to an element by id in the page
tinymce.DOM.addClass('someid', 'someclass');
// Add a class to an element by id inside the editor
tinyMCE.activeEditor.dom.addClass('someid', 'someclass');
From doc: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#body_class/
Here you can also add a body_class option like;
tinyMCE.init({
...
body_class : "some_class_name"
});
Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.
I am wondering if it is possible to use Knockout.js's ko.applyBindings() multiple times to bind different ViewModels to one part of a page. For example, let's say I had this:
<div id="foo">...</div>
...
ko.applyBindings(new PageViewModel());
ko.applyBindings(new PartialViewModel(), $('#foo')[0]);
I am now applying two ViewModel bindings to <div id="foo>. Is this legal?
You do not want to call ko.applyBindings multiple times on the same elements. Best case, the elements will be doing more work than necessary when updating, worse case you will have multiple event handlers firing for the same element.
There are several options for handling this type of thing that are detailed here: Example of knockoutjs pattern for multi-view applications
If you really need an "island" in the middle of your content that you want to call apply bindings on later, then you can use the technique described here: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html
This is a common road block that comes when implementing JqueryMobile-SPA.
The method : ko.applyBindings(viewmode,root dom element) accepts two arguments. The second argument comes helpful when you have multiple VM's in your page.
for example :
ko.applyBindings(model1, document.getElementById("view1"));
ko.applyBindings(model2, document.getElementById("view2"));
where view1 and view2 are the root dom element for that model. For a JqueryMobile-SPA this will be the page ids for corresponding model.
The best way to do this would be use the "with" binding construct in the div that you want the partial view model to be bound. You can find it in this fiddle
<div data-bind="with: model">
<p data-bind="text: name"></p>
</div>
<div data-bind="with: anothermodel">
<p data-bind="text: name"></p>
</div>
var model = {
name: ko.observable('somename'),
}
var anothermodel = {
name: ko.observable('someanothername'),
}
ko.applyBindings(model);
Also check out the "with" binding documentation on the Knockout site, to look at an AJAX callback - partial binding scenario.
My english is very bad.... =)
I use Sammy to load partial views, and Knockout to bind the Model, I try use ko.cleanNode but clean all my bindings, all DOM nodes has changed when has a bind, a property __ko__ is aggregated, then i removed that property with this code, and works !!, '#main' is my node.
var dom = dom || $("#main")[0];
for (var i in dom) {
if (i.substr(0, 6) == "__ko__") {
delete (dom[i]);
break;
}
}
after use Ggle translator:
I use Sammy for the load of partial views, and Knockout for the bind the Model, I try to use ko.cleanNode but clean all my bindings, all DOM nodes has changed when they has a bind, a property ko is aggregated, then i removed that property with this code, and works !!, '#main' is my node.
I'm trying to set style names on different faces of ToggleButton (i.e. upFace, downFace, ...). It looks like setting styleName on a face doesn't work. For example the following won't work:
<g:ToggleButton>
<g:upFace styleName='{style.myToggleButton-up}' />
</g:ToggleButton>
But I noticed when setting the style name on ToggleButton itself...
<g:ToggleButton styleName='{style.myToggleButton}' />
... the generated HTML will look something like this:
<div class="GPAKHSCBGG GPAKHSCBGG-up" role="button" aria-pressed="false">...</div>
However, even if I have {style.myToggleButton-up} defined, it is not populated to GPAKHSCBGG-up. So I'm wondering how can I do this without having to mock the global .gwt-ToggleButton-up stylesheet. Please help.
http://examples.roughian.com/index.htm#Widgets~ToggleButton
All GWT components have predefined CSS Class definitions, what you tried didn't override the definitions.
Solution:
Add #external myToggleButton, myToggleButton-up; to ui:binder file.