[CLOSED] Help with grids in codebehind inside tabs

  1. #1

    [CLOSED] Help with grids in codebehind inside tabs

    Hello,

    I have just started with this libraries and I have built an example building a bage with all code behind, which involves a viewport with a center panel which containt two tabs and inside one of the tabs a grid which obtains information from an httpproxy.
    The examle is working, but I have 2 problems that I am not able to solve:
    1- I cannot force the grid to fill the whole Tab, althoug is inside a fitlayout.
    2- I cannot create a SortInfo inside the store, when I uncoment the line
    store.SortInfo=new SortInfo("Common",Coolite.Ext.Web.SortDirection.ASC);
    it crashes.

    By the way I discovered a small change between versions 0.7 and 0.8/svn which makes 0.7 code stop working.
    PagingToolBar has been renamed to PagingToolbar in version 0.8.

    The sample is based on code found in this forum as well as code provide in the coolite samples.



    Here is all the code of the example:
    default.aspx

    <%@ Page
        Language           = "C#"
        AutoEventWireup    = "true"
        Inherits           = "testjson.Default"
        ValidateRequest    = "false"
        EnableSessionState = "true"
    %>
    
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!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></title>        
    </head>
    <body>
        <form id="form1" runat="server">
           <ext:ScriptManager ID="ScriptManager1" runat="server" />      
        </form>
    </body>
    </html>
    default.aspx.cs

    using System;
    using System.Data;
    using System.Web.UI;
    
    
    using Coolite.Ext.Web;
    
    namespace testjson {
        /// <summary>
        /// Description of MainForm.
        /// </summary>
        public class Default : Page {
            private Store store;
            private GridPanel grid;
    
            protected void Page_Load(object sender, EventArgs e) {
                //creates store
                BuildStore();
                //creates the grid
                BuildGrid();
                //add store to the page
                this.Page.Form.Controls.Add(store);
                //create a viewport with a center panel with two tabs in one of
                //the tabs the grid whih shoud fill all the tab
                /////////////////
                // WEST REGION //
                /////////////////
                // Make Panel for West Region
                Coolite.Ext.Web.Panel west = new Coolite.Ext.Web.Panel();
                west.ID = "WestPanel";
                west.Title = "West";
                west.Width = System.Web.UI.WebControls.Unit.Pixel(225);
                west.Html="This is the west panel";
    
                ///////////////////
                // CENTER REGION //
                ///////////////////
                // Make TabPanel for Center Region
                TabPanel center = new TabPanel();
                center.ID = "CenterPanel";
                center.ActiveTabIndex = 0;
                // Make Tab
                Tab tab1 = new Tab();
                tab1.ID = "Tab2";
                tab1.Title = "Center";
                tab1.Border = false;
                tab1.BodyStyle = "padding:6px;";
                //add grid to tab1
                FitLayout fit=new FitLayout();
                fit.Items.Add(grid);
                tab1.BodyContainer.Controls.Add(fit);
                //create tab2
                Tab tab2 = new Tab();
                tab2.ID = "Tab1";
                tab2.Title = "Close Me";
                tab2.Closable = true;
                tab2.Border = false;
                tab2.BodyStyle = "padding:6px;";
                tab2.Html = "Closable Tab";
                // Add Tab's to TabPanel
                center.Tabs.Add(tab1);
                center.Tabs.Add(tab2);
                // Make BorderLayout container for ViewPort
                BorderLayout layout = new BorderLayout();
                // Set West Region properties
                layout.West.MinWidth = System.Web.UI.WebControls.Unit.Pixel(225);
                layout.West.MaxWidth = System.Web.UI.WebControls.Unit.Pixel(400);
                layout.West.Split = true;
                layout.West.Collapsible = true;
                // Add Panels to BorderLayout Regions
                layout.West.Items.Add(west);
                layout.Center.Items.Add(center);
                // Make ViewPort to fold everything
                ViewPort vp = new ViewPort();
                vp.ID = "ViewPort1";
    
                // Add BorderLayout to ViewPort
                vp.Items.Add(layout);
    
                this.Page.Form.Controls.Add(vp);
            }
    
    
            protected void BuildStore() {
                store = new Store();
                store.ID = "Store1";
                store.AutoLoad=true;
                store.RemoteSort=true;
                HttpProxy proxy=new HttpProxy();
                proxy.Url="JSONHandler.ashx";
                proxy.Method=HttpMethod.GET;
                store.Proxy.Add(proxy);
                JsonReader reader=new JsonReader();
                reader.Root="plants";
                reader.TotalProperty="totalCount";
                store.Reader.Add(reader);
                store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Common",RecordFieldType.String));
                store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Botanical",RecordFieldType.String));
                store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Light"));
                store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Price",RecordFieldType.Float));
                store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Availability",RecordFieldType.Date));
                store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Indoor",RecordFieldType.Boolean));
                //TODO- does not work why???
                //store.SortInfo=new SortInfo("Common",Coolite.Ext.Web.SortDirection.ASC);
                store.AutoLoadParams.Add(new Coolite.Ext.Web.Parameter("start","0",ParameterMode.Raw));
                store.AutoLoadParams.Add(new Coolite.Ext.Web.Parameter("limit","10",ParameterMode.Raw));
            }
    
            protected void BuildGrid() {
                grid = new GridPanel();
                grid.ID = "GridStore1";
                grid.AutoScroll = true;
                grid.AutoHeight = true;
                grid.StoreID = store.ID;
                grid.StripeRows = true;
                grid.Header = false;
                grid.AutoWidth = true;
                grid.LoadMask.ShowMask = true;
                grid.LoadMask.Msg = "Loading...";
                grid.SelectionModel.Add(new RowSelectionModel());
                grid.AjaxEvents.RowClick.Delay=100;
                grid.AjaxEvents.RowClick.EventMask.Msg="loading";
                grid.AjaxEvents.RowClick.EventMask.ShowMask=false;
                grid.AjaxEvents.RowClick.Event+= Row_Click;
                grid.AjaxEvents.RowClick.ExtraParams.Add(new Parameter("name","#{GridStore1}.getSelectionModel().getSelected().data.Botanical",ParameterMode.Raw));
                Coolite.Ext.Web.Column _col = new Coolite.Ext.Web.Column();
                _col.ColumnID = "Common";
                _col.Header = "Common Name";
                _col.DataIndex = "Common";
                _col.Width=220;
                _col.Sortable=true;
                grid.ColumnModel.Columns.Add(_col);
                _col = new Coolite.Ext.Web.Column();
                _col.Header = "Light";
                _col.DataIndex = "Light";
                _col.Width=130;
                _col.Sortable=true;
                grid.ColumnModel.Columns.Add(_col);
                _col = new Coolite.Ext.Web.Column();
                _col.Header = "Price";
                _col.DataIndex = "Price";
                _col.Width=70;
                _col.Sortable=true;
                grid.ColumnModel.Columns.Add(_col);
                _col = new Coolite.Ext.Web.Column();
                _col.Header = "Availability";
                _col.DataIndex = "Availability";
                _col.Width=95;
                _col.Sortable=true;
                grid.ColumnModel.Columns.Add(_col);
                _col = new Coolite.Ext.Web.Column();
                _col.Header = "Indoor";
                _col.DataIndex = "Indoor";
                _col.Width=55;
                _col.Sortable=true;
                grid.ColumnModel.Columns.Add(_col);
                Coolite.Ext.Web.PagingToolbar pager = new Coolite.Ext.Web.PagingToolbar();
                pager.PageSize = 10;
                pager.StoreID=store.ID;
                pager.EmptyMsg="No plants to display";
                pager.DisplayMsg="Displaying plants {0} - {1} of {2}";
                pager.ID="PagingToolBar1";
                grid.BottomBar.Add(pager);
            }
    
    
            void Row_Click(object sender, AjaxEventArgs e) {
                if (e.ExtraParams.Count>0) {
                    string  name=e.ExtraParams["name"];
                    Ext.MessageBox.Alert("alert",name).Show();
                }
            }
    
        }
    }
    JsonHandler.cs

    using System;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.Services;
    
    using Coolite.Ext.Web;
    
    namespace testjson {
        /// <summary>
        /// Summary description for $codebehindclassname$
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        public class JsonHandler : IHttpHandler {
            private HttpContext context;
    
            public void ProcessRequest(HttpContext context) {
                this.context=context;
                context.Response.ContentType = "text/json";
                Paging<Plant> plants = Plant.PlantsPaging(this.Start, this.Limit, this.Sort, this.Dir, "");
    
                context.Response.Write(string.Format("{{totalCount:{1},'plants':{0}}}", JSON.Serialize(plants.Data), plants.TotalRecords));
            }
    
            public bool IsReusable {
                get {
                    return false;
                }
            }
    
            int Start {
                get {
                    string startStr = context.Request["start"];
                    if (string.IsNullOrEmpty(startStr)) {
                        throw new NullReferenceException("Start is absent");
                    }
    
                    return int.Parse(startStr);
                }
            }
    
            int Limit {
                get {
                    string limitStr = context.Request["limit"];
                    if (string.IsNullOrEmpty(limitStr)) {
                        throw new NullReferenceException("Limit is absent");
                    }
    
                    return int.Parse(limitStr);
                }
            }
    
            string Sort {
                get {
                    string sort = context.Request["sort"]??"";
                    return sort;
                }
            }
    
            string Dir {
                get {
                    string dir = context.Request["dir"]??"";
                    return dir;
                }
            }
    
        }
    }
    JSONHandler.ashx


    <%@ WebHandler  Class="testjson.JsonHandler" Language="C#" CodeBehind="JSONHandler.ashx.cs" %>
    Plant.cs
    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.Globalization;
    using System.Web;
    using System.Xml;
    
    using Coolite.Ext.Web;
    
    namespace testjson {
        /// <summary>
        /// Description of Plant.
        /// </summary>
        public class Plant {
    
            public Plant(bool indoor, DateTime availability, decimal price, string light, string zone, string botanical, string common) {
                this.Indoor = indoor;
                this.Availability = availability;
                this.Price = price;
                this.Light = light;
                this.Zone = zone;
                this.Botanical = botanical;
                this.Common = common;
            }
    
            public Plant() {
            }
    
            public string Common {
                get;
                set;
            }
    
            public string Botanical {
                get;
                set;
            }
    
            public string Zone {
                get;
                set;
            }
    
            public string ColorCode {
                get;
                set;
            }
    
            public string Light {
                get;
                set;
            }
    
            public decimal Price {
                get;
                set;
            }
    
            public DateTime Availability {
                get;
                set;
            }
    
            public bool Indoor {
                get;
                set;
            }
    
    
            public static Paging<Plant> PlantsPaging(int start, int limit, string sort, string dir, string filter) {
                List<Plant> plants = TestData;
    
                if (!string.IsNullOrEmpty(filter) &amp;&amp; filter != "*") {
                    plants.RemoveAll(plant => !plant.Common.ToLower().Contains(filter.ToLower()));
                }
    
                if (!string.IsNullOrEmpty(sort)) {
                    plants.Sort(delegate(Plant x, Plant y) {
                        object a;
                        object b;
    
                        int direction = dir == "DESC" ? -1 : 1;
    
                        a = x.GetType().GetProperty(sort).GetValue(x,null);
                        b = y.GetType().GetProperty(sort).GetValue(y, null);
    
                        return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
                    }
                               );
                }
    
                if ((start + limit) > plants.Count) {
                    limit = plants.Count - start;
                }
    
                List<Plant> rangePlants = (start < 0 || limit < 0) ? plants : plants.GetRange(start, limit);
    
                return new Paging<Plant>(rangePlants, plants.Count);
            }
    
    
            public static List<Plant> TestData {
                get {
                    XmlDocument xmlDoc = new XmlDocument();
                    xmlDoc.Load(HttpContext.Current.Server.MapPath("Plants.xml"));
                    List<Plant> data = new List<Plant>();
                    IFormatProvider culture = new CultureInfo("en-US", true);
    
                    foreach (XmlNode plantNode in xmlDoc.SelectNodes("catalog/plant")) {
                        Plant plant = new Plant();
    
                        plant.Common = plantNode.SelectSingleNode("common").InnerText;
                        plant.Botanical = plantNode.SelectSingleNode("botanical").InnerText;
                        plant.Zone = plantNode.SelectSingleNode("zone").InnerText;
                        plant.ColorCode = plantNode.SelectSingleNode("colorCode").InnerText;
                        plant.Light = plantNode.SelectSingleNode("light").InnerText;
                        plant.Price = decimal.Parse(plantNode.SelectSingleNode("price").InnerText, culture);
                        plant.Availability = DateTime.Parse(plantNode.SelectSingleNode("availability").InnerText, culture);
                        plant.Indoor = bool.Parse(plantNode.SelectSingleNode("indoor").InnerText);
    
                        data.Add(plant);
                    }
    
                    return data;
                }
            }
    
        }
    
    }




  2. #2

    RE: [CLOSED] Help with grids in codebehind inside tabs

    Hi,

    1. You did not add fit layout of Tab1 inside tab.
          ....
          FitLayout fit=new FitLayout();
          tab1.BodyControls.Add(fit); //new code line
          fit.Items.Add(grid);
          ....
    2.Any layout should be added to the BodyControls collection (not in the Items)
                // Add BorderLayout to ViewPort
                vp.BodyControls.Add(layout);  //changed code line
    3. Remove the following lines from grid
                grid.AutoScroll = true; // grid doesn't use it (no effect)
                grid.AutoHeight = true; // grid inside FitLayout which manages grid size, this property breaks FitLayout
                grid.AutoWidth = true;  // see above
    4. I can't reproduce any problem with SortInfo. What you mean "it crashes"? Javascript error, server side exception or something else?
  3. #3

    RE: [CLOSED] Help with grids in codebehind inside tabs

    Thak you for the reply,

    I cannot reproduce the problem I had with SortInfo, now it does work. It was a runtime error about it could not serialize the SortInfo object, but now it seems that it works ok. If I can reproduce it I'll post it again.

    The other problem related to layout is solved with your reply.

    Just a latest question. should I add both lines?:

        tab1.BodyControls.Add(fit);
        tab1.BodyContainer.Controls.Add(fit);
    or just

       
    tab1.BodyControls.Add(fit);

    Because it works in both ways.But for your reply I think the correct answer is to use just the BodyControls, is it?
  4. #4

    RE: [CLOSED] Help with grids in codebehind inside tabs

    Hi,

    BodyControls is just shortcut for BodyContainer.Controls. So, use only one of them
  5. #5

    RE: [CLOSED] Help with grids in codebehind inside tabs

    Thanks for the clarification.


    You can set the thread as Solved.

    Regards,

Similar Threads

  1. [CLOSED] Move tabs Tabs Style Google Chrome
    By majunior in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 30, 2013, 12:58 PM
  2. Replies: 3
    Last Post: Sep 15, 2010, 8:29 PM
  3. [CLOSED] [0.8.2] Two grids (Grid inside FormLayout inside FitLayout)
    By Yevgeniy in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 16, 2010, 2:52 PM
  4. Two Grids get value
    By JsonTerre in forum 1.x Help
    Replies: 0
    Last Post: Mar 09, 2009, 11:04 PM
  5. DnD Between 2 Grids
    By davidhoyt in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 13, 2009, 2:02 AM

Posting Permissions