Hello,
I am trying to setup an autocomplete with angular and kendo, using remote datasource.
I have an input field :
<
input
type
=
"text"
kendo-auto-complete
k-data-source
=
"customersDataSource"
k-data-text-field
=
"'name'"
k-data-value-field
=
"'id'"
/>
And a controller with a scope:
$scope.customers=[
'adolfo'
,
'paolo'
];
$scope.customersDataSource={
serverFiltering:
true
,
transport: {
read: {
url:
"/Customers"
,
type:
'jsonp'
}
}
};
If i set $scope.customers in the k-data-source , then autocomplete works, but using $scope.customersDataSource autocomplete does not work.
In firebug it seems there is no call for data.
Any suggestions?
We were orginally using the "all" build of kendo UI for our application, but recently started using the the custom compilation Telerik provides with a gulpfile.
We're using a mixing and matching components, using primary the non-mobile stuff, however, we do use the switch, but ever since we changed over to the custom build, we can not longer use the switch component, even though it's included in the build.
It's probably some initialization code that we're not including, but we're not sure.
When we try:
$(element).kendoMobileSwitch( ... )
we get:
Uncaught TypeError: $(...).appendTo(...).kendoMobileSwitch is not a function
Here's the gulp command we run to do the custom build:
gulp custom -c autocomplete,binder,button,calendar,color,colorpicker,columnmenu,columnsorter,combobox,core,data,data.xml,dateinput,datepicker,datetimepicker,dialog,dom,draganddrop,drawing,dropdownlist,editable,excel,filebrowser,filtercell,filtermenu,fx,grid,groupable,imagebrowser,list,listbox,listview,maskedtextbox,mediaplayer,menu,mobile,mobile.application,mobile.button,mobile.collapsible,mobile.drawer,mobile.loader,mobile.scroller,mobile.scrollview,mobile.shim,mobile.view,mobile.switch,multiselect,notification,numerictextbox,ooxml,pager,panelbar,popup,progressbar,reorderable,resizable,responsivepanel,router,selectable,slider,sortable,spreadsheet,tabstrip,timepicker,timezones,toolbar,tooltip,touch,upload,userevents,validator,view,virtuallist,web,window
Hello
On dragging items inside a KendoUI treeview I need to know (while dragging) what the parent is of the dropTarget. Depending on that I will set the statusClass (whether its allowed to drop the dragged item or not).
The problem I run into is the fact, that e.dropTarget can return 2 different elements on statusClass insert-middle, insert-up and insert-down.
The first return element looks ok to me:
<span class=
"k-in"
>Entry 2</span>
The second one returns a DIV with no relation to where the dragged element will be dropped:
<div class=
"k-i-drag-and-drop"
style=
"visibility: visible; top: 81px; left: 16px;"
>
::before
</div>
With this DIV element I have no relation to where the dragged element will be dropped and therefore I can't set the statusClass properly.
The attached file shows a simple example of a treeview with 3 items. Drag the third element between the first and second item. The console output will show you the above described output elements while smoothly drag the third element between the first and second item. Same problem on dragging to insert-up and insert-down areas.
Is there a way to ensure I always get a tree item element back?
Regards
rowContent +=
"<td><input "
+ checked +
" class='"
+ field.FieldTypeInput +
"' type='"
+ field.FieldTypeInput +
"' id='FldList_"
+ rowLength +
"__UpdatedValue' value='"
+ currentValue +
"' name='FldList["
+ rowLength +
"].UpdatedValue' ></td>"
;
$(
'.datepicker'
).kendoDatePicker();
$(
'.datepicker'
).kendoDatePicker({
open:
function
() { setTimeout(
function
() {
$(
'.ui-datepicker'
).css(
'z-index'
, 8888);
}, 1);
}
});
$(
"input[type=date]"
).kendoDatePicker({
open:
function
(e)
{
window.setTimeout(
function
(){ $(
".k-calendar-container"
).parent(
".k-animation-container"
).css(
"zIndex"
,
"11000"
); }, 1);
}
});
I am having trouble getting the selected value in a dropdownlist to stay put.
My application, which uses AngularJS 1.6, loads a large-ish dataset, and I have two Kendo DropDownLists that each apply a different filter to the data. The first one uses a static set of data, loaded into an ObservableArray; the second relies on me loading a set of unique values from the dataset into another ObservableArray, along with a default "description" value. As the first filter changes, the second filter is supposed to reload those unique values, since the first filter might have filtered out all of the records mathcing one or more of those values. There is nothing asynchronous going on here, or at least not that I'm aware of.
What I am seeing is that, when I change the selection in the first dropdown, whatever is selected in the second dropdown is blanked out--that is, it shows a blank selection. The values that are displayed when I open the dropdown are correct, the dataset is filtered as if the selected value is still displayed, and the act of opening the dropdown and then clicking off of it is sufficient to cause it to re-display the selected value.
I have tried 6 different ways from Sunday to ensure that the value of the second dropdown remains displayed, but I am out of ideas. Here is the HTML:
<
form
name
=
"form"
class
=
"form-inline"
>
<
select
name
=
"accountStatus"
style
=
"width: 180px;"
class
=
"form-control"
ng-model
=
"status"
ng-change
=
"onAccountStatusChange(status)"
kendo-drop-down-list
k-options
=
"accountStatusOptions"
></
select
>
<
select
name
=
"filterByRegion"
style
=
"width: 180px;"
class
=
"form-control"
ng-model
=
"selectedRegion"
ng-change
=
"onRegionFilterChange(selectedRegion)"
kendo-drop-down-list
k-options
=
"regionFilterOptions"
></
select
>
</
form
>
And here are each of the JS methods invoked in the process of changing the selections and updating the second ObservableArray:
$scope.onRegionFilterChange =
function
(selectedRegion) {
$scope.selectedRegion = selectedRegion;
};
$scope.onAccountStatusChange =
function
(status) {
$scope.status = status;
updateRegionFilterList();
};
var
updateRegionFilterList =
function
() {
$scope.regions.empty();
angular.forEach($scope.accounts,
function
(account) {
if
(account.reviewStatus === $scope.status) {
if
($scope.regions.indexOf(account.regionID)) = -1)
$scope.regions.push(account.regionID);
}
}
});
$scope.regions.sort();
$scope.regions.unshift(
"Filter By Region:"
);
if
($scope.regions.indexOf($scope.selectedRegion)) = -1) {
$scope.selectedRegion =
"Filter By Region"
;
}
};
Among the things I've tried are: instead of using the empty() command on the ObservableArray, I've tried testing each value in it to see if it should still be displayed, and splicing out those that shouldn't be; storing the current selected value in a temp variable and reloading it at the end of the method. I've also checked the values in the debugger and even added a toastr message to display the selected value, all of which showed that it should have been showing up just fine.
Any ideas?
I have two DatePicker and I want to use them as Filter to show every thing between two date .
How can I achieve this ??!
Hi, I am using kendo-ui and angular together
i have kind of complicated table so the rows looks different and i am writing them like
<div kendo-grid.....
<table k-row-template>
<tr data-uid="#:uid#" rold="row">
<td>...............
</tr>
</table>
some of the rows should have the possibility of expanding
but when i am adding to the above code <div k-detail-template>
all the view is ruined and there is nothing related to expanding.
means:
<div kendo-grid.....
<table k-row-template>
<tr data-uid="#:uid#" rold="row">
<td>...............
</tr>
<div k-detail-template>
blablabla
</div>
</table>
so am i wrong?
if so how to do it correctly when i need k-row-template and k-detail-template. and the expanding only in specific rows with specific property in dataitem.
what should i do?
i am very very confused!!!
thanks for your urgent help
Good day.
We have a commenting system in our site and we're using a kendo template to display the comments. As the title stated, one comment that being returned from the database has those quotes and its preventing the whole template to be loaded, once we changed the quotes into the regular ones ( " and ' ), it loaded properly.
I thought it's weird that it will not be handled. Any ideas or suggestions?
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "/path/to/our/remote/function",
type: "get",
dataType: "json",
cache: false,
data: {
ID: id
}
}
},
schema : {
type: "json",
data: "Comments",
model: {
fields: {
Text: { field: "Text", type: "string" } //need this for comments consisting of only a number
}
},
parse: function (data) {
//additional processing
var comments = data.Comments;
$.map(comments, function (item, index) {
if (typeof(item.Created) !== "undefined" && item.Created != null) {
var current_datetime = moment();
var created = moment(new Date(item.Created));
item.Created = created.from(current_datetime);
}
});
return data;
}
}
});