Problem SOLVED.
Hi.
I have grouped datasource by week day ID.
As result i have {see attached file}.
Before that I have grouped sttDataSource by wdname(name of day). But the days of the week did not match the order such as Monday Tuesday Wednesday, Thursday ... they were sorted by alpabet.. Monday Saturday Sunday Thursday..
How can i change title 1 to Monday, title 2 to Tuesday, title 3 to Wednesday?
Hi.
I have grouped datasource by week day ID.
function
regroup() {
if
($(
"#sel"
).data(
"kendoMobileButtonGroup"
).current().index()==1) {
sttDataSource.filter( { field:
"id_wt1"
, operator:
"startswith"
, value:
"1"
});
sttDataSource.sort( { field:
"dtime"
, dir:
"asc"
});
}
else
if
($(
"#sel"
).data(
"kendoMobileButtonGroup"
).current().index()==0) {
sttDataSource.filter( { field:
"wdname"
, operator:
"startswith"
, value:
""
});
sttDataSource.sort( {field:
"dtime"
, dir:
"asc"
});
}
else
if
($(
"#sel"
).data(
"kendoMobileButtonGroup"
).current().index()==2) {
sttDataSource.filter( { field:
"id_wt2"
, operator:
"startswith"
, value:
"2"
});
sttDataSource.sort( { field:
"dtime"
, dir:
"asc"
});
}
sttDataSource.group(
"id_wd"
);
$(
"#listv"
).kendoMobileListView({
dataSource: sttDataSource,
template: $(
"#sttTemplate"
).html()
});
}
Before that I have grouped sttDataSource by wdname(name of day). But the days of the week did not match the order such as Monday Tuesday Wednesday, Thursday ... they were sorted by alpabet.. Monday Saturday Sunday Thursday..
How can i change title 1 to Monday, title 2 to Tuesday, title 3 to Wednesday?
6 Answers, 1 is accepted
0

Jack
Top achievements
Rank 1
answered on 24 May 2013, 01:04 PM
headerTemplate:
"<span class='wd${value}'>${value}</span>"
,
$(
'#listv .wd1'
).text(
"Monday"
);
$(
'#listv .wd2'
).text(
"Tuesday"
);
$(
'#listv .wd3'
).text(
"Wednesday"
);<br>
$(
'#listv .wd4'
).text(
"Thursday"
);<br>
$(
'#listv .wd5'
).text(
"Friday"
);<br>
$(
'#listv .wd6'
).text(
"Saturday"
);
0

Jack
Top achievements
Rank 1
answered on 24 May 2013, 11:10 PM
Problem solved:
function
regroup() {
sttDataSource.group(
"id_wd"
);
if
($(
"#sel"
).data(
"kendoMobileButtonGroup"
).current().index()==1) {
sttDataSource.filter( { field:
"id_wt1"
, operator:
"startswith"
, value:
"1"
});
sttDataSource.sort( { field:
"dtime"
, dir:
"asc"
});
}
else
if
($(
"#sel"
).data(
"kendoMobileButtonGroup"
).current().index()==0) {
sttDataSource.filter( { field:
"wdname"
, operator:
"startswith"
, value:
""
});
sttDataSource.sort( {field:
"dtime"
, dir:
"asc"
});
}
else
if
($(
"#sel"
).data(
"kendoMobileButtonGroup"
).current().index()==2) {
sttDataSource.filter( { field:
"id_wt2"
, operator:
"startswith"
, value:
"2"
});
sttDataSource.sort( { field:
"dtime"
, dir:
"asc"
});
}
$(
"#listv"
).kendoMobileListView({
dataSource: sttDataSource,
headerTemplate:
"<span class='wd${value}'>${value}</span>"
,
template: $(
"#sttTemplate"
).html(),
});
$(
'#listv .wd1'
).text(
"Monday"
);
$(
'#listv .wd2'
).text(
"Tuesday"
);
$(
'#listv .wd3'
).text(
"Wednesday"
);
$(
'#listv .wd4'
).text(
"Thursday"
);
$(
'#listv .wd5'
).text(
"Friday"
);
$(
'#listv .wd6'
).text(
"Saturday"
);
$(
'#listv .wd7'
).text(
"Sunday"
);
}
0
Hi Jack,
By default when data is grouped it is also sorted, which is why if you group by the day name groups appear in alphabetical order. To keep the days in order the DataSource should be grouped by the day ID. In order to customize the displayed text please use the headerTemplate.
Regards,
Alexander Valchev
Telerik
By default when data is grouped it is also sorted, which is why if you group by the day name groups appear in alphabetical order. To keep the days in order the DataSource should be grouped by the day ID. In order to customize the displayed text please use the headerTemplate.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Jack
Top achievements
Rank 1
answered on 27 May 2013, 10:28 PM
How can i customize the displayed text?
Is it ?
headerTemplate: "<span class='wd${value}'>${wdname}</span>"
It does not work.
Thats why i have use "$('#listv .wd1').text("Monday");"
But with it, listview loading slowly.
$(
"#listv"
).kendoMobileListView({
dataSource: sttDataSource,
headerTemplate:
"<span class='wd${value}'>${value}</span>"
,
template: $(
"#sttTemplate"
).html(),
});
headerTemplate: "<span class='wd${value}'>${wdname}</span>"
It does not work.
Thats why i have use "$('#listv .wd1').text("Monday");"
But with it, listview loading slowly.
0
Hi Jack,
Could you please provide a small extract of the data which you use so I can get a better overview of your case?
As a general information, the data of the header template contains the group field name, group value and group sub items. You may use a JavaScript expression to match the value (number) with text (string). Alternatively you may display the dataItem field which contains the day name.
Please check the following example: http://jsbin.com/opovut/3/edit
Regards,
Alexander Valchev
Telerik
Could you please provide a small extract of the data which you use so I can get a better overview of your case?
As a general information, the data of the header template contains the group field name, group value and group sub items. You may use a JavaScript expression to match the value (number) with text (string). Alternatively you may display the dataItem field which contains the day name.
Please check the following example: http://jsbin.com/opovut/3/edit
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Jack
Top achievements
Rank 1
answered on 29 May 2013, 11:34 AM
Wow, thank you. It works.
$(
"#listv"
).kendoMobileListView({
dataSource: sttDataSource,
headerTemplate:
"<span>#= data.items[0].wdname #</span>"
,
template: $(
"#sttTemplate"
).html(),
});