RadListBox disable delete button instead of removing

[Sean]

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

[Dimitar Terziev]

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

[Sean]

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

[Dimitar Terziev]

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

[Sean]

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?

[Dimitar Terziev]

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

[Sean]

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();
        });
    }
}

[Dave]

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?

[Dimitar Terziev]

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