Questions on Kendo UI for jQuery Forum

1 answer

682 views

Clearing a MVVM bound Kendo ComboBox value doesn't update the viewModel

I've setup a combobox with a viewmodel / kendo MVVM binding, however when using the clear method as mentioned in the API, the viewmodel is not updating.

Example source code below, to reproduce just click the clear button, the combobox will show "None", i.e. placeholder value, but the bindings don't update the viewModel's selectedId value.

Also, if the initial viewModel's selectedId is set as null, when picking a different value in the combobox, the selectedId will show '
[object Object]' instead of the set dataValueField value on the combobox. Is there a way to have the combobox correctly handle a transition from null > the selected item's id?

Source:

<body>

<div id="example" class="k-content">

<pre>

{

selectedId: <span data-bind="text: selectedId"></span>,

textbox: <span data-bind="text: textboxValue"></span>

}

</pre>

<input id="products" data-bind="value: selectedId"/>

<input id="textbox" data-bind="value: textboxValue"/>

<button id="clear" class="k-button">Clear</button>

</div>

<script>

$(document).ready(function() {

var viewModel = kendo.observable({

//selectedId: null,

selectedId: 2,

textboxValue: "lorem ipsum"

});

kendo.bind($("#example"), viewModel);

var data = [

{text: "12 Angry Men", value:"1"},

{text: "Il buono, il brutto, il cattivo.", value:"2"},

{text: "Inception", value:"3"},

{text: "One Flew Over the Cuckoo's Nest", value:"4"},

{text: "Pulp Fiction", value:"5"},

{text: "Schindler's List", value:"6"},

{text: "The Dark Knight", value:"7"},

{text: "The Godfather", value:"8"},

{text: "The Godfather: Part II", value:"9"},

{text: "The Shawshank Redemption", value:"10"},

{text: "The Shawshank Redemption 2", value:"11"}

];

$("#products").kendoComboBox({

dataTextField: "text",

dataValueField: "value",

placeholder: "None",

dataSource: data

})

.closest(".k-widget")

.attr("id", "products_wrapper");

$("#clear").click(function() {

$("#products").data("kendoComboBox").value(null);

});

</script>

</body>

ComboBox

answered on 12 Apr 2012

4 answers

418 views

Using standard INPUT with Kendo Mobile Style

Hi,

I am trying to use standard input controls such as type=text and the standard select drop downlist with kendo mobile and the default styles seem to place them in various non in-line places (i.e. text box over on right of screen down a bit and no outline etc), what is my best practice?

e.g. in a standard view div (I have also tried putting this into a listview li to see if it helps)

<div id="amountdiv">
                    Enter Amount :
                    <input type="text" id="amounttextbox" value="testing" /><a href="" data-role="button"
                        data-click="amounttextbox_click" data-icon="add">Save</a>
</div>

Do I have to sit down and work out how the mobile UI CSS is applied for each input and override them for each case?

Some of the output from firebug is -

.km-ios input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), .km-ios select:not([multiple]), .km-ios .k-dropdown-wrap {

background: none repeat scroll 0 0 transparent;

border: 0 none;

color: #385487;

font-size: 1.1rem;

min-width: 6em;

outline: 0 none;

padding: 0.4em;

}

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), .km-root select:not([multiple]), .km-root .k-dropdown {

margin-top: -0.95em;

right: 0;

}

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), .km-root select:not([multiple]), .km-root .k-dropdown {

-moz-appearance: none;

font-size: 1.2rem;

}

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), .km-root select:not([multiple]), .km-root .k-dropdown {

line-height: normal;

margin-top: -0.5em;

position: absolute;

right: 0.8em;

top: 50%;

z-index: 1;

}

.km-root input {

-moz-user-select: text;

}

.km-root * {

}

.km-ios, .km-ios .km-button {

font: bold 0.9rem HelveticaNeue,sans-serif;

}

Or do I have to wrap them in a certain Mobile UI container or should I be using the Web UI Suite in conjunction with mobile somehow?

Hopefully I am missing something simple as still very new here :)

Thanks
Matt

General Discussions

answered on 12 Apr 2012

0 answers

146 views

Combined date and time picker

I need to combine the date and time picker into one input-field so the user can type date and time like this
2012-03-12 15:56:02 in a single box. When expanding the picker the date and time pickers can be shown separately, but the validator needs to accept both date and time. Is this possible with the Kendo kontrols?

Also I'd like to override the validator to allow me to type inn offsets. E.g. if the user types +1d the date/time should be Now() + 1 day.
If the user types -4h the date/time should become Now() - 4 hours. Ideally when re-focusing on the field the date/time should change back to the entered offset allowing it to be edited, then on blur change back to the new calculated date/time combo.

DatePicker

asked on 12 Apr 2012

1 answer

381 views

Drop "up" list?

Hey all,

I need to open the list "up" all the time, not just when the widget feels there is not enough room below itself.

Any suggestions?

Ken

DropDownList

answered on 12 Apr 2012

3 answers

109 views

Unable to rerun DataSource Query if Previous Query times out

I am running into an issue where I am getting timeouts. While I need to work on this problem, my issue now is that when this happens I am not able to requery using the datasource and I need to reload the page to have it work again. I have to assume I am doing something wrong, has anyone else had this issue? Thanks for any help.

Wade

Data Source

answered on 12 Apr 2012

6 answers

405 views

Quotes? :)

How do I put quotes around the ${Desc} value I want to pass to the researchItem function? :)

var lastusedSingleTemplate = kendo.template(

"<li id='last-used-ndb-${NDB_No}' data-ndbno='${NDB_No}' onclick='researchItem(${Desc})' class='re-search-item'>${Desc}</li>"

);

...prob a simple javascript question, I'm just not sure how...

Templates

answered on 12 Apr 2012

1 answer

156 views

Example using groups option

Can someone post an example using the 'groups' property of datasource? For example, the sample data structure and datasource schema/configuration.

groups: Function

Used instead of data function if remote grouping operation is executed. Returns the deserialized data.

I've tried structuring my data a couple of ways to enable the remote grouping but my listview doesn't bind, it just stays blank with no errors. I don't want my grouping to be configurable. Not sure if this property requires serverGrouping to be enabled or not.

Thanks

Data Source

answered on 12 Apr 2012

0 answers

84 views

How can I add Accent Folding support?

Is this possible, but with Kendo UI?
http://jqueryui.com/demos/autocomplete/folding.html

AutoComplete

asked on 11 Apr 2012

0 answers

122 views

Use DataSource with SignalR

I was wondering if there was a way to create a Datasource using SignalR. I know that SignalR is a push design but is there a way to override the transport calls to make hub calls in SignalR?

Data Source

asked on 11 Apr 2012

1 answer

227 views

Editor Width set to 0

I have an issue where the style for the editor is getting set with a width of 0. This is not inherited from any other css style but being set by the kendo UI.

This is the rendered HTML after calling the editor method: