Mobile ListView lose style when I set new data

4 posts, 1 answers
  1. Armando
    Armando avatar
    4 posts
    Member since:
    Mar 2013

    Posted 12 Mar 2014 Link to this post

    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?
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 12 Mar 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Armando
    Armando avatar
    4 posts
    Member since:
    Mar 2013

    Posted 12 Mar 2014 in reply to Kiril Nikolov Link to this post

     really I forgot the group. It is working! thank you!
  5. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 13 Mar 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready