Prevent expand/collapse for header template control clicked

17 posts, 2 answers
  1. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 04 Jan 2011 Link to this post

    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
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 04 Jan 2011 Link to this post

    This is exactly what I was looking for.

    Thanks Shinu! :)
  5. Linus
    Linus avatar
    17 posts
    Member since:
    Jul 2008

    Posted 09 Jun 2011 Link to this post

    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?
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 14 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Naresh
    Naresh avatar
    9 posts
    Member since:
    Apr 2011

    Posted 23 Jun 2011 Link to this post

    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
  8. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 22 Jul 2011 Link to this post

    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
  9. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 28 Jul 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. Justus
    Justus avatar
    10 posts
    Member since:
    Jan 2014

    Posted 24 Jan 2014 Link to this post


    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?
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Jan 2014 in reply to Justus Link to this post

    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.
  12. Justus
    Justus avatar
    10 posts
    Member since:
    Jan 2014

    Posted 04 Feb 2014 in reply to Shinu Link to this post

    This works except it disables a postback that I still need to trigger.
  13. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 Feb 2014 Link to this post

    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
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  14. Justus
    Justus avatar
    10 posts
    Member since:
    Jan 2014

    Posted 07 Feb 2014 in reply to Kate Link to this post

    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.
  15. Justus
    Justus avatar
    10 posts
    Member since:
    Jan 2014

    Posted 07 Feb 2014 Link to this post

    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.
  16. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 12 Feb 2014 Link to this post

    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
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  17. Justus
    Justus avatar
    10 posts
    Member since:
    Jan 2014

    Posted 12 Feb 2014 in reply to Kate Link to this post

    Hello Kate,

    That video does not look like it responds to any sort of postback.
  18. Plamen
    Admin
    Plamen avatar
    2733 posts

    Posted 04 Apr 2014 Link to this post

    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
     

    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
UI for ASP.NET Ajax is Ready for VS 2017