|
|
Rank: Member
Groups: Member
Joined: 10/21/2011
Posts: 13
|
This projects uses a dynamically bound SlideMenu so the total number "top level" items is variable unknown.
Each top level has a single sub which should be the same CustomItem control.
This CustomItem is very in depth including multipaged tab interfaces, scrolling listviews, ajaxuploaders etc. Yet for every sub the layout is exactly identical.
My original approach seems to be inconsistent with how this should be written so I'm looking for a best method here.
Original: on load Bind Slide > Slider_ItemDataBound add the CustomItem sub unpopulated > On top level item click (callback panel) bind all values in the CustomItem sub (ID value passed as param).
The problem is, that only the first top level menu item will actually get the CustomItem sub even though they all are added to them at Slider_ItemDataBound. I verified this by also adding .Text value to the Submenu added in the same step where to custom is added. Sure enough the CustomItem appears on index 0 and all other indexes have the value in .Text.
My idea to resolve this would be to move the CustomItem where it's added to a parent's sub on demand. That way the only time the sub exists is when the top level parent is clicked. So then there wouldn't be multiple instances of the same CustomItem.
The challenge there though is the callback_Execute's sender is the Panel and E is the CallbackEventArgs. So trying to get to the ProjectSlider's MenuItem.SubMenu would be difficult. I'm not passing in the index in the parameter but instead that record's unique identifier in the data. (The Top Level menu item's value).
Any suggestions or best practices. This project is about 96% complete as all functionalities within the CustomItem are written and tested, just need it to work dynamically for all slide subs not just index 0.
Thank you
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, I am not sure exactly how you add your CustomItem. The key is you need to have multiple CustomItem instances, one for each top menu item. You can do that by defining a TemplateItem directly on the top group and defining a CustomItem inside the TemplateItem to automatically create CustomItem for you. For example:
Code: HTML/ASPX
<eo:SlideMenu ....>
.....
<TopGroup>
<TemplateItem>
<CustomItem>
....
</CustomItem>
</TemplateItem>
</TopGroup>
....
</eo:SlideMenu>
I would imagine to get the parent sub menu inside the CallbackPanel_Execute event, using item index is the easiest method. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 10/21/2011
Posts: 13
|
My original method was on the slider's _ItemDataBound event, I would perform this:
Code: Visual Basic.NET
EO.Web.MenuItem item = new EO.Web.MenuItem();
item.CustomItemID = "CustomItemProjects";
e.MenuItem.SubMenu.Items.Add(item);
With the method mentioned above, I'm guessing all my calls to the nested controls within the custom template would need to be a findcontrol approach. Is it possible to continue something like my code above where I ID'd the index of the menu selected Quote:I would imagine to get the parent sub menu inside the CallbackPanel_Execute event, using item index is the easiest method. Then remove the subs from all the menuitems and just apply the custom to the one menu on demand? Just trying to limit the code re-writing that I foresee with making it a part of the template (The custom is about 4-5 layers deep in nested controls and additional listview templates etc.). But at the same time I'm having trouble with manipulating the slide menu from the values available in the CallbackPanel's event. Thanks again for the prompt assistance!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
No. You can not use a single CustomItem. In your case, it is apparent that each menu item needs to have a different instance of CustomItem. What you are trying to do is to make the same CustomItem instance to appear in different menu items simultaneously. That is not possible. The key is one instance v.s. multiple instances ---- it has nothing to do with how complicated your custom item is. There is no such thing as removing CustomItem or moving a CustomItem item around. You use one CustomItem for each menu item, period. Whatever you do inside the CustomItem is totally different story and that would be up to you.
|
|
Rank: Member
Groups: Member
Joined: 10/21/2011
Posts: 13
|
Here's a quick summary of the modified code I'm working on now with my transition to a template item custom approach as instructed earlier. Any concerns with this?
Code: HTML/ASPX
</LookItems>
<TopGroup Style-CssText="font-size: 12px; cursor: hand; font-family: arial">
<TemplateItem>
<SubMenu>
<TemplateItem>
<CustomItem>
<eo:TabStrip ID="TabStrip" runat="server" ControlSkinID="None"
MultiPageID="MultiPage" style="margin-top: 0px" Width="450px"
onitemclick="TabStrip_ItemClick" RaisesServerEvent="True">
<LookItems>
<eo:TabItem Height="21" ItemID="_Default" LeftIcon-SelectedUrl="00010605"
LeftIcon-Url="00010604"
NormalStyle-CssText="background-image: url(00010602); background-repeat: repeat-x; font-weight: normal; color: black;"
RightIcon-SelectedUrl="00010607" RightIcon-Url="00010606"
SelectedStyle-CssText="background-image: url(00010603); background-repeat: repeat-x; font-weight: bold; color: #ff7e00;"
Text-Padding-Bottom="2" Text-Padding-Top="1">
<SubGroup ItemSpacing="1" Style-CssText="background-image:url(00010601);background-position-y:bottom;background-repeat:repeat-x;color:black;cursor:hand;font-family:Verdana;font-size:12px;">
</SubGroup>
</eo:TabItem>
</LookItems>
<TopGroup>
<Items>
<eo:TabItem Text-Html="BUGS">
</eo:TabItem>
<eo:TabItem Text-Html="FEATURES">
</eo:TabItem>
<eo:TabItem Text-Html="OTHER">
</eo:TabItem>
</Items>
</TopGroup>
</eo:TabStrip>
<eo:MultiPage ID="MultiPage" runat="server" Height="10px" Width="450px"
Font-Names="Arial" Font-Size="Smaller"
style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt"
BackColor="White">
<eo:PageView ID="PageView1" runat="server" Width="100%">
<div style="width: 100%; height: 210px; overflow: auto;">
<asp:ListView ID="ListView1" runat="server" DataKeyNames="noteid"
InsertItemPosition ="None" OnItemCanceling="ListItemCancel"
OnItemEditing ="ListItemEdit" On ="ListItemAdd"
OnItemUpdating ="ListItemUpdate"
style="font-family: Arial, Helvetica, sans-serif"
oniteminserting="ListItemAdd" onitemdatabound="ListView1_ItemDataBound">
<LayoutTemplate>
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<asp:PlaceHolder id="itemPlaceholder" runat="server" />
<tfoot>
<tr>
<th style="text-align:left">
<asp:LinkButton ID="NewButton1" runat="server" Text="NEW NOTE" OnClick="NewButton_Click"></asp:LinkButton>
<%--<asp:LinkButton ID="NewButton" CommandName="Insert" runat="server" Text="NEW"></asp:LinkButton>--%>
</th>
</tr>
</tfoot>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<% #Eval("note")%>'></asp:Label>
<asp:LinkButton ID="ReplyButton" Visible='<% #Eval("edit")%>' CommandName="Edit" runat="server" Text="+"></asp:LinkButton>
</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<tr>
<td>
<asp:HiddenField ID="hd_ProjectID" runat="server" Value='<% #Eval("projectid")%>' /><asp:HiddenField ID="hd_NoteID" runat="server" Value='<% #Eval("noteid")%>' />
<asp:RequiredFieldValidator Width ="1px" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="txt_Note" ID="vld_Note"
Font-Bold="True" Font-Names="Arial" Font-Size="X-Small" ForeColor="Red">NOTE REQUIRED!</asp:RequiredFieldValidator>
<asp:Label ID="Label1" runat="server" Text='<% #Eval("note")%>'></asp:Label><br />
<div style ="vertical-align:middle;text-align:right;"><asp:TextBox ID="txt_Note" runat="server" Text="" MaxLength="2500" TextMode="MultiLine" Rows="4" Width="400" />
</td></tr>
<tr><td>
<table style="vertical-align: top" bgcolor="#CCCCCC">
<tr>
<td style="vertical-align: top; padding-top: 5px;"><asp:TextBox ID="txt_Build" onblur="clickrecall(this,'BUILD #')"
onclick="clickclear(this, 'BUILD #')" runat="server" Text="BUILD #"
MaxLength="50" TextMode="SingleLine" Font-Size="X-Small" Width="48px" />
</td>
<td style="vertical-align: top">
<eo:AJAXUploader Font-Size="X-Small" ID="AJAXUploader" runat="server"
EnableTheming="True" UseLinkButton="False"
TempFileLocation ="~/images/upload" AutoUpload="True" MaxFileCount="1"
Height="8px" PostedFileLabelFormat="{posted_file_name} ">
<TextBoxStyle CssText="font-size:X-Small;" />
<BrowseButtonStyle CssText="font-size: x-small" />
<LayoutTemplate>
<asp:PlaceHolder runat="server" id="InputPlaceHolder">Input Box Place Holder</asp:PlaceHolder>
<asp:PlaceHolder runat="server" id="PostedFilesPlaceHolder">Posted Files Place Holder</asp:PlaceHolder><asp:Button Font-Size=" XX-Small" runat="server" ID="DeleteButton" Text="REMOVE" Width="55px" />
</LayoutTemplate>
</eo:AJAXUploader></td>
<td style="vertical-align: top; padding-top: 5px;"><asp:LinkButton ID="ReplyButton" Visible='<% #Eval("edit")%>' CausesValidation="true" runat="server" CommandName="Update" Text="REPLY" />
<asp:LinkButton ID="CancelButton" CommandName="Cancel" runat="server" Text="CANCEL" CausesValidation="false" /></td>
</tr>
</table>
</td>
</tr> </div>
</EditItemTemplate>
<InsertItemTemplate>
<tr>
<td>
<asp:HiddenField ID="hd_ProjectID" runat="server" Value='<% #Eval("projectid")%>' /><asp:HiddenField ID="hd_NoteID" runat="server" Value='<% #Eval("noteid")%>' />
<asp:RequiredFieldValidator Width ="1px" Height ="1px" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="txt_Note" ID="vld_Note"
Font-Bold="True" Font-Names="Arial" Font-Size="X-Small" ForeColor="Red">NOTE REQUIRED!</asp:RequiredFieldValidator>
<div style ="vertical-align:middle;text-align:right;"><asp:TextBox ID="txt_Note" runat="server" Text="" MaxLength="2500" TextMode="MultiLine" Rows="4" Width="400" />
</td></tr>
<tr><td>
<table style="vertical-align: top" bgcolor="#CCCCCC">
<tr>
<td style="vertical-align: top; padding-top: 5px;"><asp:TextBox ID="txt_Build" onblur="clickrecall(this,'BUILD #')"
onclick="clickclear(this, 'BUILD #')" runat="server" Text="BUILD #"
MaxLength="50" TextMode="SingleLine" Font-Size="X-Small" Width="48px" /></td>
<td style="vertical-align: top"><eo:AJAXUploader Font-Size="X-Small" ID="AJAXUploader" runat="server"
EnableTheming="True" UseLinkButton="False"
TempFileLocation ="~/images/upload" AutoUpload="True" MaxFileCount="1"
Height="8px" PostedFileLabelFormat="{posted_file_name} ">
<TextBoxStyle CssText="font-size:X-Small;" />
<BrowseButtonStyle CssText="font-size: x-small" />
<LayoutTemplate>
<asp:PlaceHolder runat="server" id="InputPlaceHolder">Input Box Place Holder</asp:PlaceHolder>
<asp:PlaceHolder runat="server" id="PostedFilesPlaceHolder">Posted Files Place Holder</asp:PlaceHolder><asp:Button Font-Size=" XX-Small" runat="server" ID="DeleteButton" Text="REMOVE" Width="55px" />
</LayoutTemplate>
</eo:AJAXUploader></td>
<td style="vertical-align: top; padding-top: 5px;"><asp:LinkButton ID="InsertButton" CausesValidation="true" CommandName="Insert" runat="server" Text="ADD" />
<asp:LinkButton ID="CancelButton" CommandName="Cancel" runat="server" Text="CANCEL" CausesValidation="false" /></td>
</tr>
</table>
</td>
</tr> </div>
</div>
</td>
</tr>
</InsertItemTemplate>
</asp:ListView>
</div>
</eo:PageView> ..............
Since the move to this approach clearly all my preexisting data binds etc not cannot be completed. What's the easiest way code like this to work better with the suggested templated approach?
Code: C#
TabStrip.Items[0].Text = ds_notes.Tables[0].Rows[0]["BUGS"].ToString().Trim();
TabStrip.Items[1].Text = ds_notes.Tables[0].Rows[0]["FEATURES"].ToString().Trim();
TabStrip.Items[2].Text = ds_notes.Tables[0].Rows[0]["OTHER"].ToString().Trim();
TabStrip.Items[0].Value = ds_notes.Tables[0].Rows[0]["PROJECTID"].ToString().Trim();
TabStrip.Items[1].Value = ds_notes.Tables[0].Rows[0]["PROJECTID"].ToString().Trim();
TabStrip.Items[2].Value = ds_notes.Tables[0].Rows[0]["PROJECTID"].ToString().Trim();
Thanks again for the assistance!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, Your code looks correct except that you won't be able to reference controls inside the CustomItem directly with their name. You would need to handle the SlideMenu's ItemCreated event, inside that event you can get the newly created CustomItem from the event argument, you can then use something like this to get a reference of the controls in your CustomItem:
Code: C#
EO.Web.TabStrip tabStrip = (EO.Web.TabStrip)e.CustomItem.FindControl("TabStrip");
This is necessary because there are now multiple TabStrips in your page all with the same name. So you can no longer reference any of them directly with name. Hope this helps. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 10/21/2011
Posts: 13
|
Got it working but my solution may have been somewhat unorthodox. The basis of this is that it's a single expand and that each expanded menu item (only one at a time) has a single sub (the custom item). Below is how I circumvented needing a customitem template in the menu itself which would have required an overhaul on all previous existing code. For reference: BindSlideMenu() method is top level only, callback param is pipe delimited which is created with JS. And there's no concern that the indexes would get misaligned as the menu item creation is heavy limited.
Code: C#
protected void CallbackPanel1_Execute(object sender, EO.Web.CallbackEventArgs e)
{
ProjectSlider.Items.Clear();
BindSlideMenu();
string[] ParamVals = e.Parameter.Split('|'); //key 0: INDEX 1: MENUITEM.VALUE
EO.Web.MenuItem item = new EO.Web.MenuItem();
item.CustomItemID = "CustomItemProjects";
ProjectSlider.Items[Convert.ToInt32(ParamVals[0])].SubMenu.Items.Add(item);
ProjectSlider.Items[Convert.ToInt32(ParamVals[0])].Expanded = true;
CustomItemProjects.Visible = true;
BindListItems(Convert.ToInt32(ParamVals[1]), 2);
}
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
You can do that if you put the whole SlideMenu inside the CallbackPanel. However wouldn't that go back to the server side whenever you wish to expand a different top menu item? And the CustomItem would always be inside the last top menu item in your case?
Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/21/2011
Posts: 13
|
Yes it does but I don't mind it since there's a large sum of nested controls within the custom which need to be rebound continuously. The custom sub has 3 tabs, and the subsequent pages with edit/insert listviews X 3 and multiple additional file uploaders, validators etc.
Ended up with the exact functionality I had hoped for when starting of the all these EO controls.
Thanks again for all the assistance.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
You are very welcome. Glad that you got it working for you!
|
|