[CLOSED] dataview templating throwing numerous exception

  1. #1

    [CLOSED] dataview templating throwing numerous exception

    I have a dataview created using the code below. its is throwing exceptions even though its rendering. How can I get rid of the exceptions.


    <ext:Panel 
            ID="homePanel" 
            runat="server" 
            Cls="items-view" 
            Layout="fit"       
            Border="false">
            <Items>                
                <ext:DataView  
                    runat="server" 
                    SingleSelect="true"
                    OverClass="x-view-over" 
                    ItemSelector="div.item-wrap"  ID="DVHomeMenu" IDMode="Explicit" LoadMask="false"          
                   >
                    <Store>
                        <ext:Store runat="server" AutoLoad="true" ID="HomeMenuStore" IDMode="Explicit">                    
                            <Proxy>
                                <ext:AjaxProxy Url='<%# Html.GetUrl("Personalize","UserSetting", "GetWorkManagementPanel") %>' AutoDataBind="true">
                                <Reader>
                                <ext:JsonReader Root="">                                
                                </ext:JsonReader>
                            </Reader>
                                </ext:AjaxProxy>
                            </Proxy>
                            <Model>
                                <ext:Model ID="Model1" runat="server" IDProperty="Id" >
                                    <Fields>
                                        <ext:ModelField Name="Name"  />
                                        <ext:ModelField Name="Items" IsComplex="true" />
                                         <ext:ModelField Name="Id"  />
                                    </Fields>
                                </ext:Model>
                            </Model>                        
                            <Listeners>                          
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <Tpl ID="Tpl1" runat="server" >
                        <Html>
                            <div class="items-ct">
                                <tpl for="."  >
                                    <div>
                                        <h2><div id="WorkManagementPanel" panelId="{Id}">{Name}</div></h2>
                                        <dl>
                                            <tpl for="Items">
                                                <div class="item-wrap" ext:panel="{Accordion}" ext:menu="{MenuItem}">
                                                    <img src="{Icon}" class="icon"/>
                                                    <div>
                                                       <span class="title">{Title}</span>                                                  
                                                    </div>
                                                </div>
                                            </tpl>
                                            <%--<div style="clear:left"></div>--%>
                                         </dl>
                                    </div>
                                </tpl>
                            </div>
                        </Html>
                    </Tpl>
                    <Listeners>               
                   
                        <ContainerClick Fn="HomePanel.viewClick" /> 
                         <ItemClick Fn="HomePanel.itemClick" />                   
                    </Listeners>
                </ext:DataView>


    
     viewClick: function (dv, e) {
            var group = e.getTarget('h2', 3, true);
            if (group) {
                group.up('div').toggleCls('collapsed');
            }
        },
    
        itemClick: function (view, record, item, index, e) {
           
            var item = e.getTarget(".item-wrap");
            if (item) {
                Ext.Msg.alert("Click", "The node with id='" + item.id + "' has been clicked");
                   
                }           
            }
        },
    My controller is shown below

     public string GetWorkManagementPanel()
            {
              
                UserPanels userPanels = new UserPanels();
                userPanels.Mock()
               
                return userPanels.ToString();
            }

    The Model is shown below

    
    public class UserPanels
        {
    
        
            public List<UserPanel> Panels { get; set; }
    
            public UserPanels()
            {
                    Panels=new List<UserPanel>();
            }
      public void Mock()
        {
              UserPanel panel=new UserPanel();
    
                panel.Name = "Management";
                UserPanelItem item1=new UserPanelItem(){Title = "Desk"};
                UserPanelItem item2 = new UserPanelItem() { Title = "Home" };
                UserPanelItem item3 = new UserPanelItem() { Title = "Report" };
                UserPanelItem item4 = new UserPanelItem() { Title = "Summary" };
                panel.Items.Add(item1);
                panel.Items.Add(item2);
                panel.Items.Add(item3);
                  panel.Items.Add(item4);
                userPanels.Panels.Add(panel);
             
    }
            public override string ToString()
            {
                string json = JsonConvert.SerializeObject(Panels, Formatting.Indented);
                return json;
            }
        }
    
    
    public class UserPanel
        {
            public UserPanel()
            {
                Items = new List<UserPanelItem>();
    
                PanelType = new PagePanelType();
                Category = new PagePanelCategory();
            }
     
            public int Id { get; set; }
            
            public string Name { get; set; }
           
            public string Description { get; set; }
    
           
            public PagePanelType PanelType { get; set; }
    
         
            public PagePanelCategory Category { get; set; }
            
          
            public List<UserPanelItem> Items { get; set; }
            
            public override string ToString()
            {
                string json = JsonConvert.SerializeObject(this, Formatting.Indented);
                return json;
            }
        }
    
    
    public class UserPanelItem
        {
            public UserPanelItem()
            {
                Icon = "/content/images/icon.png";
            }
    
            public int PanelItemId { get; set; }
    
            public string Title { get; set; }
    
            public string Icon { get; set; }
    
      
            public string Accordion { get; set; }
           
            public string MenuItem { get; set; }
    
            public override string ToString()
            {
                string json = JsonConvert.SerializeObject(this, Formatting.Indented);
                return json;
            }
        }


    The code is failing in the javascript code below. and when I continue and stepout of the code. The icons are rendered in the dataview. I want to resolve the issue whey the exception are happening. the data structure is fine as it is rendering.
    
    updateIndexes : function(startIndex, endIndex) {
            var ns = this.all.elements,
                records = this.store.getRange(),
                i;
                
            startIndex = startIndex || 0;
            endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
            for(i = startIndex; i <= endIndex; i++){
                ns[i].viewIndex = i;
    >>>>>>>>>>>>>>>>>>>>>>>>>.breaks at this point. because the ns have four items and the records have one item with the four items as sub items<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
                ns[i].viewRecordId = records[i].internalId;
                if (!ns[i].boundView) {
                    ns[i].boundView = this.id;
                }
            }
        },

    Then when an item is clicked. it throws another exception at

     o is undefined.
     getKey : function(o){
             return o.id;
        }
    Last edited by Daniil; Mar 09, 2012 at 6:59 AM. Reason: [CLOSED]
  2. #2
    Hi,

    You have incorrect ItemSelector, ItemSelector must reference to the item from main tpl tag because it corresponds real record(but you reference to item from sub tpl)

    You have to reference to first div after '<tpl for="." >'
    See
    https://examples2.ext.net/#/DataView/Advanced/Grouping/
  3. #3
    Thank you. Its works well now.

Similar Threads

  1. [CLOSED] DataView to DataView Drag and Drop
    By paulc in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 10, 2012, 8:19 PM
  2. [CLOSED] Treegridcolumn templating
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 09, 2011, 6:58 PM
  3. [CLOSED] Templating
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 20, 2011, 4:03 PM
  4. [CLOSED] [1.0] Calendar throwing exception
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 25, 2011, 12:21 AM
  5. [CLOSED] MultiSelect throwing an exception during Ajax event
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 19, 2008, 12:07 PM

Posting Permissions