How to remove default padding from the listview and how to apply background color

6 posts, 0 answers
  1. Lakshmikanth
    Lakshmikanth avatar
    4 posts
    Member since:
    Feb 2013

    Posted 20 Feb 2013 Link to this post

    Hi,

    When looking at the Twitter example I have adapted it with my own data.

    http://demos.kendoui.com/mobile/listview/pull-with-endless.html

    I need to make a slight change:
    1. In android mobile the default background color of listview is black but i want to change it to different color(yellow) 
    2. Also there is default padding(some space around each row)  but i want it to remove(i,e padding=0).
    3. When tapping each 'row' I want it to highlight by red for few seconds


    Thanks,
    Lakshmikanth
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 21 Feb 2013 Link to this post

    Hi Lakshmikanth,

    Regarding your requirements:

    1. In android mobile the default background color of listview is black but i want to change it to different color(yellow).

    Generally speaking, you can inspect the currently applied CSS rules for Android platform and override them. If you are not very convenient with CSS, I recommend you to use the ThemeBuilder tool which will allow you to customize the default android theme using drag 'n' drop.

    2. Also there is default padding(some space around each row)  but i want it to remove(i,e padding=0).

    Please use the following CSS:
    #listview > li {
        padding: 0;
    }
    /* where #listview is the ID of your ListView */

    3. When tapping each 'row' I want it to highlight by red for few seconds

    By default the framework will highlight the touched item if its an <a> element (demo). You can customize the highlight color with the aforementioned ThemeBuilder tool. If that does not suit in your case, you may use the touch events. For example - highlight on touchstart and remote the background color on hold.

    Kind regards,
    Alexander Valchev
    the Telerik team
    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. Lakshmikanth
    Lakshmikanth avatar
    4 posts
    Member since:
    Feb 2013

    Posted 21 Feb 2013 Link to this post

    Hi Alexander,

    Thank you for your previous post.

    I am using kendo-template to create repeated list view.
    1)But some gap is coming between each list-view below P2 image and P1 image .PFA the screenshot for the reference.

    2) 
    $("#taskListview").kendoMobileListView({
                                   dataSource: kendo.data.DataSource.create({data: taskData}),
                                   template: $("#settingsListViewTemplate").html(),
                                   click:onClick
                 });
      
    when i click on list-view  onclick function will invoke.
    Inside onclick i am calling some web-services it taking some time to get a response from the server(around 2 seconds).In that 2 seconds i am able to click another list-view. so can you please tell me how to implement loader(like some animation) or how to disable a page till i get response from the server
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 25 Feb 2013 Link to this post

    Hello Lakshmikanth,

    Straight to your questions:

    1. The 'gap' that you are talking about looks like a border. If you want you can remove it by applying border: none; to the ListView's <li> elements. Please try the following:
      #listview > li {
          padding: 0;
          border: none;
      }


    2. To show (and hide) a loader animation you may use the show/hideLoading methods of the application. This demo demonstrates the usage.

    I hope this will help.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Lakshmikanth
    Lakshmikanth avatar
    4 posts
    Member since:
    Feb 2013

    Posted 25 Feb 2013 Link to this post

    Thank you for the reply.

    I am using
     app.showLoading(); method to get the Loader.

    As expected,Loader is coming but still i am able to click the other rows in the list.
    Please let me know how to disable click on other rows till i get the response from the server.
    Also how to change the text(Loading...) inside the loader.
    
    Thanks and Regards,
    Lakshmikanth
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 26 Feb 2013 Link to this post

    Hello Lakshmikanth,

    Yes, the loader does not prevent the user from interacting with the ListView. Please accept my apology for the inconvenience caused.

    To disable the clicks you could append an overlay element that covers the whole document.body element. This will prevent the user from clicking anywhere, until the overlay is removed on $.ajax success.

    As an example:
    • append the overlay and show the loader
      $(document.body).append($('<div id="overlay"></div>'));
      app.showLoading();


    • remove the overlay and hide the loader
      $("#overlay").remove();
      app.hideLoading();


    • where the overlay element have the following styling:
      #overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #000;
          opacity: 0.5;
          z-index: 10000;
      }


    You can test the solution here: http://jsbin.com/akaxox/2/edit
    I hope this will fit in your case.

    The text of the loader could be changed through the loading configuration option of the application. For more information please refer to the respective documentation (link).

    Kind regards,
    Alexander Valchev
    the Telerik team
    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