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

How to disable a listview link?

2 Answers 139 Views
ListView
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 22 Aug 2012, 07:40 PM
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 Answers, 1 is accepted

Sort by
0
John
Top achievements
Rank 1
answered on 23 Aug 2012, 05:20 AM
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.
0
John
Top achievements
Rank 1
answered on 23 Aug 2012, 07:49 PM
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".
Tags
ListView
Asked by
John
Top achievements
Rank 1
Answers by
John
Top achievements
Rank 1
Share this question
or