More events for panelbar

[marco]

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

[Dimo]

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

[marco]

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

[Dimo]

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

[marco]

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

[marco]

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

[Dimo]

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

[marco]

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