kendo-labs / knockout-kendo Goto Github PK

The selected live option for tabs and tree items currently updates a bound observable to true when it is selected. However, any observable bound to a different tab/item will not be updated to false.

I have a structure like this:

    <ul data-bind="foreach: items" id="ulAttendees">
        <li>
            <input type="text" name="ContactID" data-bind="kendoComboBox: {value: ContactID, dataValueField: 'ID', dataTextField: 'Name', suggest: true, filter: 'startswith', autoBind: false, dataSource: kdsContactLookup}" style="width: 250px;" />                
            <select data-bind="kendoDropDownList: {dataSource: AttendeeTypes, dataTextField: 'label', dataValueField: 'value', value: Type}"></select>
            <select data-bind="kendoDropDownList: {dataSource: AttendanceTypes, dataTextField: 'label', dataValueField: 'value', value: AttendanceType}"></select>
            <button data-bind="attr: {id : ID}, click: btnAttendeeDelete_Click" style="margin-left: 20px;" class="k-button">X&nbsp;&nbsp;Remove</button>
        </li>
    </ul>

I've merged the branch that does the handling of the kendo.DataSource correctly and it appears to be working properly.

I know that the combo is configured properly with the dataValueField and dataTextField set appropriately in the binding. (I know this because it matches existing entries in the data and shows the drop down properly)

But what I'm seeing is that if I put a break point in the change event thati's hooked up the value of the control is the text field value, not the value field value.

And it's firing the change on every single combo that is in the binding, not just the one that actually changed.

What am I doing wrong if anything or is this a bug?

Hello!

I have the problem that a kendo datepicker changes the style from the exterior span to width:100% after calling ko.applyBindings(viewmodel) a second time, or call .kendoDatePicker() before applybindings.

Is this the desired behavior?

Grouping works perfectly when I do not use KOTemplates.

Here is a JSFiddle that illutrates the problem

http://jsfiddle.net/Z26U3/1/

Hey,

I'm using the kendoGrid binder to create my grid and i'm using the rowTemplate. The result is the grid without header. I want to know if it's possible to define the header of this grid?

Thanks alot

In your online docs, looking at the treeview in IE 10 works. However, looking at the treeview in Chrome 24.0.1312.57 the treeview does not work as expected. In "Basic Example" it appears, but when I click a node to open it, the node briefly flashes open and then quickly closes. The effect is the tree is not navigable.

Interestingly though, in the "Passing additionaloptions", if I click the "Enable 2" checkbox, the tree does open to the correct point. However clicking the toggle on the node itself does not open the tree node.

I did not explore other browsers an did not dig into the code with a debugger.

Hi Ryan,

kendui recently added a datetimepicker to their web widget collection. It would be nice to also have knockout bindings for it . I suppose there won't be much difference to the already existing datepicker widget bindings. BTW, is there some API in knockout-kendo to create custom bindings?

regards,

Franz

During the ko.applyBindings function call, if an KO observeableArray, created by breezejs, is used as the source, the following line causes a stack out of memory error in the getWidget function:

line 130:
widget = $elementwidgetConfig.name.data(widgetConfig.name);

specifically, this part of the statement is causing the overflow:
ko.toJS(options)

I'm not entirely certain what the getWidget function is doing, but it looks like it's just selected the DOM element that contains the target of the bind. If so, can an alternate way of doing that be used?

Currently, the options passed to a binding are run through ko.toJS to return a clean object with all observables unwrapped. If someone passed a kendo.data.dataSource into as an option to the binding, then it is processed by ko.toJS and is no longer an instance of kendo.data.dataSource. Need to ensure that we are no so aggressive in unwrapping options.

Work is underway in the support-dataSource-instances branch. Sample here: http://jsfiddle.net/rniemeyer/4av5s/

I've noticed that if you place a Kendo window inside an if or with binding, the window's dispose callback never fires using the default appendTo of 'body'.

If you change the appendTo to append the window to the container that uses the if/with binding, the callback fires.

Here's a fiddle showing the behavior. http://jsfiddle.net/three88bu/FnPgu/

Hello. First of all thanks for your library.

Can you help me please identify if this is knockout-kendo issue, or I'm doing something wrong.

For some reason when I have kendoEditor in foreach binding, only last instance of editor is able to show its content. all others are empty and even worse - they are not editable.

I'm not sure what is wrong with it.

Can you please check this code - http://jsfiddle.net/dPwsU/1/

Looking forward for your input.
Thanks!

I want to expose the enabled and selected properties of each kendoTab as observables in my view model. unfortunately, this doesn't work as expected:

http://jsfiddle.net/MNt5d/6/

with the kendoTab bindings active on each tab I neither can change the tab in the ui nor programmatically. I also noticed that your advanced tabstrip example cleverly circumvents the issue by applying the kendoTab bindings just to one tab and activating the other by a css class.

Any idea on how i get the tab bindings running? Do I have to do the cross-observable-synchronisation on my own (e.g. tab1.selected(true) --> set tab2/tab3.selected to false)

here's the combo box not using knockout-kendo,

@(Html.Kendo().DropDownListFor(x => x.TaxYear)
.Name("ddTaxYear")
.DataTextField("Year")
.DataValueField("InvestorVersionId")
.BindTo(Model.AvailableVersions)
.HtmlAttributes(new { @class = "input-small", maxLength = 125, @Id = "ddTaxYear" })
.Template("<span>#: data.Year # <i class='#: getIcon(data.InvestorVersionId) #'></i> </span>")
.Events(events => events.Change("onEffectiveYearChange")))

here's hte new one that using it.

<input data-bind="kendoComboBox: { dataTextField: 'Name', dataValueField: 'Id', data: taxYearList, value: taxYear }" />

but I cannot style it now. is it possible to add

.HtmlAttributes(new { @class = "input-small", maxLength = 125, @Id = "ddTaxYear" })
.Template("<span>#: data.Year # <i class='#: getIcon(data.InvestorVersionId) #'></i> </span>")

to kendoComboBox.

I have a Kendo Grid that can contain N number of subgrids, nested 5 grids deep. Each of these grids contains a header template that has a button with a click binding, and text inputs with text bindings that are bound to properties on the ViewModel, and row templates that essentially have the same thing.

These "inner" grid items are not initially bound to view model functions or properties unless ko.applyBindings is being called again on the body of the grid in the databound handler, which fires every time that a new subgrid opens, which then duplicates the bindings.

Looking for a way to bind recursively throughout subgrids with knockout templats, without duplicating the bindings.

The latest version does not appear to work with jquery-1.9.0 - it does work with jquery.1.8.2 (the jquery.min.js file that comes with kendo 2012.3.1114).
Thanks
Jeremy

I use a lot of kendo ui widgets in my forms, knockout-kendo is responsible for the model-binding. today i tried to integrate knockout-validation, but i struggled so far. Validation messages are displayed twice for each kendo ui widget with an error, I have to select/enter a value twice to remove the messages.

Any hints how i can integrate validation into knockout-kendo?

The issue happens when I try to set the next available value in combobox, here is what my scenario is.

I have a list of available items which I display in a combobox, user can select one item & assign at which point I add it to a list/table, user can remove an item from selected at which point it goes back into available list.

Now the issue occurs when the following is done

1. Select & assign couple of items (notice next available item is selected in combobox)
2. Remove an item from the selected list/table (item should now be available to select in combobox)
3. Now try to select the same item & Assign again & notice the next available value in combobox.

Here is a jsFiddle where issue can be reproduced (works only on chrome) http://jsfiddle.net/navnitmehta/fHXBx/7/

I am not sure if this is an issue with kendo to kendo-knockout binding.

Thanks in advance.

Does KO-Kendo work with Kendo UI Mobile. It seems some kind of conflict occurs when calling
window.kendoMobileApplication = new kendo.mobile.Application(document.body);

If you have an autocomplete, you select a value and clear the value by updating the value to '' or null, then you select the same value that you did previously, the observable is not updated.

See this fiddle: http://jsfiddle.net/rocknet/k2sef/

Start typing and select orange, click Reset. Type orange again and select it, notice that cloneName value is not updated.

Is there a plan to be able to bind functions to kendo object events? For example, I want to bind a function to the slide event on a slider. Thoughts?

I am using knockout-kendo to data-bind a form with approx. 30 Kendo-UI-widgets and 50 HTML-Only-widgets (text fields etc). The form model is hierarchical (form -> form tab -> fieldset -> formfield widget), and I am using additional components like knockout-validation.

Here is a contrived example:
http://jsfiddle.net/ZEFgJ/2/

Since ko.applyBindings sometimes takes more than 1 second and the overall performance is a bit modest, I'm investigating ways to speed things up. I'm especially worried about some "script timeout notifications" yielded in slower browsers.

Any suggestions how I could improve the binding performance?
Suggestions that came to my mind so far:

• use a flat model instead of a hierachical one? Maintain hierarchical relations via string ids
• bind each widget separately to its dom snippet
• knockout-validation seems to choke on kendo widgets that contain html form widgets (like treeview, that uses checkboxes for selection)

any other suggestions that can bring me on the right track?

thanks,

Franz

Hi Ryan,

seems that we 've found the culprit for our various "unresponsive script" errors in conjunction with kendo-knockout: we had a few dropdown/combobox widgets on our page that contained 300 items each. When we investigated the problem with KendoUI support, we found that some thousand <li> tags with accompaigning event handlers were created upfront for these widgets - too much for IE8.

As we don't want to restrict the amount of entries in the dropdown/combobox widgets, the only solution would be a "lazy" datasource binding that makes the widget only render the currenly visible html (used in conjunction with the autobind:false option). Are there any plans for such a binding?

regards,

Franz

I think this might be more of a knockout problem, but here it goes anyways. I'm using ko.mapping.fromJS and each time there is an update knockout adds another new

https://gist.github.com/3152426

Is it possible to show window on center using knockout-kendo library?

What is correct way to pass options to the grid? I would like to adjust dataSource.schema.model.fields and cannot find how to do that.

Do you have any plans for supporting Kendo Charts?

The issue we are facing is that, once a value is selected by the user and when they delete all the text in the ComboBox to remove the selection, the ComboBox text is blank but the underlying value is still selected.

Here is a jsFIddle which has a sample:

http://jsfiddle.net/navnitmehta/vaLyw/

In the "With Contains", Combo select a value from dropdown, then delete the text from that combo & you would notice that "Selected:" label still has the previously selected value.

When I try the same on this sample http://rniemeyer.github.com/knockout-kendo/web/ComboBox.html, it works as expected for "Basic Example", but not for "Passing additional options" sample.

Anyone working on making the grid edittable?

The kendoSplitter binding crashes in opera. Easy to reproduce by opening http://rniemeyer.github.com/knockout-kendo/web/Splitter.html in Opera and watching its console.

I'd like the ability to specify a type that is used when binding values to Kendo controls. For example, if I have a DropDownList with "true" and "false" as options, I'd like the the underlying view model to store these as booleans. I can do this with a custom binding such as the one discussed in the answer here: http://stackoverflow.com/questions/10510683/knockoutjs-version-2-1-0-bind-boolean-value-to-select-box

Obviously since I'm using the Knockout - Kendo bindings, this is more difficult. Any thoughts on how this might best be integrated into the Kendo bindings?

Thanks

Slider, RangeSlider, and Upload seem to be disabled by default now unless the "enabled" option is passed in.

An error ("Array length must be a finite positive integer") is thrown after rendering a bar chart, if both the knockout-kendo JS library and the knockout.mapping JS library are included on a page.

The bar chart still looks correct and seems to behave normally. Any subsequent chart does not render.

An example has been worked up in https://github.com/MarkAtkinson/KnockoutKendoIssue See the readme for repro steps

Thanks!

I'm currently using the grid binding and have defined a simple KO template for my rows.

When calling hideColumn(index) on the grid, the column is hidden as expected. However, when I add a new row afterwards, the body (KO template) shows all the columns, but the heading is still hidden.

I don't have time to put this is in a fiddel ATM, but it isn't a very difficult issue to reproduce.

In some cases, the library is not binding to events that should update observables passed to child bindings.

Here are a couple of examples,

• When a panel is expanded/collapsed, it should update the expanded observable passed to a kendoPanelItem binding.
• When a splitter is resized it should update the size observable passed to a kendoSplitterPane.

Work is underway in the handle-events-for-child-bindings branch.

• Panel sample: http://jsfiddle.net/rniemeyer/KWAYm/
• Splitter sample: http://jsfiddle.net/rniemeyer/EHvZx/

I have a slider's max value bound to an observable. When I change the observable, the slider doesn't update. Check out the fiddle below. When you click the button, the slider's max should change from 1000 to 100.

http://jsfiddle.net/johnwest80/rP8Dt/2/

When using the kendoAutoComplete-Binding with name/id data objects, the widget value is set to the .name property of the currently selected item, not to its .id:

http://jsfiddle.net/fbuchinger/5kTtS/5/

If you have a kendo grid where the widget is bound to an observable, and getWidget is called again (due to a parent observable changing for instance), I have gotten a couple of different errors after ko.toJS calls mapJsObjectGraph over and over. e.g. Uncaught Error: Pass a function that returns the value of the ko.computed, or Uncaught TypeError: Accessing selectionDirection on an input element that cannot have a selection.

See this jsfiddle for an example: http://jsfiddle.net/rocknet/vZArR/3/
STR:
Open fiddle
Click Edit
Click Cancel
See error in Chrome console. Page is then broken.

Note jsfiddle also returns unsafe javascript attempt to access frame errors, but it doesn't impact the issue, and the issue is the same in a local, one page example.

For now I have just worked around the issue by not binding an observable to the widget. I'm not sure if my usage is a bit off, or if this is a fixable issue.

Chris

hi,
the tabindex attr it's applayed to the input and not to the first span so don't work

thanks

Hi,

Besides the numeric textbox does not provide a way to change the max and min value by the API, but sometimes this is necessary; and with Knockout and your binding too this is possible with the following trick.

I have made the following changes in it, give a look.

createBinding({
        name: "kendoNumericTextBox",
        defaultOption: VALUE,
        events: {
            change: VALUE
        },
        watch: {
            enabled: ENABLE,
            value: VALUE,

                        // THE NEW MAX SUPPORT
            max: function (value) {
                this.options.max = value;

                var currentValue = this.value();

                if (currentValue > value)
                    this.value(currentValue); // forcing update
            },

                        // THE NEW MIN SUPPORT
            min: function (value) {
                this.options.min = value;

                var currentValue = this.value();

                if (currentValue < value)
                    this.value(currentValue); // forcing update
            }
        }
    });

Other problem happens when using the ko mapping plugin (mainly with the dataGrid). If each item of the items observableArray in the data source is also an observable the function is written into each cell grid. So it becomes necessary to clean this mappings before.

createBinding({
        name: "kendoGrid",
        defaultOption: DATA,
        watch: {
            data: function (value) {
                if (ko.mapping)
                    value = ko.mapping.toJS(value);
                this.dataSource.data(value);
            }
        }
    });

When "isOpen" mapped to view model date picker works wrong.
Demo:
http://jsfiddle.net/fQ29V/
Steps:
Expand calendar and select any date
Expected: selected date in text box
Actual: "false" in text box

Because of this issue: http://www.kendoui.com/forums/ui/grid/datasource-with-special-characters-json.aspx (not mine but i have the same issue)

I need to be able to bind all all options in the grid to an observable array. I have done this in the simple grid from knockout, and would love to use kendo and do the same. Something like this.....

    ko.bindingHandlers.kendoGrid.options = {
        columns: self.ColumnsOA,
        scrollable: true,
        sortable: true,
        pageable: true
    };

This would let the KO Kendo Grid be truly dynamic and compensate for there BAD BAD Templeting.

I was thinking of something like this but i have yet to break all the code apart... Would this even work????

name: "kendoGrid",
defaultOption: DATA,
watch: {
    data: function(value) {
        ko.kendo.setDataSource(this, value);
    },
    columns: function(value) {
        ko.kendo.setDataSource(this, value);
    }
}

});

You should be able to configure all options on a child binding instead of just the "live" options.

For example, instead of:

     <div data-bind="kendoSplitter: { panes: [ { collapsible: true } ] }">
         <div id="one" data-bind="kendoSplitterPane: { size: size }">one</div>
         <div>two</div>
     </div>

You should be able to do:

     <div data-bind="kendoSplitter: {  }">
         <div id="one" data-bind="kendoSplitterPane: { collapsible: true, size: size }">one</div>
         <div>two</div>
     </div>

I'm having some issues with the knockout-kendo bindings for the datepicker/datetimepicker widget, unfortunately I'm unable to reproduce them in a simple jsfiddle (I'm using a fairly complex hierarchical viewmodel for representing a form).

The first issue was that the datepicker simply dumps out the standard date.toString() format instead of the one I provide in the kendo datepicker widget settings, i.e. Fri Oct 19 2012 15:02:01 GMT+0200 (Mitteleuropäische Sommerzeit) instead of 10/19/2012. I could circumvent this by setting the bound observable to a string in the desired format instead of a date object. This is not my desired way to fix this, because i need the date object for other calculations.

The second issue: I can select a date in the datepicker popup, which closes then, but the selected value is neither set on the bound observable nor in the textfield of the widget. The other way works: dateObservable("1/1/2000'') sets textfield and popup of the picker to the correct date.

I know this sounds impossible, but could you give me some hints on how i could debug this issues?

Hey man,

I was thinking that you could extend your code to allow not only kendo ui widgets but any jquery widget. At least, you could let the factory more "generic" and create specialized kendo bindings, wijmo bindings, etc...

With a little change in the factory... I have done this before when playing with your code but I will do it again and send you the code, maybe you like it.

I'm trying to replace the entire observableArray for a graph and it doesn't update. Is my only choice to push/pop?

http://jsfiddle.net/andytkor/ansbd/

Thanks!

The bindings should support using normal Knockout templates inside of the Kendo widgets. In this case, we need the actual observables to be made available to the bindings, rather than the unwrapped values that are currently being passed in.

Work on this is being done in the data-bound-templates branch. Early sample: http://jsfiddle.net/rniemeyer/xBL2B/

Ryan,

I have a feeling this is more a Knockout/KendoUI item than the custom bindings that you have created. However, from viewing your responses on the Knockout forum and Stackoverflow, I've decided to post here in hopes I can get access to some of your Knockout expertise.

The following fiddle shows the issue that I am facing: http://jsfiddle.net/sgreer/3gDxd/

I am building a form for editing a person record and part of that record is the ability to edit multiple address types. I have it working with the exception of the Kendo DropDownList. It works properly for setting the state code on each address, however when I change the address that is currently being edited, the DropDownList for the state is not updated to reflect the value stored in the address object.

To see what I mean, run the fiddle and set the state for the Business address to California. Then change the address type to PO Box. First note that the DropDownList value remains California when the underlying state value is undefined. Now set the state to Nevada and navigate back to the Business address - the state remain Nevada.

Thanks for any guidance that you can provide.

Sean