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

Listview Selected Item touch effect

9 Answers 175 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Cihan
Top achievements
Rank 1
Cihan asked on 30 Nov 2012, 01:59 PM
Hej,

Firstly, In kendoui.trial.2012.3.1114\examples\mobile\listview\index.html sample page shows when the user click list item, list item turn to blue on press and when the user release to touch list item turn to normal. This is the normal state. 

I apply the same .html file in Icenium Kendo UI framework project but listview item don't react any effect when i select the item on release the item. I don't understand wht is it like that? Is this problem about the kendo framework or the icenium IDE? I am not sure this is this question should be asked here.

On the other hand, the main purpose for my listview is have to fill from web service and i can fill the listview from web service but still the same problem i can't get the click effect on the selected listview item. Here is filling code for listview:

$.ajax({
type: "POST",
url:  SERVICE_URL_GET_FIRM_LIST,
data: "{ firmID:" + firmID + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function() {
app.showLoading();         
},
success: function(msg) {
firmItems = JSON.parse(msg.d);
$("#firm-listview").kendoMobileListView({ dataSource: firmItems, template: $("#firmListViewTemplate").text() });           
},
complete: function() {
app.hideLoading();
},
error: function(msg) {
app.hideLoading();
alert('Error Message');
}
}); 

<script type="text/x-kendo-template" id="firmListViewTemplate">
            <p>${Definition}</p><a data-role="detailbutton" data-style="detaildisclose"></a>
</script>


Kind Regards.

9 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 03 Dec 2012, 01:49 PM
Hi,

ListView Item highlighting is only applied if the listview item contains certain markup (one link, text with detail button, etc.). In your case, you should remove the paragraph tag from the template. 

Greetings,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jesse Herrera
Top achievements
Rank 1
answered on 03 Dec 2012, 04:27 PM
I'm having trouble getting the touch effect to display correctly too. Here is my init code for the listview:


function initListViewAddress(e) {
e.view.element.find("#addressListData").kendoMobileListView({
template : "<a data-rel=\"actionsheet\" href=\"\\#addressActions\" data-actionsheet-context=\"#:AddressID#\">#:Address#</a>",
dataSource: kendo.data.DataSource.create(addressData)
});
};

Here's the control on the view:

<ul data-role="listview" id="addressListData" data-click="listViewClickAddress"></ul>


The list looks good and all of the data is being displayed correctly. The actionsheet displays correctly and when I click a button on the actionsheet I can see the correct ID number was passed to the actionsheet correctly. Basically, everything is working great except I don't see the blue highlight effect when a row is clicked. Is there something else I need to do here?

Thanks,
Jesse

0
Petyo
Telerik team
answered on 04 Dec 2012, 02:42 PM
Hello Jesse,

The code you have posted seems ok. I created a sample based on those code snippets - and the highlight effect is there. Is it possible for you to modify the fiddle above, so that I can reproduce the problem?

Kind regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Cihan
Top achievements
Rank 1
answered on 04 Dec 2012, 03:02 PM
Hej Petyo,

Thanks for reply. I can get highlight when upload to phone but i cannot get the highlight still in emulator.

By the way i changed template like <a><h3>#: data #</h3></a> this with using hash. But if i use like <a><h3>${Definition}</h3></a> i cannot get the highglight effect.
0
Jesse Herrera
Top achievements
Rank 1
answered on 04 Dec 2012, 03:36 PM
Hi Petyo,

I made the changes to jsfiddle but everything seems to be working. I am using Icenium Graphite so perhaps the problem is the simulator not rendering the view correctly. Thanks for the help!

Thanks,
Jesse Herrera
0
Petyo
Telerik team
answered on 05 Dec 2012, 12:07 PM
Hi Jesse,

I will mention this issue to the Icenium team, so that they can verify it.

Cihan,

The #: # and ${} placeholders are identical (the ${} is actually a deprecated alias). Can you send an updated fiddle URL? I will take a look.  

Regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jesse Herrera
Top achievements
Rank 1
answered on 05 Dec 2012, 04:35 PM
Hi Petyo,

I reported a bug to the Icenium team after making this post. They replied and said they were able to reproduce the problem and it has been logged to be fixed.

Thanks,
Jesse Herrera
0
Cihan
Top achievements
Rank 1
answered on 07 Dec 2012, 09:12 AM
Hejj,

I'm sorry for the latency. I cannot get appropriate time for answer. Here below you'll find javascript and html.

// JavaScript Document
 
var firmItems;
var firmLogicalRef;
var firmDefinition;
 
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
 
// PhoneGap is ready
function onDeviceReady() {
    //initial methods...
}
 
function getFirmList() {
    $.ajax({
        type: "POST",
        url:  SERVICE_URL_GET_FIRM_LIST,
        data: "{ firmID:331 }",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        beforeSend: function() {
            app.showLoading();        
        },
        success: function(msg) {
            firmItems = JSON.parse(msg.d);
            $("#firm-listview").kendoMobileListView({ dataSource: firmItems, template: $("#firmlist-template").text() });          
        },
        complete: function() {
            app.hideLoading();
        },
        error: function(msg) {
            app.hideLoading();
            alert('Firma listesi alinirken hata olustu!...');
        }
    });
}
<div data-role="view" id="firmListView" data-init="getFirmList" data-title="Firma Listesi" data-layout="databinding" >
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                    <a data-align="left" data-role="button" data-click="previousPageFirmList" id="previousPageFirmList">
                        <img src="kendo/styles/images/navigate_left.png" width="19px" height="19px"/>
                    </a>
                </div>
            </header>
 
            <ul data-role="listview" id="listFirm" data-style="inset" data-click="listViewClickFirms" data-type="group" class="firmList">
                <li>
                    <ul id="firm-listview" ></ul>
                </li>
            </ul>
        </div>
        <div data-role="firmListlayout" data-id="databinding">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>
        </div>
<script>
           var app = new kendo.mobile.Application(document.body, { transition: "slide:right" });
</script>
<script type="text/x-kendo-template" id="firmlist-template">
           <a class="firmList">${Definition}</a>
</script>
Kind Regards.
0
Petyo
Telerik team
answered on 07 Dec 2012, 11:35 AM
Hello,

I tested the code you provided in the following jsFiddle (you need to disable web security for it to run properly), and it seems working, to me at least. If you test it in the Icenium simulator, you are probably facing the same problem as the one already discussed in this thread. 

All the best,
Petyo
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
Cihan
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Jesse Herrera
Top achievements
Rank 1
Cihan
Top achievements
Rank 1
Share this question
or