Listview Selected Item touch effect

10 posts, 0 answers
  1. Cihan
    Cihan avatar
    3 posts
    Member since:
    Nov 2012

    Posted 30 Nov 2012 Link to this post

    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.
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 03 Dec 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Jesse Herrera
    Jesse Herrera avatar
    39 posts
    Member since:
    Jul 2006

    Posted 03 Dec 2012 Link to this post

    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

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 04 Dec 2012 Link to this post

    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!
  6. Cihan
    Cihan avatar
    3 posts
    Member since:
    Nov 2012

    Posted 04 Dec 2012 Link to this post

    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.
  7. Jesse Herrera
    Jesse Herrera avatar
    39 posts
    Member since:
    Jul 2006

    Posted 04 Dec 2012 Link to this post

    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
  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Dec 2012 Link to this post

    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!
  9. Jesse Herrera
    Jesse Herrera avatar
    39 posts
    Member since:
    Jul 2006

    Posted 05 Dec 2012 Link to this post

    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
  10. Cihan
    Cihan avatar
    3 posts
    Member since:
    Nov 2012

    Posted 07 Dec 2012 Link to this post

    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.
  11. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 07 Dec 2012 Link to this post

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