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
7 Answers, 1 is accepted
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.
Dimo
Telerik

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
>> 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
Dimo
Telerik

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

Thanks for your attention, best regards
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.
Dimo
Telerik

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