How to disable a listview link?

3 posts, 0 answers
  1. John
    John avatar
    6 posts
    Member since:
    Aug 2012

    Posted 22 Aug 2012 Link to this post

    I'm creating a view with a grouped listview on it, targeting iOS and Android.

    The listview shows how many records exist of a certain type. If the user presses one, the view changes to show those records.
    However, I'd like to be able to show a disabled row when no records of that type exist.

    Those records would need to have a "disabled" appearance: grayed text, no ">" link, no button behavior.

    It would be great if this could be controlled via databinding (no records or a property of zero = desired behavior), but I'm fine with running a javascript procedure to do this. My issue is that while I can easily perform the graying by applying style="color:#808080" to the <a>, I can only remove the button behavior by removing the <a> tags around the text at design time, not by just setting disable="true" or some other property. Is there a property (href? target? k-style?) or a programmatic procedure that will remove the button behavior from the listview line?

    Thanks for your help, everyone.

    In the HTML which follows, "None Connected" and "Offline" should be gray (yes it is) but also not activated (can't figure that part out).

    <div data-role="view" data-title="Home" id="home-view" data-layout="layout">
    <ul id="recordTypeList" data-role="listview" data-style="inset" data-type="group">
    <li>
    <div id="connectedDeviceLabel" class="km-group-title">Flight Recorder</div>
                <ul>
                    <li id="connectedLabel" disabled="true"><a disabled="true" style="color:#808080">None Connected</a></li>
    </ul>
    </li>
    <li>
    <div id="deviceName" class="km-group-title">This Device</div>
    <ul>
    <li><a>34 Records</a></li>
    </ul>
    </li>
    <li>
    <div id="recordsCloud" class="km-group-title">Records in the Cloud</div>
    <ul>
    <li><a  disabled="true" href="" style="color:#808080">Offline</a></li>
    <li>Cloud access<input align="left" type="checkbox" id="cloudswitch" /></li>
    </ul>
    </li>
    </ul>
    </div>
  2. John
    John avatar
    6 posts
    Member since:
    Aug 2012

    Posted 23 Aug 2012 Link to this post

    Okay, programmatically I can stop the button behavior by setting the [<a> disabled = true] and checking this property during onclick processing in the <a>.

    Now all I need is help with hiding the ">" symbol. Changing its color would even work.
  3. Kendo UI is VS 2017 Ready
  4. John
    John avatar
    6 posts
    Member since:
    Aug 2012

    Posted 23 Aug 2012 Link to this post

    Okay, I found the last piece.

    To hide the ">", just set the className of the link to "".
    To put it back, set className to "km-listview-link".
Back to Top