RadListBox disable delete button instead of removing

9 posts, 1 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 04 Mar 2011 Link to this post

    Hi,

    I am currently using "RadListBox1.AllowDelete = false" which removes the delete button. Instead, I would like the delete button to be grayed out -- as when deletion is allowed but no item is selected. Is this possible to set server side?

    Sean
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 09 Mar 2011 Link to this post

    Hi Sean,

    Disabling this functionality on the server side will lead to the fact that this button won't even be rendered on the page. One possible solution is to subscribe on the OnClientDeleting and cancel the event. More information how to cancel the event you could find here.

    Best wishes,
    Dimitar Terziev
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 09 Mar 2011 Link to this post

    Hi Telerik,

    So there is no way to just gray out the button? I do not want our users to think they have the ability to delete a RadListBoxItem -- cancelling the event would leave them confused as to why they did not see the item delete. Instead, I would just like to remove their ability to initiate the event completely. Removing the buttons does suffice for this, but it makes the page 'jumpy' and I don't like having buttons just show up/leave like that.

    Sean
  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 15 Mar 2011 Link to this post

    Hello Sean,

    If you are not using the transfer functionality, try the following code snippet:
    $telerik.$(".rlbButtonAreaRight").unbind();
    $telerik.$(".rlbButtonAreaRight").addClass("rlbDeleteDisabled rlbDisabled")

     With the above code, the events of the button are detached and appropriate styles are applied.

    Please check if this works for you.

    Greetings,
    Dimitar Terziev
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 16 Mar 2011 Link to this post

    Hi Dimitar,

    This is on the right track, but is not quite what I was hoping for. Here is my code and what I experience.

    function OnClientSelectedIndexChanged(listBox, eventArgs) {
         var clickedItem = eventArgs.get_item();
         var itemValue = clickedItem.get_value();
     
         if (itemValue == "RadTab_Home") {
             $telerik.$(".rlbButtonAreaRight").unbind();
             $telerik.$(".rlbButtonAreaRight").addClass("rlbDeleteDisabled rlbDisable");
         }
    }

    See attached picture for before/after clicking this. I would also like to be able to undo the change when they select a different item, would that just be calling bind and removing the class?
  7. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 21 Mar 2011 Link to this post

    Hi Sean,

    Please try the following implementation of the OnClientSelectedIndexChanged event handler function:
    <script type="text/javascript">
         
        var bool = true;
     
        function OnClientSelectedIndexChanged(sender, args) {
     
     
            if (args.get_item().get_value() == "One") {
     
                $telerik.$(".rlbDelete", $telerik.$(".rlbButtonAreaRight")[0]).die();
                $telerik.$(".rlbDelete").addClass("rlbDeleteDisabled rlbDisabled")
                bool = true;
                return;
            }
     
            if (bool) {
                $telerik.$(".rlbDelete", $telerik.$(".rlbButtonAreaRight")[0])
                .live("click", function(e) {
                    sender._onDeleteClick(e);
                    e.preventDefault();
                });
                bool = false;
            }
        }
         
    </script>

    I hope this would fit your scenario.

    Regards,
    Dimitar Terziev
    the Telerik team
  8. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 21 Mar 2011 Link to this post

    Hi Dimitar,

    I modified your code slightly, but it should be logically equivalent. (Of note: I tried your code before modifying it and it yielded the same results so I am confident my change didn't introduce unintended logic.)

    function OnClientSelectedIndexChanged(listBox, eventArgs) {
        var clickedItem = eventArgs.get_item();
        var itemValue = clickedItem.get_value();
     
        if (itemValue == "RadTab_Home") {
            $telerik.$(".rlbDelete", $telerik.$(".rlbButtonAreaRight")[0]).die();
            $telerik.$(".rlbDelete").addClass("rlbDeleteDisabled rlbDisabled");
        }
        else {
            $telerik.$(".rlbDelete", $telerik.$(".rlbBUttonAreaRight")[0]).live("click", function (e) {
                sender._onDeleteClick(e);
                e.preventDefault();
            });
        }
    }

    Using this code I experience the following:

    When the page first loads and nothing has focus deletion is not possible.
    I then select RadTab_Home by clicking on it once. Deletion becomes enabled.
    If I then select RadTab_Home a second time deletion becomes disabled and remains disabled.
    If I add a new RadListBoxItem and select it deletion becomes enabled and multiple clicks do not enable it. 

    Any idea why the first click wouldn't have the desired effect? I put in some break point alerts and saw that the true part of the 'if' value was being hit in both scenarios. In addition, I went through the rest of my code to ensure nothing else was conflicting it on first click -- I found none.

    Regards,

    Sean

    Edit: I added a bit more code and now it functions as expected.

    function OnClientLoad(listBox) {
        var item = listBox.get_selectedItem()
     
        if (item == null || item.get_value() == "RadTab_Home" ) {
            $telerik.$(".rlbDelete", $telerik.$(".rlbButtonAreaRight")[0]).die();
            $telerik.$(".rlbDelete").addClass("rlbDeleteDisabled rlbDisabled");
        }
    }
     
    function OnClientSelectedIndexChanged(listBox, eventArgs) {
        var clickedItem = eventArgs.get_item();
        var itemValue = clickedItem.get_value();
     
        if (itemValue == "RadTab_Home") {
            $telerik.$(".rlbDelete", $telerik.$(".rlbButtonAreaRight")[0]).die();
            $telerik.$(".rlbDelete").addClass("rlbDeleteDisabled rlbDisabled");
        }
        else {
            $telerik.$(".rlbDelete", $telerik.$(".rlbBUttonAreaRight")[0]).live("click", function (e) {
                sender._onDeleteClick(e);
                e.preventDefault();
            });
        }
    }
  9. Dave
    Dave avatar
    38 posts
    Member since:
    Jul 2007

    Posted 28 Mar 2012 Link to this post

    This worked great for disabling the delete button of a radlistbox. My question is how would I change things if I have 2 RadListBoxes on the same page and need to disable the respective delete buttons at separate times? How do I differentiate between the 2 ListBoxes and delete buttons?
  10. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 30 Mar 2012 Link to this post

    Hi Dave,

    In your scenario you should pass the DOM element of the RadListBox which you want to operate with as a context of your jQuery selectors.

    Kind regards,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017