Questions on Kendo UI for jQuery Forum

1 answer

216 views

Format a tooltip

The following does not work. Is it possible to use a template and still format some values?
template: "${category} - ${value:N2}"

Charts

answered on 12 Apr 2012

3 answers

2.3K+ views

How to refresh a grid with parameters

How to refresh a grid with parameters, I write that, but it's not work,pls help me ,thanks.
grid_ .dataSource.read({
url: "charge-property/resources/unit_list_data.jsp",
dataType: "json",
data: {
q: "test"
}
});
grid_.refresh();

Grid

answered on 12 Apr 2012

1 answer

399 views

Disabling one or multiple options

Hi,

Is there any way to disable/enable particular item(s) in the dropdown list?

Regards,
Khushali

DropDownList

answered on 12 Apr 2012

1 answer

192 views

Using a custom icon for the validator

Hi, how can I replace icon in the invalid message with my own icon?

Validation

answered on 12 Apr 2012

1 answer

676 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

413 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

144 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

377 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

104 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

399 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