Listview Selected Item touch effect

[Cihan]

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.

[Petyo]

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

[Jesse Herrera]

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

[Petyo]

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

[Cihan]

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.

[Jesse Herrera]

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

[Petyo]

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

[Jesse Herrera]

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

[Cihan]

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 SERVICE_URL_GET_FIRM_LIST = "http://icenium.ayasofyazilim.com/Bakiyeci.asmx/GetFirmList";

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.

[Petyo]

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