[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

Code:

---

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>

Hi Hari,

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


Example

Code:

---

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.

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

Code:

---




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/

Hi,

Please provide simple test sample which reproduces the problem

Please find code snippet for your perusal.

Code:

---

'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.

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)

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.

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

Code:

---

<%@ 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>

---

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.

Hi,

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

Code:

---

Renderer = { Handler = "var r = StoreCombo.getById(value);if (Ext.isEmpty(r)) {return '';} return r.data.Name;" }

---

Thanks , data got binded. But, Whenever I select combo-box in gridpanel, I am not able to see anything in Combo-Box items.
Please see attached image -
(1)"default view.jpg"
(2)"2nd combo with invisible data.jpg"
(3)"3rd combo with invisible data.jpg"


If a select any of blank fields, it shows nothing as selected and that cell is marked as editable(image file -(4) "data not getting populated when i select item from blank combo and then move to other cell without tab.jpg"), blank cell is explicitly marked in image.

If I select something from Invisible items of combo-box and then press tab , It shows last selected value - pls see image ((5)"data getting populated when i select item from blank combo and then pres tab.jpg")

P.S. - Zipped file "grid with invisible data_2 n 3.zip" contains image no. 2 and 3
Zipped file "data getting shown if tab is pressed.zip" contains image no. 4 and 5

Hi,

It seems the problem in the display field. We need a test sample which we can run locally

Hi,

Please find enclosed sample solution for your perusal.

This time i am not able to see my grid data, but data difference can be seen in 2 different combo-box

P.s. - I am using 0.8.1 coolite controls

Hi,

Always check RecordField name and propety name (must be equal, case sensitive)

1. Move OnLoad code to the OnInit for correct viewstate restoring

Code:

---

Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
        MyBase.OnInit(e)

        BuildUControl()
        Dim inlinQuery As New StringBuilder()
        BindDatatoControls()
    End Sub

---

2. Replace in the BindDatatoControls

Code:

---

JsonReader1.Fields.Add("id")

---

by

Code:

---

JsonReader1.Fields.Add("ID")

---

because GridData class has no 'id' property (there is 'ID'). Please remember that all fields names are case sensitive

3. Rename properties 'ID', 'Name' in the Customer and Department classes to the 'id', 'val'
because in the store's fields you use 'id', 'val' names but properties with such names are not presented in your data classes

It worked partially. I was able to see my combo-box within gridpanel getting populated. But, grid didnot populate. Also, if i change any item within Combo-box, that cell is marked edited with blank data.

I am curious to know that while we do normal markup based development, where ASP.net takes care of creating these controls at the Page_Init and we bind the data at the load event, we dont get such issue. What is that I am doing different here from normal ASP.net.

I need urgent help on this.

It worked partially. I was able to see my combo-box within gridpanel getting populated. But, grid didnot populate. Also, if i change any item within Combo-box, that cell is marked edited with blank data.

I am curious to know that while we do normal markup based development, where ASP.net takes care of creating these controls at the Page_Init and we bind the data at the load event, we dont get such issue. What is that I am doing different here from normal ASP.net.

I need urgent help on this. Thanks


P.s- I saw this thread marked as Solved, though it has been resolved partially.

Hi,

Are you sure that you apply my changes? Just check once again. If you don't see the data in the grid that I am sure that renderer cannot find the data, check again fields names

Here is your changed test application

It worked.

How to get list of all changed records on post back?

Hi,

You have to save grid

Code:

---

GridPanel1.save();

---

See examples explorer, it contains many examples with grid saving
https://examples1.ext.net/#/GridPanel/DataSource_Update/SqlDataSource/
All examples from : GridPanel/WebService_Connections/