Prevent expand/collapse for header template control clicked

[Karl]

I have a RadPanelBar with several dynamically generated RadPanelItems, and each of these has a HeaderTemplate applied that contains a number of controls, one of which is a texbox.

When the user clicks anywhere on the RadPanelItem header, the RadPanelItem expands (or collapses - depending on it's current state) including when the user clicks into the texbox control in the header.

What I need to do is prevent the RadPanelItem expanding or collapsing when the user clicks in any of the texboxes, but retain this functionality for the rest of the header so if the user clicks anywhere but the textbox, then the RadPanelItem will still expand or collapse.

Does anyone know how I can achieve this?

Thanks

[Shinu]

Hello,


I hope the following client code is going to help you in achieving this.

Client Code:

function OnClientItemClicking(sender, args) {
    if (args.get_domEvent().target.type == "text") {
        args.set_cancel(true);
    }
}

Attach the handler to RadPanelBar "OnClientItemClicking".


-Shinu.

[Karl]

This is exactly what I was looking for.

Thanks Shinu! :)

[Linus]

Hi!

I have a follow up to this.

What if there's a Button in the HeaderTemplate that causes a PostBack? The suggested code would cancel both the expand/collapse behaviour and the PostBack. Any ideas how to cancel only the expand/collapse behavious and let the PostBack take place as usual?

[Kate]

Hi Linus,

To prevent the expanding/collapsing of the RadPanelBar Root Item you could use the set_expand(false); client-side function. Please take a look at the markup and javascript code below:

<script type="text/javascript">

        function RootItemClick() {
            var panelBar = $find("<%= RadPanelBar1.ClientID %>");
            var panelItem = panelBar.findItemByText("Root");
            panelItem.set_expanded(false);
        }

    </script>

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" OnClientItemClicking="RootItemClick">
       <Items>
           <telerik:RadPanelItem runat="server" Text="Root">
           <HeaderTemplate>
               <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton"
                   onclick="RadButton1_Click">
               </telerik:RadButton>
               <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
           </HeaderTemplate>
               <Items>
                   <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                   </telerik:RadPanelItem>
                   <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                   </telerik:RadPanelItem>
                   <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                   </telerik:RadPanelItem>
                   <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 4">
                   </telerik:RadPanelItem>
               </Items>
           </telerik:RadPanelItem>
           <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">
               <Items>
                   <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                   </telerik:RadPanelItem>
                   <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                   </telerik:RadPanelItem>
                   <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                   </telerik:RadPanelItem>
                   <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 4">
                   </telerik:RadPanelItem>
               </Items>
           </telerik:RadPanelItem>
           <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">
           </telerik:RadPanelItem>
       </Items>
   </telerik:RadPanelBar>

code behind

protected void Page_Load(object sender, EventArgs e)
   {
   }
   protected void RadButton1_Click(object sender, EventArgs e)
   {
       Label1.Text = "PostBack occurs";
   }

Best wishes,
Kate
the Telerik team

[Naresh]

Hi Friend,

I'm also facing the postback problem of button click, which is in radpanelbar headertemplate.

Can any one please tell me how to achieve this..

Thanks in advance for help..

Thanks
Naresh

[Karl]

As part of our development, we have no come scross the same issue as Linus, but instead of a straight postback, we have an image which pops up an alert box asking the user if they want to delete the item from the data collection that makes up the panel items.

As Shinu posted originally, cancelling the event args, does cancel the expand and collapse when the user clicks in the textbox, but if we use the same method to cancel the Expand/collapse when the user clicks the delete button, all the javascript is cancelled and no delete confirmation popup appears and so that functionality is lost.

I tried to implement Kate's solution below which does capture the correct panel item etc, and allows the delete popup to appear, but it still doesn't prevent the panel from expanding or collapsing.

My javascript method is shown below...

function CheckForControlClick(sender, args)
{
    if (args.get_domEvent().target.type == "text")
    {
        args.set_cancel(true);
    }
    if (args.get_domEvent().target.nameProp == "btn_Delete.png")
    {
        var panelBar = $find("<%= FavouriteOrdersPanelBar.ClientID %>");
        var panelItem = panelBar.findItemByText(args.get_item().get_text());
        panelItem.set_expanded(false);
    }
}

Does anyone have any idea why this wouldn't work?

Karl

[Kate]

Hello Karl,

Indeed you are right that the implementation that I suggested does not cover all of the requirements in the scenario that you describe. However, here is a demo of the RadPanelBar control that I believe fully complies with the above mentioned constrains (a RadPanelBar with a header and content templates, a button that does not cause the RootItem to collapse when it is clicked - this is achieved by using the stopPropagation event handler). 

Greetings,
Kate
the Telerik team

[Justus]


function RootItemClick() {

            var panelBar = $find("<%= RadPanelBar1.ClientID %>");

            var panelItem = panelBar.findItemByText("Root");

            panelItem.set_expanded(false);

        }

I used the suggested code above to not expand the panel, but to still run the postback, however, this only works in Chrome. In IE I get this weird jerky behavior, and in Firefox it doesn't work at all.

 Does anyone know how to fix this?

[Shinu]

Hi Justus,

Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" OnClientItemClicking="OnClientItemClicking1">
    <Items>
        <telerik:RadPanelItem Text="Item1">
            <Items>
                <telerik:RadPanelItem Text="Item1.1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Item1.2">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item2">
            <Items>
                <telerik:RadPanelItem Text="Item1.1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Item1.2">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

JavaScript:

<script type="text/javascript">
    function OnClientItemClicking1(sender, args) {
        if (args.get_item().get_text() == "Item1") {
            args.set_cancel(true)
        }
    }
</script>

Let me know if you have any concern.
Thanks,
Shinu.

[Justus]

This works except it disables a postback that I still need to trigger.

[Kate]

Hi Justus,

Try using the following javascript code and check how it goes. If you need to keep the item open (even with post back on the page) you will need to set the the set_expanded() property to true. Otherwise you will need to set it to false:

<script type="text/javascript">
        function OnClientItemClicking1(sender, args) {
            if (args.get_item().get_text() == "Item1") {
                args.get_item().set_expanded(false);
            }
        }
    </script>

 

Regards,
Kate
Telerik

[Justus]

That is the code I'm working with that is causing IE to flicker and cause what almost looks like a postback, but it works fine in firefox and chrome.

[Justus]

It actually appears like it is flashing what is supposed to be displayed on the postback, but then goes back to how it looks, then shows that screen again. And sometimes this doesn't happen at all.

[Kate]

Hi Justus,

I tested the code aging with the code with the 2013.3.1324.40 and 2013.1.220.40 version of the Telerik controls and I am still not able to get the issue that you describe in IE browser. Here is a short video demonstrating the look that I get from my side. Let me know if I am missing something.

Regards,
Kate
Telerik

[Justus]

Hello Kate,

That video does not look like it responds to any sort of postback.

[Plamen]

Hi Justus,

Would you please elaborate if you still observe the issue and if it can be replicated on any of our on-line demos? Sending some video of the issue may be helpful too.

Regards,
Plamen
Telerik