How to change title of group listview

[Jack]

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?

[Jack]

 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>

[Jack]

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");
    }

[Alexander Valchev]

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

[Jack]

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.

[Alexander Valchev]

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

[Jack]

Wow, thank you. It works.

$("#listv").kendoMobileListView({
    dataSource: sttDataSource,
     headerTemplate: "<span>#= data.items[0].wdname #</span>",
    template: $("#sttTemplate").html(),

});