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

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

5 Answers 1021 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Lakshmikanth
Top achievements
Rank 1
Lakshmikanth asked on 21 Feb 2013, 05:11 AM
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

5 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 21 Feb 2013, 11:38 AM
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!
0
Lakshmikanth
Top achievements
Rank 1
answered on 21 Feb 2013, 12:07 PM
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
0
Alexander Valchev
Telerik team
answered on 25 Feb 2013, 08:29 AM
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!
0
Lakshmikanth
Top achievements
Rank 1
answered on 25 Feb 2013, 09:11 AM
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
0
Alexander Valchev
Telerik team
answered on 26 Feb 2013, 10:07 PM
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!
Tags
ListView (Mobile)
Asked by
Lakshmikanth
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Lakshmikanth
Top achievements
Rank 1
Share this question
or