This is a migrated thread and some comments may be shown as answers.

How to change title of group listview

6 Answers 200 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 23 May 2013, 01:59 PM
Problem SOLVED.


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()
       
    });
      
    }
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?

6 Answers, 1 is accepted

Sort by
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");
But how to init this function? document.ready not working. This function works only with "<a data-role="button">switch</a>
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
Alexander Valchev
Telerik team
answered on 27 May 2013, 12:31 PM
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
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?

$("#listv").kendoMobileListView({
        dataSource: sttDataSource,
         headerTemplate: "<span class='wd${value}'>${value}</span>",
        template: $("#sttTemplate").html(),
         
    });
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.
0
Alexander Valchev
Telerik team
answered on 29 May 2013, 11:14 AM
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
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(),
    
});
Tags
ListView (Mobile)
Asked by
Jack
Top achievements
Rank 1
Answers by
Jack
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or