What's New?

[CLOSED] problem creating accordion Dynamically

  1. #1
    Apr 07, 2011, 6:04 PM

    [CLOSED] problem creating accordion Dynamically

    I am having problem generating accordion dynamically. This accordion is dynamically generatted as the menu content depends on users role and priviledges.

    i receive the error mesage Microsoft JScript compilation error: Expected ':' in the executeScript Ext Function. the error is thrown at the underlined code

     
 
var executeScript = function (o, result, response) {
var delay = 0,
em = o.eventMask || {};
if (em.minDelay) {
delay = em.minDelay;
}

var task = new Ext.util.DelayedTask(
function (o, result, response) {
if (result.script && result.script.length > 0) {
(function (o, result, response) { 
eval(result.script); ---------------------------fails here.
}).call(window, o, result, response);
}
this.fireEvent("ajaxrequestcomplete", response, result, o.control, o.eventType, o.action, o.extraParams, o);
if (o.userSuccess) {
o.userSuccess.call(o.control || window, response, result, o.control, o.eventType, o.action, o.extraParams, o);
}

if (o.userComplete) {
o.userComplete.call(o.control || window, true, response, result, o.control, o.eventType, o.action, o.extraParams, o);
}
},
o.scope, [o, result, response]).delay(delay);
};
 
 
This is my controller code
//controller action
public AjaxResult GetNavigationMenu()
{
NavigatorMenuItems navigationMenus = new NavigatorMenuItems();
if (this.ContextUser.Identity is IContextIdentity)
{
int id = (this.ContextUser.Identity as IContextIdentity).Id;
navigationMenus = ApplicationContext.ServiceLayerContext.MembershipService.GetUserNavigatorMenuItems(id);
}
AjaxResult response = new AjaxResult();
Container accordion = new Container() { Layout = "Accordion" }; 
MenuPanel menuPanel= null;
response.Script = "";
foreach (NavigatorMenuItem navigationItem in navigationMenus.NavigatorMenuItemList)
{
menuPanel = new MenuPanel();
menuPanel.ID = navigationItem.NavigatorItemName;
menuPanel.Border = false;
menuPanel.SaveSelection = false;
menuPanel.Cls = "white-menu";
menuPanel.Collapsed = false;
menuPanel.HideCollapseTool = true;
menuPanel.Title = navigationItem.NavigatorItemName;
menuPanel.Icon = Ext.Net.Icon.ArrowMerge;
foreach (NavigatorSubMenuItem subMenu in navigationItem.SubMenuItems)
{
Ext.Net.MenuItem menuitem = new MenuItem();
menuitem.ID = subMenu.NavigatorSubMenuName; 
menuitem.Icon = Ext.Net.Icon.ArrowMerge;
menuitem.Text = subMenu.NavigatorSubMenuName; 
menuPanel.Menu.Items.Add(menuitem);
}

accordion.Items.Add(menuPanel);
}
response.Script = accordion.ToScript(RenderMode.RenderTo, "westPanel"); 
return response; 
}
 
view code
<ext:Panel ID="westPanel" 
runat="server" 
Title="<%$ Resources:WebResources|Home.FormLabels, Navigator %>"
Region="West" 
Width="225" 
Collapsible="true" 
Layout="accordion" 
Margins="5 0 5 5" Collapsed="False" Split="true" AutoScroll="True">
</ext:Panel>
    on the viewport I have the following event

    <Render Handler="initAccordion();" /> 
 
<script type="text/javascript"> 
var initAccordion= function ()
{ 
      Ext.net.DirectMethod.request({ 
       url: "/UserSettingArea/UserSetting/GetNavigationMenu", 
      cleanRequest: true 
      });

 }; 

</script>
    Response is urgently needed

    Regards
    Last edited by Daniil; Apr 15, 2011 at 12:04 PM. Reason: [CLOSED]
  2. #2
    Apr 07, 2011, 7:20 PM
    Hi,

    Unfortunately, your code is unreadable. Please do not past the code directly from VS, paste it to Notepad first for example
  3. #3
    Apr 07, 2011, 7:38 PM

    problem creating accordion Dynamically

    I am having problem generating accordion dynamically. This accordion is dynamically generatted as the menu content depends on users role and priviledges.

    i receive the error mesage "Microsoft JScript compilation error: Expected ':'". I dont know what I am doing wrong. Please assistance is required.

     
// Controller
public AjaxResult GetNavigationMenu()
        {
            NavigatorMenuItems navigationMenus = new NavigatorMenuItems();
            if (this.ContextUser.Identity is IContextIdentity)
            {
                int id = (this.ContextUser.Identity as IContextIdentity).Id;
                navigationMenus = ApplicationContext.ServiceLayerContext.MembershipService.GetUserNavigatorMenuItems(id);
            }
           AjaxResult response = new AjaxResult();
           Container accordion = new Container() { Layout = "Accordion" }; 
            MenuPanel menuPanel= null;
            response.Script = "";
            foreach (NavigatorMenuItem navigationItem in navigationMenus.NavigatorMenuItemList)
            {
                menuPanel = new MenuPanel();
                menuPanel.ID = navigationItem.NavigatorItemName;
                menuPanel.Border = false;
                menuPanel.SaveSelection = false;
                menuPanel.Cls = "white-menu";
                menuPanel.Collapsed = false;
                menuPanel.HideCollapseTool = true;
                menuPanel.Title = navigationItem.NavigatorItemName;
                menuPanel.Icon = Ext.Net.Icon.ArrowMerge;
                foreach (NavigatorSubMenuItem subMenu in navigationItem.SubMenuItems)
                {
                    Ext.Net.MenuItem menuitem = new MenuItem();
                    menuitem.ID = subMenu.NavigatorSubMenuName; 
                    menuitem.Icon = Ext.Net.Icon.ArrowMerge;
                    menuitem.Text = subMenu.NavigatorSubMenuName; 
                    menuPanel.Menu.Items.Add(menuitem);
                }
               
                accordion.Items.Add(menuPanel);
            }
            response.Script = accordion.ToScript(RenderMode.RenderTo, "westPanel"); 
            return response;              
        }
 
<script type="text/javascript"> 
var initNav = function ()
{ 
{Ext.net.DirectMethod.request({ 
url: "/UserSettingArea/UserSetting/GetNavigationMenu", 
cleanRequest: true 
});

}; 

</script>
 
// Viewport Accordion Item. I want to dynamically generate the accordion menu  
<ext:Panel ID="westPanel" 
                runat="server" 
                Title="<%$ Resources:WebResources|Home.FormLabels, Navigator %>"
                Region="West" 
                Width="225"                      
                Collapsible="true"     
                Layout="accordion"           
                Margins="5 0 5 5" Collapsed="False" Split="true" AutoScroll="True">
              </ext:Panel>

 
//ViewPort Listerner. this calls the controller action
<Listeners>         
        <Render Handler="initNav ();" />        
 </Listeners>
  4. #4
    Apr 07, 2011, 8:30 PM
    Hi,

    1. Please use AddTo instead RenderTo mode in ToScript method
    2. Set Layout="Fit" for westPanel
    3. Remove AutoScroll for westPanel

    Here is my test case
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="Ext.Net.MVC" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Example</title>
</head>
<body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug"  />
        <script type="text/javascript">
            document.getElementById('dd').appendChild
        </script>
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="westPanel"
                    runat="server"
                    Title="Navigator"
                    Region="West" 
                    Width="225"                      
                    Collapsible="true"     
                    Layout="FitLayout"
                    Margins="5 0 5 5" 
                    Collapsed="False" 
                    Split="true">
                    <Listeners>         
                       <Render Handler="Ext.net.DirectMethod.request({url: '/Test/GetNavigationMenu', cleanRequest: true });" />        
                    </Listeners>
              </ext:Panel>
              
              <ext:Panel runat="server" Title="Center" Region="Center" />
            </Items>
        </ext:Viewport>
</body>
</html>
    public AjaxResult GetNavigationMenu()
        {
            AjaxResult response = new AjaxResult();
            Container accordion = new Container() { Layout = "Accordion" };
            MenuPanel menuPanel = null;
            response.Script = "";

            for (int i = 0; i < 5; i++)
            {
                menuPanel = new MenuPanel();
                menuPanel.ID = "ID_"+i;
                menuPanel.Border = false;
                menuPanel.SaveSelection = false;
                menuPanel.Cls = "white-menu";
                menuPanel.Collapsed = false;
                menuPanel.HideCollapseTool = true;
                menuPanel.Title = "Name_" + i;
                menuPanel.Icon = Ext.Net.Icon.ArrowMerge;
                for (int g = 0; g < 5; g++)
                {
                    Ext.Net.MenuItem menuitem = new MenuItem();
                    menuitem.ID = "SubMenuID_"+g + "_" + i;
                    menuitem.Icon = Ext.Net.Icon.ArrowMerge;
                    menuitem.Text = "SubMenuName_"+g;
                    menuPanel.Menu.Items.Add(menuitem);
                }

                accordion.Items.Add(menuPanel);
            }
            response.Script = accordion.ToScript(RenderMode.AddTo, "westPanel");
            return response;
        }
  5. #5
    Apr 07, 2011, 9:56 PM

    Adding events to the accordion

    Thanks that worked. I noticed that the error was thrown when the menu has no menu item added.

    Another question. I want to be able to the following events

    1. Size changed
    2. active accordionItem changed
    3. Accodion collapsed and expanded state.

    Can you provide me with sample code on how to achieve that using the sample you provided in you earlier response.

    Regards
  6. #6
    Apr 07, 2011, 9:59 PM
    Hi,

    Sorry, I don't understand your requirements. Please provide more details
  7. #7
    Apr 07, 2011, 10:41 PM
    Quote Originally Posted by Vladimir View Post
    Hi,

    Sorry, I don't understand your requirements. Please provide more details

    you provided me with this sample.

    public AjaxResult GetNavigationMenu() 
{ 
AjaxResult response = new AjaxResult(); 
Container accordion = new Container() { Layout = "Accordion" }; 
MenuPanel menuPanel = null; 
response.Script = ""; 
 
for (int i = 0; i < 5; i++) 
{ 
menuPanel = new MenuPanel(); 
menuPanel.ID = "ID_"+i; 
menuPanel.Border = false; 
menuPanel.SaveSelection = false; 
menuPanel.Cls = "white-menu"; 
menuPanel.Collapsed = false; 
menuPanel.HideCollapseTool = true; 
menuPanel.Title = "Name_" + i; 
menuPanel.Icon = Ext.Net.Icon.ArrowMerge; 
for (int g = 0; g < 5; g++) 
{ 
Ext.Net.MenuItem menuitem = new MenuItem(); 
menuitem.ID = "SubMenuID_"+g + "_" + i; 
menuitem.Icon = Ext.Net.Icon.ArrowMerge; 
menuitem.Text = "SubMenuName_"+g; 
menuPanel.Menu.Items.Add(menuitem); 
} 
 
accordion.Items.Add(menuPanel); 
} 
response.Script = accordion.ToScript(RenderMode.AddTo, "westPanel"); 
return response; 
}
    How can I add event handlers to capture the following

    1. Accordion Size changed (as whn the resize handle is dragged)
    2. active accordionItem changed (as in when the second accordion item is expanded )
    3. Accodion collapsed and expanded state (when accordion is hiden or expanded)

    Regards
    Last edited by Daniil; Apr 08, 2011 at 9:08 AM. Reason: Please use [CODE] tags
  8. #8
    Apr 08, 2011, 10:35 PM
    Hi,
    1. Accordion Size changed (as whn the resize handle is dragged)
    Use Resize event of westPanel or 'Container accordion'

    2. active accordionItem changed (as in when the second accordion item is expanded )
    Use Expand/Collapse events of each item inside container with accordion layout


    3. Accodion collapsed and expanded state (when accordion is hiden or expanded)
    Use Expand/Collapse event of westPanel
    Last edited by Daniil; Apr 09, 2011 at 10:15 AM.

Similar Threads

  1. creating shortcut dynamically
    By softlabsgroup.support in forum 1.x Help
    Replies: 0
    Last Post: Jun 06, 2012, 12:27 PM
  2. How we can add dynamically creating grid panel into a dynamically creating window through code behind
    By NishaLijo in forum 1.x Help
    Replies: 0
    Last Post: Mar 27, 2012, 10:01 AM
  3. [CLOSED] MVC - buiding Accordion dynamically
    By webppl in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 05, 2011, 4:23 AM
  4. Issue when creating Menuitems dynamically
    By kondareddy1984 in forum 1.x Help
    Replies: 1
    Last Post: Mar 11, 2011, 5:47 PM
  5. Creating Accordion Layout Menu dynamically from AjaxStoreResult
    By webppl in forum 1.x Help
    Replies: 1
    Last Post: Sep 22, 2010, 7:07 AM

Posting Permissions