Disable Listview Template Edit & Delete buttons

2 posts, 0 answers
  1. Eric
    Eric avatar
    19 posts
    Member since:
    Mar 2014

    Posted 31 Jul 2014 Link to this post

    Any ideas? I took a stab in the dark; just add
    'disabled' class to the template, but this doesn't work:

    01.if (User.Identity.IsAuthenticated)
    02. {
    03.    <script type="text/x-kendo-tmpl" id="template">
    04.        <div class="post-view k-widget">
    05.            <div class="edit-buttons">
    06.                <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
    07.                <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
    08.            </div>
    09.            <div class="post-header bg-azure">
    10.                <p class="post-title">#:Name# </p>
    11.                <p class="post-time">#:kendo.toString(CommentDate,'d')#</p>
    12.            </div>
    13.            <div class="post-msg">
    14.                #=Comment#
    15.            </div>
    16.        </div>
    17.    </script>
    18. }
    19. else
    20. {
    21.    <p>You must be logged in to contribute.</p>
    23.    <script type="text/x-kendo-tmpl" id="template">
    24.        <div class="post-view k-widget">
    25.            <div class="edit-buttons">
    26.                <a class="k-button k-button-icontext k-edit-button disabled" href="\\#"><span class="k-icon k-edit"></span></a>
    27.                <a class="k-button k-button-icontext k-delete-button disabled" href="\\#"><span class="k-icon k-delete"></span></a>
    28.            </div>
    29.            <div class="post-header bg-azure">
    30.                <p class="post-title">#:Name# </p>
    31.                <p class="post-time">#:kendo.toString(CommentDate,'d')#</p>
    32.            </div>
    33.            <div class="post-msg">
    34.                #=Comment#
    35.            </div>
    36.        </div>
    37.    </script>
    38. }

    What would be the correct way?


  2. Dimiter Madjarov
    Dimiter Madjarov avatar
    2213 posts

    Posted 01 Aug 2014 Link to this post

    Hi Robert,

    You could add the k-state- disabled class in order to visually style the button as disabled. Nevertheless this won't prevent it's behavior. In order to do this, you should remove the k-edit-button and k-delete-button classes, which are used to attach the corresponding handlers.
    <a class="k-button k-button-icontext k-state-disabled" href="\\#"><span class="k-icon k-edit"></span></a>

    Dimiter Madjarov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top