[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>
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
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.
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
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/
RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel
Hi,
Please provide simple test sample which reproduces the problem
RE: [CLOSED] How to add renderer to ComboBox Editor within dynamic GridPanel
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.
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)
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.
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
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>
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.
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
Code:
Renderer = { Handler = "var r = StoreCombo.getById(value);if (Ext.isEmpty(r)) {return '';} return r.data.Name;" }