More events for panelbar

8 posts, 0 answers
  1. marco
    marco avatar
    17 posts
    Member since:
    Apr 2013

    Posted 18 Oct 2013 Link to this post

    Hello,
    I us e the kendo panelbar to substitute a custom component to generate an accordion.
    I created in the code-behind a hierarchy of <ul> - <li> levels with a sequence of HtmlGenericControl objects;
    I initialized in a js script the top ul HtmlGeneric Control with

    $("#panelbar").kendopanelbar();

    It worked fine, but unfortunately the old custom component has on every main item bar, the <li> item, another icon to trigger actions as expand and edit a general review for the item. See image below.
    The whole is a panelbar, the dark blue lines are the <li> items, the icon on the left is the expand/collapse icon, the icon on the right allows clicking on it to trigger an action. The light blue part is the list of the various sub items.
    So I would need to add an image in the main item and to have an event when I click this image, sort of superimpose a button with an image on the main item bar. 
    What could be a workaround using the kendopanelbar to reproduce this behavior ? 

    And further is it possible to port the kendo panelbar in mobile environment ?

    Sorry for the vague thread topic, I wasn't able to find a proper definition 
     Thanks for your attention

     

    best regards

     

    Marco Furlan
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Oct 2013 Link to this post

    Hello Marco,

    In order to move the PanelBar expand/collapse arrows to the left, you can use:

    http://jsfiddle.net/kc2bx/

    In order to add custom content on the right of the root items, you can use:

    http://jsfiddle.net/dimodi/5ufPe/

    You can also look at the following demos too see how custom inner content can be defined/loaded:

    http://demos.kendoui.com/web/panelbar/ajax.html

    http://demos.kendoui.com/web/panelbar/index.html


    I am not sure what do you mean by "porting in mobile environment". The PanelBar should work on mobile devices as well.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. marco
    marco avatar
    17 posts
    Member since:
    Apr 2013

    Posted 21 Oct 2013 Link to this post

    Hello Dimo,
    thanks for your answer, probably I didn't understood the use of ContentUrls: in the definition of the kendopanelbar.
    I define an array that automatically will be loaded in the <div> tag within each li; each element of the ContentUrls[] array is mapped in the corresponding index of the <li> correct ? I.E. in the example ajaxcontent1.html is inserted in the first >li>.
    I'll explore further this option.
    Thanks again, best regards

    Marco
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Oct 2013 Link to this post

    Hello Marco,

    >> I define an array that automatically will be loaded in the <div> tag within each li; each element of the ContentUrls[] array is mapped in the corresponding index of the <li> correct ?

    That's right. The TabStrip works the same way.

    http://demos.kendoui.com/web/tabstrip/ajax.html

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. marco
    marco avatar
    17 posts
    Member since:
    Apr 2013

    Posted 24 Oct 2013 Link to this post

    Sorry, apparently I am not able to post on this thread, sorry if I duplicate.

    Hello Dimo, sorry but I have to come back to this issue.
    The contentUrls[] to load seems not exactly what I need.
    What I need to reproduce with kendo components is the following:
    a panelbar with ul-li elements, but with the possibility to have a button or image on the li element - main item bar -, so that when I click this button a custom event handler is triggered, and a general functionality for the whole main item is provided.
    The button is a Windows button on which in prionciple I have no control, it is created server-side that has attached a Onclick handler with a particular functionality.
    In the bundle I enclose you can see a snapshot of what I mean. In the same bundle I enclose the aspx page and the code behind.

    I think that the main issue is the link between client code and code-behind.
    Let me try to summarize:

    I am trying to build the whole control in the code-behind, I have a menu with main items - li elements - and subitems, ul elements.
    I create a button as
               Button testButton = new System.Web.UI.WebControls.Button();
                testButton.ID = "btnTest";
                testButton.Text = "OK";
                testButton.Attributes.Add("style", "background-color: orange");
                testButton.Click += new System.EventHandler(testButton_Click);

    and I add it to the ul item 
                HtmlGenericControl ulbtn = new HtmlGenericControl("ul");
                ulbtn.Controls.Add(testButton);
    then I add this to the li item as 
                HtmlGenericControl libtn = new HtmlGenericControl("li");
                libtn.InnerHtml = "Test btn";
                libtn.Attributes.Add("id", "liBtn");
                libtn.Controls.Add(ulbtn);

    In the aspx page I have a placeholder as
            <asp:PlaceHolder ID="PanelGeneric" runat="server"/> 
    in the code behind, in the Page_Load event the panelbar is added as
                PanelKendo = new HtmlGenericControl("ul");
                // Set the properties of the new HtmlGenericControl control.
                PanelKendo.ID = "panelKendo";
       PanelKendo.Controls.Add(libtn);
    I run a script to initialize PanelNedo as a kendo panelbar with RegisterStartupScript 
                string kpanelinit = @"
                    <script type=\""text/javascript\""> $(document).ready(function () {
                    var initPanel = function () {
                        $(""#panelKendo"").kendoPanelBar({
                        });
                    };
                    initPanel();
                    });</script> 
                ";

    If I click the ul element with the button, the click event is fired and handled by the handler in the code behind, as obvious a postback occurs.
    So far so good.

    Now I try to position the same button on a main item bar, the li element, simply as
                libtn.Controls.Add(testButton);
    Just the Select/Expand/Collapse/Activate are fired, and not the server-side button click event.

    I figured out how fire a further event clicking on the li element, I can add an attribute to the Control added to li as
                testButton.Attributes.Add("onclick", "javascript:showDetails);"); 
    but it is a client-side function, I need to call a server-side function.

    PLEASE SUGGEST ME A WAY TO DO THIS.

    Sorry for the length, I tried to explain my issue.
    I will be grateful for your help, I'm stuck on this.

    Best regards

    Marco
  7. marco
    marco avatar
    17 posts
    Member since:
    Apr 2013

    Posted 24 Oct 2013 Link to this post

    Sorry, I'm not able to attach the files, now I noticed I used rar instead of zip. I enclose the snapshot, the aspx and the cs files. I use kendo version 2013.2.716
    Thanks for your attention, best regards

    Marco
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Oct 2013 Link to this post

    Hi Marco,

    Please set UseSubmitBehavior to false for testButton0. This will change the way the ASP.NET AJAX framework attaches the client click event handler to this button.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. marco
    marco avatar
    17 posts
    Member since:
    Apr 2013

    Posted 29 Oct 2013 Link to this post

    Hi Dimo,
    thanks for your reply and sorry for my ignorance.
    As a matter of fact in some cases I'll profit of your effective suggestion.
    In complicated situations when I have the button buried in a custom Table added to the <li> element, 
    I thought about
    raising an event on the client side attaching a handler where I set a hidden field
    in the onSelect eventhandler, if the hiddenfield is set, I call __doPostback with the selected element as parameter
    On the server side in the RaisePostBackEvent method I process the postback, I dig out the action corresponding to the selected element and execute it.
    I guess this is not the best use of the Kendo suite and it would imply a sort of philosophical change, but I have to reproduce the current functionalities.

    Best regards

    Marco
Back to Top
Kendo UI is VS 2017 Ready