I am building an Angular2 application where on one of the pages we have MultiSelect component. Upon typing minimum of 3 characters it makes web service call and starts to show possible matches. When we select items in MultiSelect and save; I am saving ID's of the selected items in a table which is there just to save selected id's from the multiselect. To retrieve the data back in my web api call I am returning the object type which has all the information to display what I had save earlier in MultiSelect which includes Code as well as rest of supporting fields in CPTdata
My problem is when I browse to the page where I have MultiSelect control the selected value does not bind/display to the control. I looked at the web api response and validate that the selected values along with supporting fields are present there. Is there some other step I need to complete in order to display the saved values that I had selected earlier ?
Here is my html code:
<
kendo-multiselect
id
=
"txtCptCode"
#CptCodemultiselect
[filterable]="true"
(filterChange)="handleCptFilter($event)"
[data]="CPTdata"
[textField]="'Code'"
(valueChange)="CptValueChange($event)"
[valueField]="'CptId'"
[(ngModel)]="Model.CPTCodes">
</
kendo-multiselect
>
Here is handleCptFilter
handleCptFilter
(value: any) {
if
(value
.length
>=
3
) {
this
.cptRequest
.value
= value;
this
._surgeryRequestFormService
.getCPTByCodeOrDesc1
(
this
.cptRequest
)
.subscribe
(
data => {
this
.CPTdata
= data;
},
error => {
console
.log
(
"Error"
, error);
}
)
}
else
{
console
.log
(
"Do nothing"
);
}
};
Here is CptValueChange
public
CptValueChange
(value: any):
void
{
var _this =
this
;
var model =
new
surgeryReservationModel
();
if
((
this
.CPTdata
!= null) && (value != null || undefined ||
""
)) {
for
(let entry of
this
.CPTdata
) {
for
(let selectedCPT of value) {
if
(entry
.Code
== selectedCPT
.Code
) {
var CPTDescription;
if
(_this
.Model
.CPTDescription
!= null)
{
CPTDescription = _this
.Model
.CPTDescription
;
_this
.Model
.CPTDescription
= (CPTDescription +
"\n"
+ entry
.ShortDescription
);
}
else
if
(_this
.Model
.CPTDescription
== null)
{
_this
.Model
.CPTDescription
= entry
.ShortDescription
;
}
// _this.surgeryReservationModel.CPTCodeId = entry.CptId;
console
.log
(
"CPT Description is "
+
""
+ _this
.Model
.CPTDescription
);
break
;
}
}
}
console
.log
(
"valueChange"
, value);
}
}
Hi,
Is it possible to access in child url function, the parent fields (I want the type to make a condition for the url) ?
Thank you in advance.
Here a part of the source code
let matieresSource: kendo.data.HierarchicalDataSourceOptions = {
transport: {
read: {
url: (params) => {
this
.$log.info(
"params"
, params);
return
this
.apiEndpoint +
"/v1/parcours/"
+ params.id +
"/matieres/edito/tree"
;
},
type:
"GET"
,
dataType:
"json"
,
beforeSend:
function
(req) {
let authData = localStorage.getItem(
'authData'
);
let auth =
"Bearer "
+ JSON.parse(authData).access_token;
req.setRequestHeader(
'Authorization'
, auth);
}
},
parameterMap: (data: kendo.data.DataSourceTransportParameterMapData, type: string) => {
// Remove query string in the URL
data =
null
;
return
data;
}
},
schema: {
model: {
fields: {
id:
"id"
,
name:
"name"
,
type:
"type"
,
baseElement:
"baseElement"
,
isDirty:
"isDirty"
,
hasDirty:
"hasDirty"
,
nbChildren:
"nbChildren"
},
hasChildren: (data: any) => {
return
data.nbChildren > 0 ?
true
:
false
;
},
children: modulesSource
}
}
};
let parcoursSource: kendo.data.HierarchicalDataSourceOptions = {
transport: {
read: {
url: (params) => {
return
this
.apiEndpoint +
"/v1/parcours/edito/tree"
;
},
type:
"GET"
,
dataType:
"json"
,
beforeSend:
function
(req) {
let authData = localStorage.getItem(
'authData'
);
let auth =
"Bearer "
+ JSON.parse(authData).access_token;
req.setRequestHeader(
'Authorization'
, auth);
}
},
parameterMap: (data: kendo.data.DataSourceTransportParameterMapData, type: string) => {
return
data;
}
},
schema: {
model: {
fields: {
id:
"id"
,
idLms:
"idLms"
,
name:
"name"
,
type:
"type"
,
baseElement:
"baseElement"
,
isDirty:
"isDirty"
,
nbChildren:
"nbChildren"
},
hasChildren: (data: any) => {
return
data.nbChildren > 0 ?
true
:
false
;
},
children: matieresSource
}
}
};
Hey,
I have been working on a kendo treeview with angularjs. I couldn't find any sources or documentation about filtering nodes in angular as below
http://demos.telerik.com/kendo-ui/treeview/filter-treeview-in-dialog
Thanks in advance.
Hello,
I'm working with the map control and trying to consume geojson data which is formatted in long/lat arrays instead of lat/long arrays. Is there any way to tell the map it's in this format without having to reformat the data itself?
Thanks. -Jason
Hi Frds i have requirement like need to draw a bubble on kendo map from geojson response.
I am receiving data like [Longitude, Latitude] but when i try to plot this on map kendo consider this like [latitude, longitude] . Please do needful help for me.
Thanks in advance.
I can't figure out how to:
select row by data id
and
get data-id from selected row.
Attached is an short example (zipped file of index.html and support files with kendo ui) of what I do.
I'll appreciate review of the attached example and an advise on how to proceed with row selection and extracting data-id from selected row
I'm getting an "Out of stack space" exception on a datasource call when upgrading Kendo from v2016.1.412 to v2017.2.504 (jQuery 1.12.3, AngularJS 1.6.2). Everything works kosher on the previous version, but on upgrade, the following line causes the exception: $scope.tree.setDataSource(ds);. It bombs out before the data call is ever made, which is successful.
Here is the datasource:
01.
Factory.getOrgDS =
function
() {
02.
var
ds =
new
kendo.data.HierarchicalDataSource({
03.
transport: {
04.
read:
function
(e) {
05.
$http.post(env.baseUrl +
'/TreeView/GetTreeData'
, {
06.
maxLevelEntity: groatSession.maxLevel, year: helper.getFiscalYear(), branch: groatSession.branch
07.
}).then(
function
(response) {
08.
var
orgs = response.data;
09.
10.
//remove air force clinics
11.
for
(
var
i = 0; i < orgs.length; i++) {
12.
checkCurrentLevel(orgs[i]);
13.
orgs[i] = removeAFClinics(orgs[i]);
14.
}
15.
16.
e.success(orgs);
17.
});
18.
}
19.
},
20.
schema: {
21.
model: {
22.
id:
"EntityID"
,
23.
children:
"Children"
,
24.
hasChildren:
function
(item) {
25.
if
(item.Levelname ==
"clinic"
|| (item.Levelname ==
"base"
&& helper.isAirForce(groatSession, env, item))) {
26.
return
true
;
27.
}
28.
29.
return
item.Children && item.Children.length > 0;
30.
}
31.
}
32.
},
33.
filter: [
34.
{ field:
"hide"
, operator:
"eq"
, value: undefined },
35.
{ field:
"hide"
, operator:
"neq"
, value:
true
}
36.
],
37.
sort: { field:
'EntityDescInt'
, dir:
'desc'
}
38.
});
39.
40.
return
ds;
41.
}
e.success(orgs); on line 16 still hits, after the exception is thrown setting the datasource. The treeview never ends up loading any of the data in the UI.
Any help would be great, thanks.
Jason
Hi there,
Is there any way to use this spreadsheet with datetime format cell as following?
dd/mm/yyyy hh:mm (24 hour)
Even I manually update hours, it keeps showing the time to 12:00 AM.
Thanks,
Chris
I'm getting an "Out of stack space" exception on a datasource call when upgrading Kendo from v2016.1.412 to v2017.2.504 (jQuery 1.12.3, AngularJS 1.6.2). Everything works kosher on the previous version, but on upgrade, the following line causes the exception: $scope.tree.setDataSource(ds);. It bombs out before the data call is ever made, which is successful.
Here is the datasource:
e.success(orgs); on line 16 still hits, after the exception is thrown setting the datasource. The treeview never ends up loading any of the data in the UI.
Any help would be great, thanks.
Jason
01.
Factory.getOrgDS =
function
() {
02.
var
ds =
new
kendo.data.HierarchicalDataSource({
03.
transport: {
04.
read:
function
(e) {
05.
$http.post(env.baseUrl +
'/TreeView/GetTreeData'
, {
06.
maxLevelEntity: groatSession.maxLevel, year: helper.getFiscalYear(), branch: groatSession.branch
07.
}).then(
function
(response) {
08.
var
orgs = response.data;
09.
10.
//remove air force clinics
11.
for
(
var
i = 0; i < orgs.length; i++) {
12.
checkCurrentLevel(orgs[i]);
13.
orgs[i] = removeAFClinics(orgs[i]);
14.
}
15.
16.
e.success(orgs);
17.
});
18.
}
19.
},
20.
schema: {
21.
model: {
22.
id:
"EntityID"
,
23.
children:
"Children"
,
24.
hasChildren:
function
(item) {
25.
if
(item.Levelname ==
"clinic"
|| (item.Levelname ==
"base"
&& helper.isAirForce(groatSession, env, item))) {
26.
return
true
;
27.
}
28.
29.
return
item.Children && item.Children.length > 0;
30.
}
31.
}
32.
},
33.
filter: [
34.
{ field:
"hide"
, operator:
"eq"
, value: undefined },
35.
{ field:
"hide"
, operator:
"neq"
, value:
true
}
36.
],
37.
sort: { field:
'EntityDescInt'
, dir:
'desc'
}
38.
});
39.
40.
return
ds;
41.
}
Hello!!
Kendo Map Bing doesn't support pt-BR culture?
I did tests and just fr-FR, en-US, de-DE and es-ES works.
Thank you!!