How to change title of group listview

7 posts, 0 answers
  1. Jack
    Jack avatar
    9 posts
    Member since:
    May 2013

    Posted 23 May 2013 Link to this post

    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?

  2.
  3. Jack
    Jack avatar
    9 posts
    Member since:
    May 2013

    Posted 24 May 2013 Link to this post

     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>
  5. Jack
    Jack avatar
    9 posts
    Member since:
    May 2013

    Posted 24 May 2013 Link to this post

    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");
        }
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2887 posts

    Posted 27 May 2013 Link to this post

    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!
  9. Jack
    Jack avatar
    9 posts
    Member since:
    May 2013

    Posted 27 May 2013 Link to this post

    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.
  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2887 posts

    Posted 29 May 2013 Link to this post

    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!
  13. Jack
    Jack avatar
    9 posts
    Member since:
    May 2013

    Posted 29 May 2013 Link to this post

    Wow, thank you. It works.

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