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

Mobile ListView lose style when I set new data

3 Answers 31 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Armando
Top achievements
Rank 1
Armando asked on 12 Mar 2014, 06:35 AM
Hello everyone, I'm losing the style when I sets new data to my ListView, I'm using the flat style and when the ListView read the data from the controller for first time, the list view displays the items correctly as you can see in the image 1. But when the user execute a search function, and reload the list with new data, I lose the style as you can see in the image2.

This is my mobile list view
@(Html.Kendo().MobileListView()
              .Name("listview")
              .TemplateId("tmp")
              .HeaderTemplateId("htmp")
              .DataSource(datasource => datasource
                          .Read(r => r.Action("Study_Read", "Home").Data("searchparameter"))
                          .PageSize(20)
                          .ServerOperation(true)
                          .Group(g => g.Add("PatientName", typeof(string)))
                          )
          )
my templates

<script type="text/x-kendo-template" id="tmp">
         <div data-role="content" style="width:100%;">
         <table style="width:100%; border-width:2px;">
         <tr  style="border-width:thin;">
           <td style="width:33%">
               #=Description #
           </td>
           <td style="width:33%">
               #=Modality #
           </td>
           <td style="width:33%">
               #=StudyDate #
           </td>
           <td>
               <div style="background-color:WhiteBlue;">
                     Status Report
               </div>
           </td>
           <td    style="right:0px; width:33%">
            <div style="position:relative; right:0px;">
               <a data-role="button" class="view" data-click="onClick" id="#=StudyId#">View</a>
            </div>
           </td>
         </tr>
         
         </table>
          
         </div>
   </script>
   <script type="text/x-kendo-template" id="htmp">
        <p><h4> #= value #</h4> </p>
   </script>

And the javascript function that I'm using to set the new data, the comments lines was the options that I test to solve the issue, but any works

function advancedsearch(e) {
    var patientId = $("#txt_patient_id").val();
    var patientName = $("#txt_patient").val();
    var modality = $("#ddlModality option:selected").text();
    var startDate = $("#start_date").val();
    var endDate = $("#end_date").val();
    var headerTemplate = kendo.template($("#htmp").html());
    var template =kendo.template($("#tmp").html());
    //var totalTemplate = headerTemplate.concat(template);
    alert(endDate)
    $.ajax({
        type:"POST",
        url: '@Url.Action("Advanced","Home")',
        data:{
                patientId: patientId,
                patientName: patientName,
                modality: modality,
                startDate: startDate,
                endDate: endDate
            },
        success: function (evt) {
            console.log(evt);
             
            var dataSource = new kendo.data.DataSource({
                pageSize:20,
                data: evt,
                schema: {
                    data: "Data",
                    total:"Total"
                }
                /*,
                 change: function (e) {
                     if (this.view()[0]) {
                         console.log(template);
                         $("#listview").html(kendo.render(template, dataSource.view()));
                         kendo.mobile.init($("#listview"));
                     }
                 }*/
            });
            $("#listview").data("kendoMobileListView").setDataSource(dataSource);
            //dataSource.read();
            //$("#listView").kendoMobileListView({
            //    dataSource: evt,
            //    template: kendo.template($("#tmp").html())
            //});
 
            //$("#listview").kendoMobileListView({
            //    dataSource: evt,
                
                //template: $("#tmp").text()
            //});
            //$("#listview").data('kendoMobileListView').dataSource.read(evt);
        }
    });
}

What is the problem?

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 12 Mar 2014, 11:44 AM
Hello Armando,

The problem comes from the fact that the second time you set a dataSource that is not grouped. You can either group the dataSource (as the first time you set it) or you can just change the data of the dataSource and not the whole dataSource, like this:

http://jsbin.com/tumun/2/edit

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Armando
Top achievements
Rank 1
answered on 12 Mar 2014, 04:24 PM
 really I forgot the group. It is working! thank you!
0
Accepted
Kiril Nikolov
Telerik team
answered on 13 Mar 2014, 08:26 AM
Hi Armando,

I am glad it helped.

In case you have any further questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ListView (Mobile)
Asked by
Armando
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Armando
Top achievements
Rank 1
Share this question
or