Hi,
when I use trigger select in combobox it is fired twice and the second time it is fired the item property comes to null.
Has anyone had a similar problem and can you help me?
Thank you.
BR,
MCosta
Hi we have a problem with a combobox
We need this combobox to have a lot of record (around 1000-2000) and to paginate results for performance. We also need it to have virtualization cause sometimes we have to use the value method to programmatically select an element that may not be in the current pagination.
We then added a button at the left side. It opens a dialog that permits to add an element to the database, reread the combobox datasource and select the new element.
// on confirm, call our add element rest api
// on call completed, datasource.read
// on read promise completed, combobox.value( id of the new element )
// combobox.trigger('change')
the value( id ) method starts rereading the datasource non stop, doing infinite ajax get calls to the server. We are having troubles understanding what may cause this.
in the console we read the warning i attached
this is most of the code, tell me if you need other parts: https://jsfiddle.net/mhqw922q/?utm_source=website&utm_medium=embed&utm_campaign=mhqw922q
I have a grid with a filter row in the top. When zooming in, borders disappear.
I could also repro it with your own demos of the combobox: http://demos.telerik.com/kendo-ui/combobox/index. When I zoom in to 90%, I see a missing top border for t-shirt size (see attached). When I zoom in further other borders disappear and appear.
I use Chrome Version 62.0.3202.94
<
tr
>
<
td
>
<
label
for
=
"State"
class
=
"required"
>State:</
label
>
</
td
>
<
td
>
<
input
id
=
"State"
class
=
"k-input k-textbox"
name
=
"State"
data-bind
=
"value:State"
placeholder
=
"State"
required
=
"required"
validationMessage
=
"State.."
style
=
"width:172px;"
/>
</
td
>
</
tr
>
schema: {
model: { State: "State",
fields: {State: { defaultValue: { Value: "", Text: "" }, validation: { required: true} }
}
}
var
crudServiceBaseUrl = window.applicationBaseUrl +
'api/WebApi'
;
$(
"#State"
).kendoComboBox({
placeholder:
"Select..."
,
dataTextField:
"Name"
,
dataValueField:
"Code"
,
dataSource: {
//severFiltering: true,
transport: {
read: {
url: crudServiceBaseUrl +
"/GetStates"
}
}
},
open:
function
(e) {
valid =
false
;
},
select:
function
(e) {
valid =
true
;
},
change:
function
(e) {
var
arrayOfStrings = $.map(
this
.dataSource.data(),
function
(val) {
return
val.dataTextField });
if
(arrayOfStrings.indexOf(
this
.value()) == -1) {
this
.value(
''
);
}
},
filter:
"startswith"
,
suggest:
true
,
index: 0
});
data: [{ Name:
"Alabama, AL"
, Code:
"AL"
},{ Name:
"Alaska, AK"
, Code:
"AK"
},]
we built an offline webapp placed on our customer pc
in that webpage there's a combobox listing an inventory of products
our users usually focus the filtering input field and then use their barcode reader to input the barcode of the product they're looking for; the barcode reader returns a Carriage Return at the end of the string, so it immediately selects the first good result
today the user called us for an issue: sometimes using the combobox this way selects another product; We remotely connected to their machine and saw that it was as she said;
what we got right now is:
1- it happens only in kendo combobox, because there's another place where we built a javascript search by text field and everything works there
2- there's apparently nothing wrong with the data call
3- it could depend on the machine; her pc is sensibly slower than our (we even saw the search string appear letter by letter in the text field)
4-the issue never happens if we replicate her installation on one of our machines
Thanks in advance for anysuggestion
Hello.
we are testing the kendo ComboBox as part of our widget system , in order to integrate with angular we included kendo.directive modules.
the Original issue i wanted to solve was how to disable the angular binding on key press up and down .
Our directives are ES6 Classes and we using the kendo combo box directive , the problem here is its seems that the combo-box create another input element on the page and don't copy other attributes we added like angular ng-keydown , when i used the post compile method to find the new kendo input element then adding the missing properties and then $recompile the input the browser was unresponsive.
Using the kendo auto-complete directive was good because it's don't replace the original object.
_getElementHtml() {
var mapper = this.mapper;
var item = mapper ? 'item' : 'item.key';
var mdId = this.$attrs.mdId + (this.listIndex ? "-" + this.listIndex : "");
var html = [];
html.push("<div class='idi-combo-box'>");
html.push("<span ng-show='$this.filterText'>{{$this.filterText}}</span>");
var kendoType = this.isServerAutoComplete() ? 'auto-complete' : 'combo-box';
html.push("<input kendo-" + kendoType + " k-on-open='onOpen(kendoEvent)' k-options='comboConfig' k-data-source='comboList' k-on-select='onSelection(kendoEvent)' ");
html.push(" type='text' ng-show='!$this.filterText' id='" + mdId + "'");
html.push(" ng-model='kendoInput' ");
html.push(" tooltip-placement='bottom' ");
html.push(" tooltip='{{$this.tooltip}}' ");
html.push(" ng-keydown='$this._onKeyDown($event)'");
html.push(" ng-keypress='$this._onKeyPress($event,$this)'");
html.push(" ui-mask='{{::$this.mask}}'");
html.push((this.$attrs.readOnly ? 'readonly="readonly" ' : ''));
html.push("/>");
html.push("</div>");
return html.join('');
}
thanks in advance,
elad.
Hello, i have a following kendo combobox with angular 1.5 integration. I want to open and close the combobox in my contoller.js. Can you please help me with that.
<select id="cmbCostCenter"
name="cmbCostCenter"
kendo-combo-box
class="form-control"
k-placeholder="'Cost Center'"
k-filter="'contains'"
k-min-length="4"
k-data-text-field="'costCenterDisplayName'"
k-data-value-field="'sapCostCenterID'"
k-data-source="costCenters"
k-on-change="costCenterOnChange(costCenterForm)"
k-ng-model="data.costcenters.selectedCostCenter"
ng-disabled="!data.appUser.pluginPermissions.isPluginAdmin"
ng-show="showCB"
style="width: 100%; background: white;"
required></select>
I basically want my combobox to have the option of searching between two sources, and able to switch between them with a click of a button contained in the footer template. I almost got it working but have some problems. Please see:
https://dojo.telerik.com/Esibiy
I can switch the data source and get the results to display, however the problems are:
1) Button text does not stay changed, if you comment out the .setDataSource() in switch search, then the button text is preserved and switches between Local and Global. But calling .setDataSource() seems to load the template again, though the span accompanying it does not change. I tried setting the footer template in switchSearch with:
widget.footerTemplate = $("#alternativeTemplate").html(); but that didn't work.
2) If I type Kiwi, which has no result in local search, and click Global search to switch data source, the filtering does not apply, even though I would like it to because I have entered something in the textbox already.
How can I make this work? Thanks.
I'm trying to create a Comboxbox with server side paging and a custom transport read, i can't get it to work so i made a small ex-sample.
If you run the example it isn't possible to scroll "below" the already loaded items, so there isn't another read to get the next 10 items
https://dojo.telerik.com/eHaJU/5
$(
"#orders"
).kendoComboBox({
dataTextField:
"text"
,
dataValueField:
"value"
,
dataSource: {
serverPaging:
true
,
schema: {
data:
"data"
,
total:
"total"
},
pageSize: 10,
transport: {
read:
function
(options) {
var
data = getData(options.data.page);
options.success(data);
}
},
update:
function
() {}
}
});
function
getData(page)
{
var
dataArr = [];
for
(
var
i = 0; i < 10; i++)
dataArr.push({ text:
"Item "
+ (i + 1) +
" on page "
+ page, value: 1});
return
{data: dataArr, total: 100};
}