[CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel



    Hi,

    I have a dynamic GridPanel in which I am adding ComboBox Editor.
    Please let me know
    (i)How can I create Renderer for this Column
    (ii) How can I bind ComboBox to a Store and later bind that store to a datasource.


    Code snippet enclosed for your persual

    Public Class Grid
     Inherits Coolite.Ext.Web.GridPanel
     Public Sub New ()
      MyBase.New()
      Me.ID="Grid1"
      Me.AutoScroll = True
      Me.AutoHeight = True
      Me.AutoWidth = True</p>
    
    
     'All columns within Grid is of type Combo</p>
    
    
      For tCounterField = 1 to 3 
       Dim gridColField As Coolite.Ext.Web.Column = New Coolite.Ext.Web.Column()</p>
    
    
              gridColField.ColumnID = ("CLM_" + tCounterField.ToString())
              gridColField.Header = "Header  " + tCounterField .ToString()
       gridColField.DataIndex =tCounterField .ToString()
         'Adding Editor Control 
       Dim objCombo As New Coolite.Ext.Web.ComboBox()
              objCombo.ID = "col" + tCounterField.ToString()
       gridColField.Editor.Add(objCombo)
      Next 
     End Sub
    End Class </p>
    
    
    Public Class Render
     Public Sub New()
      Dim objGrid As New Grid()
      Dim _store As Store = New Store()
                    _store.ID = "store" + objUGrid.ID
                    Me.Controls.Add(_store) </p>
    
    
      objGrid.StoreID = _store.ID </p>
    
    
     End Sub  
    End Class
    
    Public class Bind
    'Here I am binding Store to a DataSource after creating JSonReader for it
    End Class
    I am able to bind Grid Dynamically</p>
  2. #2

    RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel

    Hi Hari,

    (i). You create a new Renderer object and add to the .Renderer property of the Column.


    Example


    this.GridPanel1.ColumnModel.Columns[1].Renderer = new Renderer { Format = RendererFormat.UsMoney };

    (ii). Define the Store for ComboBox, then set the .StoreID property of the ComboBox to the .ClientID of the Store. Just ensure you add the Store to the Controls Collection before/higher than the GridPanel/ComboBox.


    Hope this helps.


    Geoffrey McGill
    Founder
  3. #3

    RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel

    Hi,

    I tried doing the code you suggested. But i am unable to show new selected text from combo-box.

    In my base class, a create a blank Store
    
    
    
    Dim storeComboField As Store = New Store()
    storeComboField.ID = "store" + objCombo.ID
    objCombo.StoreID = storeComboField.ID
    storeList.Add(storeComboField)

    In my UIControl class
    I am filling up Store


    Issue is ,when I change value of combo-box, it displaying blank instead of text.

    I need a javascript for renderer like following example of Coolite->https://examples1.ext.net/#/GridPanel/Data_Representation/Editor_Field_Mapping/
  4. #4

    RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel

    Hi,

    Please provide simple test sample which reproduces the problem
  5. #5

    RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel

    Please find code snippet for your perusal.

    'Class UGrid 
    
    
    
    
    Public Class DemoGrid
    Inherits Coolite.Ext.Web.GridPanel
    
    
    Public Sub New(ByRef storeList As List(Of Store))
    
    
    MyBase.New()
       Me.ID ="temp1"
        Me.AutoScroll = True
        Me.AutoHeight = True
        Me.AutoWidth = True
    'Custom Property
        Me.ColCount=4
    
    
    
        Dim tempField As String = String.Empty
    
    
    
    ' all editor column of type ComboBox
    For tCounterField = 1 To Me.ColumnCountField
    
         Dim gridColField As Coolite.Ext.Web.Column = New Coolite.Ext.Web.Column()
        gridColField.ColumnID = ("CLM_" + tCounterField.ToString())
        gridColField.Header = tempField
        tempField ="col" + tCounterField .Tostring()
    
        gridColField.DataIndex = tempField
        Dim objCombo As New Coolite.Ext.Web.ComboBox()
        objCombo.ID = "col" + tCounterField.ToString()
        objCombo.Editable = False
        objCombo.EmptyText = "Select ..."
    
        Dim storeComboField As Store = New Store()
        storeComboField.ID = "store" + objCombo.ID
        objCombo.StoreID = storeComboField.ID
        storeList.Add(storeComboField)
        gridColField.Editor.Add(objCombo)
    
    
        Me.ColumnModel.Columns.Add(gridColField)
    
    
    Next    End Sub
    End Class
    
    
    '-----------------------------------------------------------------------
    '2nd class 
    '-----------------------------------------------------------------------
    
    
    
    Public Class DemoUserControl
        Inherits System.Web.UI.UserControl
    
        Private xControlCollection As System.Web.UI.ControlCollection
            Public Property ControlCollection() As System.Web.UI.ControlCollection
            Get
                Return xControlCollection
            End Get
    
    
            Set(ByVal value As System.Web.UI.ControlCollection)
                xControlCollection = value
            End Set
        End Property
    
    
    
    Dim storeList As List(Of Store) = New List(Of Store)
    
    
    
    Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
        MyBase.OnInit(e)
        BuildControl()
    End Sub
    
    
    Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)
    
    
    
    BindDatatoControls()
    
    
    
    End Sub
    
    
    
    
    
    Private Function getStore(ByVal StoreID As String) As Store
        For Each objstore As Store In storeList
            If (objstore.ID.ToLower().Trim().Equals(StoreID.Trim().ToLower())) Then
                Return objstore
            End If
        Next
        Return Nothing
    End Function
    
    
    
    
    
    
    
    Private Sub BindDatatoControls()
    
    
    For Each Ctl as Control in xControlCollection
        
    
    
    Dim objGrid As DemoGrid =DirectCast(DemoGrid ,Ctl)
    
    'Below string gets data in order of controls i.e. First Select gets data for Grid,2nd for first column of grid of editor 'type combo-box and so on....
    
    
    
    Dim Tablequery As String ="Select col1,col2,col3,col4 from Table1;Select ID,Descript from Table2;Select ID,Descript from Table3;Select ID,Descript from Table4;Select ID,Descript from Table5;"
    
    
    Dim storeField As Store = getStore(objGrid.StoreID)
    
    
    
    
    Dim dsGrid As DataSet = dao.GetUControlData(Tablequery)
    storeField.Reader.Add(New JsonReader())
    objGrid.StripeRows = True
    objGrid.LoadMask.ShowMask = True
    objGrid.LoadMask.Msg = "Loading..."
    '-----------------------------
    'Adding Pager
    '-----------------------------
    Dim pager As PagingToolbar = New PagingToolbar()
    pager.PageSize = 10
    objGrid.BottomBar.Add(pager)
    '-----------------------------
    'Adding Datasource to store
    '-----------------------------
    storeField.DataSource = dsGrid.Tables(0)
    
    
    
    '-----------------------------
    Dim firstCol As String = String.Empty
    
    
    nIteratorField = 0
    
    
    For Each column As DataColumn In dsGrid.Tables(0).Columns
        ' ADD Column to the Reader
        If nIteratorField = 0 Then
            DirectCast(storeField.Reader(0), Coolite.Ext.Web.JsonReader).ReaderID = column.ColumnName
            firstCol = column.ColumnName
        End If
    
        storeField.Reader(0).Fields.Add(New Coolite.Ext.Web.RecordField(column.ColumnName))
        nIteratorField += 1
    Next
    
    
    Dim listenerfn As String = String.Empty
    
    
    For Each GridCol As Coolite.Ext.Web.Column In objGrid.ColumnModel.Columns
            Select Case GridCol.Editor(0).GetType().ToString().ToLower().Trim().Split(CChar("."))(GridCol.Editor(0).GetType().ToString().ToLower().Trim().Split(CChar(".")).Length - 1)
                Case "combobox"
    
    
                    Dim gridCombo As Coolite.Ext.Web.ComboBox = DirectCast(GridCol.Editor(0), Coolite.Ext.Web.ComboBox)
                    Dim storeComboField As Store = getStore(gridCombo.StoreID)
                    comboGridIteratorField += 1
    
    
                    If (comboGridIteratorField <= dsGrid.Tables.Count) Then
    
    
    
                            If (storeComboField IsNot Nothing) Then
                                Me.Controls.AddAt(0, storeComboField)
                                storeComboField.Reader.Add(New JsonReader())
                                nIteratorField = 0
                                For Each column As DataColumn In dsGrid.Tables(comboGridIteratorField).Columns
                                    If nIteratorField = 0 Then
                                    DirectCast(storeComboField.Reader(0), Coolite.Ext.Web.JsonReader).ReaderID = column.ColumnName
                                    gridCombo.ValueField = column.ColumnName
                                Else
                                    storeComboField.Reader(0).Fields.Add(New Coolite.Ext.Web.RecordField(column.ColumnName))
                                    gridCombo.DisplayField = column.ColumnName
                                End If
                                nIteratorField += 1
                            Next
                            storeComboField.DataSource = dsGrid.Tables(comboGridIteratorField)
                            storeComboField.DataBind()
                            listenerfn = " var departmentRenderer" + comboGridIteratorField.ToString() + " = function(value) { var r = (Ext.get(" + objGrid.ClientID + ")).getById(value); if (Ext.isEmpty(r)) { return null;} return r.data.descript; };"
    
    
                            Coolite.Ext.Web.ScriptManager.GetInstance(Me.Page).RegisterOnReadyScript(listenerfn)            
                            GridCol.Renderer.Fn = "departmentRenderer" + comboGridIteratorField.ToString()
    
    
                    End If
            End If
        Exit Select
    End Select
    
    
    Next
    
    
    storeField.DataBind()
    
    
    
    Next
    End Sub
    
    Protected Overridable Sub BuildUControl()
        
    
    
    Dim tblLayout as New TableLayout()
    
    
    With tblLayout
    
    
    .Columns = taleLayoutColumnCountField
    
    
    End With
    
    
        Dim objUGrid As DemoGrid= New UGrid( storeList)
        Dim storeGridField As Store = New Store()
        storeGridField.ID = "store" + objUGrid.ID
        Me.Controls.Add(storeGridField)
        objUGrid.StoreID = storeGridField.ID
        storeList.Add(storeGridField)
        cell1.Items.Add(objUGrid)
    
    
    
        xControlCollection.Add(objUGrid)
    
    
        tblLayout.Cells.Add(cell1)
    End Sub
    
    End Class
    When I create UserControl inherited from Above code, I get Grid with data, but when i Select any item from Combo-box of grod column , it sets seelcted data to blank.
  6. #6

    RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel

    Hi,

    Please create test sample which can be tested on our side without any change. I am not sure how to use correctly the posted code (it is hard to analyze code without a posibility to test it)
  7. #7

    RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel

    Please take sample available at - http://forums.ext.net/showthread.php...4393-16-1.aspx

    Please add 2 combo-box as Editor to column .Bind these 2 combo-boxes and add a Listener for each of them.


    P.S. - I am using Coolite 0.8.1 .

    Thanks.
    Last edited by geoffrey.mcgill; Feb 22, 2011 at 2:37 AM.
  8. #8

    RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel

    Hi,

    I am not sure what that sample should demonstrate to me. If I add comboboxes as editors to that example then what I should to see? What difference between that example and example from the examples explorer (Editor Field Mapping) (if consider the column editors)?

    add a Listener for each of them.
    What listeners should I add for them?

    As I understood you need to set correct data after editing from the combo editor (but you still did not provide test sample). The following sample demonstrate it
    https://examples1.ext.net/#/GridPane...Field_Mapping/

    Does the above sample work for you? If yes then please demonstrate how do you try to implement it in your application. We need test sample which can be tested locally without any changes

    I rewrote Editor Field Mapping example using code behind
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ 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">
    
    <script runat="server">
    
            protected void Page_Load(object sender, EventArgs e)
            {
                this.BuildGrid();            
            }
    
            private void BuildGrid()
            {
                var storeCombo = new Store
                {
                    ID = "StoreCombo",
                    Reader =
                    {
                        new JsonReader
                        {
                            ReaderID = "ID",
                            Fields = 
                            {
                                new RecordField("ID", RecordFieldType.Int),
                                new RecordField("Name")                            
                            }   
                        }
                    }
                };
                this.Form.Controls.Add(storeCombo);
                storeCombo.DataSource = Department.GetAll();
                storeCombo.DataBind();
                
    
                var store1 = new Store
                {
                    ID = "Store1",
                    Reader =
                    {
                        new JsonReader
                        {
                            ReaderID = "ID",
                            Fields = 
                            {
                                new RecordField("ID", RecordFieldType.Int),
                                new RecordField("Name"),
                                new RecordField("Surname"),
                                new RecordField("DepartmentId"),                                                        
                            }   
                        }
                    }
                };
                this.Form.Controls.Add(store1);
                store1.DataSource = Employee.GetAll();
                store1.DataBind();
    
                var grid = new GridPanel
                {
                    ID = "GridPanel1",
                    EnableViewState = true,
                    AutoHeight = true,
                    StoreID = "Store1",
                    Title = "List",
                    Icon = Icon.Application,
    
                    ColumnModel =
                    {
                        Columns =
                        {
                            new Column
                            {
                                Header = "ID",
                                Sortable=true,
                                DataIndex="ID"   
                            },
                            
                            new Column
                            {
                                Header = "NAME",
                                Sortable=true,
                                DataIndex="Name"   
                            },
                            
                            new Column
                            {
                                Header = "SURNAME",
                                Sortable=true,
                                DataIndex="Surname"   
                            },
                            
                            new Column
                            {
                                Header = "Department",
                                Width=Unit.Pixel(240),
                                DataIndex="DepartmentId",
                                Renderer = 
                                {
                                   Fn = "departmentRenderer" 
                                },
                                Editor = 
                                {
                                   new ComboBox
                                   {
                                       ID = "cbDepartment",
                                       Shadow = ShadowMode.Drop,
                                       Mode = DataLoadMode.Local,
                                       TriggerAction = TriggerAction.All,
                                       ForceSelection = true,
                                       StoreID="StoreCombo",
                                       DisplayField="Name",
                                       ValueField="ID"
                                   }   
                                }                               
                            }                        
                        }
                    }
                };
                this.Form.Controls.Add(grid);
            }
    
            public class Employee
            {
                public int ID { get; set; }
                public string Name { get; set; }
                public string Surname { get; set; }
                public Department Department { get; set; }
    
                public int DepartmentId
                {
                    get { return this.Department != null ? this.Department.ID : -1; }
                }
    
                public static List<Employee> GetAll()
                {
                    return new List<Employee>
                               {
                                   new Employee
                                       {
                                           ID = 1,
                                           Name = "Nancy",
                                           Surname = "Davolio",
                                           Department = Department.GetAll()[0]
                                       },
                                   new Employee
                                       {
                                           ID = 2,
                                           Name = "Andrew",
                                           Surname = "Fuller",
                                           Department = Department.GetAll()[2]
                                       }
                               };
                }
            }
    
            public class Department
            {
                public int ID { get; set; }
                public string Name { get; set; }
    
                public static List<Department> GetAll()
                {
                    return new List<Department>
                               {
                                   new Department {ID = 1, Name = "Department A"},
                                   new Department {ID = 2, Name = "Department B"},
                                   new Department {ID = 3, Name = "Department C"}
                               };
                }
            }
    
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Coolite Toolkit Example - Field Mapping</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
        <script type="text/javascript">
            var departmentRenderer = function(value) {
                var r = StoreCombo.getById(value);
    
                if (Ext.isEmpty(r)) {
                    return "";
                }
    
                return r.data.Name;
            }
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />    
        </form>
    </body>
    </html>
  9. #9

    RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel



    As per the code snippet
    [CODE]
    <script type="text/javascript">
    var departmentRenderer = function(value) {
    var r = StoreCombo.getById(value);

    if (Ext.isEmpty(r)) {
    return "";
    }

    return r.data.Name;
    }
    </script>

    [\code]

    provided by you it has a static Javascript function , where as in my case this would be added on runtime i.e a dynamic javascript being written on server side. For each combo box editor with the grid panel.
  10. #10

    RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel

    Hi,

    Create required javascript code for the renderer as string and set it for the Handler


    Renderer = { Handler = "var r = StoreCombo.getById(value);if (Ext.isEmpty(r)) {return '';} return r.data.Name;" }
Page 1 of 2 12 LastLast

Similar Threads

  1. Combobox Grid Editor Dynamic
    By sysmo in forum 1.x Help
    Replies: 0
    Last Post: Aug 08, 2012, 7:36 PM
  2. Dynamic Gridpanel - Add Renderer - how to?
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Apr 02, 2012, 2:37 PM
  3. [CLOSED] [0.8.1] Link Renderer redirect to AjaxMethod Dynamic GridPanel
    By cobiscorp in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 28, 2010, 11:19 PM
  4. Combobox Renderer in Gridpanel bug
    By Washburn in forum 1.x Help
    Replies: 19
    Last Post: Apr 27, 2009, 10:06 AM
  5. Replies: 2
    Last Post: Mar 30, 2009, 5:52 PM

Posting Permissions