Mobile ListView lose style when I set new data

[Armando]

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?

[Kiril Nikolov]

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

 

 

[Armando]

 really I forgot the group. It is working! thank you!

[Kiril Nikolov]

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