[Solved] How to hide a drawer element dynamically

[jmillar]

I have a declaratively specified list of drawer options:

<ul data-role="listview" id="tabletDrawer" data-click="drawerClick">
    <li>
        <a href="views/oc.html" data-icon="fa-calculator">Order Calculator</a>
    </li>
    <li>
        <a href="views/oc.html" data-icon="fa-refresh">Reset</a>
    </li>
    <li>
        <a href="views/settings.html" data-icon="spc-settings">Settings</a>
    </li>
    <li>
        <a href="#logView" data-icon="spc-log">Log</a>
    </li>
    <li>
        <a href="skunkworks.html" data-icon="spc-settings">IT Development Area</a>
    </li>
    <li>
        <a href="debug.html" data-icon="spc-settings" class="spc-debug">IT Debug Info</a>
    </li>
</ul>

How can I remove one of them at runtime (for example, if I wanted to remove an item from the list based on a setting in a build configuration).

Thanks,
Jason

[Petyo]

Hello,

if I understand you correctly, you are using a listview widget inside the drawer. The listview does not expose an API for removing non-databound list items, but you can do that using the jQuery remove method, or the standard DOM removeChild method. 

Regards,
Petyo
Telerik

 

 

[jmillar]

Hi Petyo;

Thanks, that worked - I had initially tried that but wound up with an artifact where the item would have been and had to just use the jQuery parent selector to also remove some of the chroming that Kendo puts around the list item.

Thanks again,
Jason