PDA

View Full Version : [CLOSED] Dynamic grid panel



velusoft
Sep 09, 2015, 8:50 AM
I am building the gird panel dynamically by code. Through direct method call , we are building this grid(adding all the columns dynamically).
After building we are calling GridPanel.Reconfigure(). It is working fine and all the columns alignment and width are setting properly.

but, When i am trying to build this grid in the page load instead of direct method call, it is biding and showing data but the column width are setting properly as i coded the width for dynamic column.

I read if we build dynamic grid in the direct method call , we need to call the method GridPanel.Reconfigure() at the end.

Is there any other method like GridPanel.Reconfigure() for building grid in the page load.

Code :





<ext:GridPanel ID="grdERL" runat="server" MinHeight="0" MaxHeight="690" EnableColumnMove="false" Width="1220" Hidden="true">
<Store>
<ext:Store ID="strERL" runat="server" IgnoreExtraFields="false">
<Model>
<ext:Model ID="Model39" runat="server" />
</Model>
</ext:Store>
</Store>
<View>
<ext:GridView ID="gvERL" runat="server" DeferEmptyText="false"
EmptyText="<%$ Resources:WebResource,GeneralMsg_NoRecordsFound %>" StripeRows="false" TrackOver="false" />
</View>
<ColumnModel>
<Columns>
<ext:Column ID="Column26"
runat="server"
Text="DUMMY"
DataIndex="DUMMY"
Width="0"
Locked="true"
Sortable="false">
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>


code behind:

[DirectMethod(ShowMask=true, Target=MaskTarget.Page)]
public void BindScorecardERL()
{
//string strProgramId = hdnSelectedProgramIds.Text;
//strProgramId = strProgramId.Split(',').GetValue(0).ToString();

ViewManager objViewManager = new ViewManager();

GetFilterCriterias();
if (CheckSnapshotDate(SelectedMonth, SelectedYear) == 3)
{
objViewManager.BoolHistory = true;
}
else
{
objViewManager.BoolHistory = false;
}

DataSet dataSetDetailsTemp = objViewManager.GetERLDetails(ProgramIds, SelectedMonth, SelectedYear);
string ipdsPhase = dataSetDetailsTemp.Tables[1].Rows[0]["IPDSPhaseName"].ToString();
DataTable ERLDetails = new DataTable();
if (dataSetDetailsTemp.Tables.Count > 2)
{
ERLDetails = dataSetDetailsTemp.Tables[2];
ERLDetails.Columns["Measure1"].ColumnName = ipdsPhase;
string[] columnNames = (from dc in ERLDetails.Columns.Cast<DataColumn>()
select dc.ColumnName).ToArray();

string strTemp = string.Empty;
foreach (DataColumn col in ERLDetails.Columns)
{

strTemp = col.ColumnName;
strTemp = strTemp.Replace(".", string.Empty);
col.ColumnName = strTemp;
}
}
else
{
lblHdnERLDetails1.Hidden = false;
pnlHide.Height = 100;
grdERL.Hidden = true;
}

if (ERLDetails.Rows.Count > 0)
{
pnlHide.Height = 0;


DynamicGridView dynGV = new DynamicGridView();
dynGV.createGrid(grdERL, strERL, ERLDetails);

grdERL.Hidden = false;
//grdERL.ColumnModel.Columns[1].SetWidth(310);
//grdERL.Refresh();




}
else
{
strERL.DataSource = ERLDetails;
strERL.DataBind();
}

}


code in DynamicGridView class

public void createGrid(GridPanel grdERL, Store strERL, DataTable dt)
{
if (X.IsAjaxRequest)
{
strERL.RemoveFields();
}

for (int i = 0; i < dt.Columns.Count; i++)
{
AddField(new ModelField(dt.Columns[i].ToString()), strERL, dt);
}


strERL.RebuildMeta();

BindSet1(strERL, dt);

for (int j = 0; j < dt.Columns.Count; j++)
{

if (j == 0)
{
Renderer objRenderAlternate = new Renderer();
objRenderAlternate.Fn = "RenderAlternateColor";
grdERL.ColumnModel.Columns.Add(new Column { DataIndex = dt.Columns[j].ToString(), Text = dt.Columns[j].ToString(), Locked = true, Lockable = false, Width = 310, Wrap = true, Renderer = objRenderAlternate, Resizable = false, Sortable = false, MenuDisabled = true });
}
else
{
Renderer objRender = new Renderer();
objRender.Fn = "RenderColor";
grdERL.ColumnModel.Columns.Add(new Column { DataIndex = dt.Columns[j].ToString(), Text = dt.Columns[j].ToString(), Locked = false, Width = 151, Wrap = true, Renderer = objRender, Resizable = false, Sortable = false, MenuDisabled = true });
}
}

if (X.IsAjaxRequest)
{
grdERL.Reconfigure();
}
}


JavaScript


var RenderColor = function (columnValue, columnValueCSS, record, rowIndex) {

if (rowIndex == 0) {
var colIndexToRemove = columnValue.split(",");
return '<span style="background-color:#FF0000;color:White;width:25%;height:22px;di splay:inline-table;line-height: 18px;text-align:center;">' + colIndexToRemove[0] + '</span>' + '<span style="background-color:#FEFF49;color:Black;width:25%;height:22px;di splay:inline-table;line-height: 18px;text-align:center;">' + colIndexToRemove[1] + '</span>' + '<span style="background-color:#008000;color:White;width:25%;height:22px;di splay:inline-table;line-height: 18px;text-align:center;">' + colIndexToRemove[2] + '</span>' + '<span style="background-color:#d4d0c8;color:Black;width:25%;height:22px;di splay:inline-table;line-height: 18px;text-align:center;">' + colIndexToRemove[3] + '</span>';
}
else if (rowIndex == 1) {
return '<span style="background-color:White;color:Black;width:100%;height:20px;dis play:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
}
else if (rowIndex == 2) {
return '<span style="background-color:#E6E6E6;color:Black;width:100%;height:20px;d isplay:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
}
else {

if (columnValue == 'Actions') {
return '<span style="background-color:#FEFF49;color:Black;width:100%;height:15px;d isplay:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
}
else if (columnValue == 'In Place') {
return '<span style="background-color:#a4ecaa;color:Black;width:100%;height:15px;d isplay:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
}
else if (columnValue == 'Gaps') {
return '<span style="background-color:#FF0000;color:White;width:100%;height:15px;d isplay:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
}
else if (columnValue == 'N/A') {
return '<span style="background-color:#d4d0c8;color:Black;width:100%;height:15px;d isplay:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
}
else if (columnValue == 'Proven') {
return '<span style="background-color:#008000;color:White;width:100%;height:15px;d isplay:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
}
else if (columnValue == 'Disconnects') {
return '<span style="background-color:#f999a2;color:White;width:100%;height:15px;d isplay:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
}
else if (columnValue == null) {
return '<span style="background-color:White;color:Black;width:100%;height:15px;dis play:inline-table;text-align:left;font-weight:bold">&nbsp;</span>';
}
}
return columnValue;
};


var count = 1;
//AP3#1163:Render sequence before Level 1 ERL column
var newRowCount = 0;

var RenderAlternateColor = function (columnValue, columnValueCSS, record, rowIndex, columnIndex) {

if (newRowCount == 21) {
newRowCount = 0;
}
if (columnValue == "Counts") {
return '<span style="background-color:White;color:Black;width:100%;height:22px;dis play:inline-table;text-align:right;font-weight:bold">Counts</span>';
}
else if (columnValue == "Scoring Status") {
return '<span style="background-color:White;color:Black;width:100%;height:20px;dis play:inline-table;text-align:right;font-weight:bold">Scoring Status</span>';
}
else if (columnValue == "Last Status Date") {
return '<span style="background-color:#E6E6E6;color:Black;width:25%;height:20px;di splay:inline-table;text-align:center;font-weight:bold">Level 1 ERL</span>' + '<span style="background-color:#E6E6E6;color:Black;width:75%;height:20px;di splay:inline-table;text-align:right;font-weight:bold">Last Status Date</span>';
}
else {
if (count % 2 != 0) {
count++;
//15-Oct-2014: AP3#1163:Render sequence before Level 1 ERL column
newRowCount++;
columnValueCSS.css = "GrayColor_ERL";
if (newRowCount.toString().length == 2) {
return '<span style="background-color:#E6E6E6;color:#444;width:10px;height:15px;di splay:inline-table;text-align:right;padding-right:5px !important;">' + newRowCount + '</span>' + columnValue;
} else {
return '<span style="background-color:#E6E6E6;color:#444;width:10px;height:15px;di splay:inline-table;text-align:right;padding-right:10px !important;">' + newRowCount + '</span>' + columnValue;
}
}
else {
count++;
//15-Oct-2014: AP3#1163:Render sequence before Level 1 ERL column
newRowCount++;
columnValueCSS.css = "whitecolorLeftalign_ERL";
if (newRowCount.toString().length == 2) {
return '<span style="background-color:White;color:#444;width:10px;height:15px;disp lay:inline-table;text-align:right;padding-right:5px !important;">' + newRowCount + '</span>' + columnValue;
} else {
return '<span style="background-color:White;color:#444;width:10px;height:15px;disp lay:inline-table;text-align:right;padding-right:10px !important;">' + newRowCount + '</span>' + columnValue;
}
}
}

return columnValue;
};

Daniil
Sep 09, 2015, 10:00 AM
Hi @velusoft,

Yes, a GridPanel's .Reconfigure() should not be called at initial page load and there is no anything that should be called instead.


...but the column width are setting properly as i coded the width for dynamic column.

I guess you meant "not properly". Please share more details what is exactly wrong with columns' width.

Also do you see any JavaScript error in a browser's console?

It looks like that the shortest way to a solution would be providing us with a full test case to reproduce the problem. You could start from your real page and reduce/simplify it step by step as explained in this post.
How to prepare a sample (http://forums.ext.net/showthread.php?13672&p=56687&viewfull=1#post56687)

velusoft
Sep 09, 2015, 1:37 PM
I provided the code what i have.....

when we build the grid and grid columns dynamically in page load method, the column width is not setting properly... It is showing space in between columns. but if i build the same in direct method call showing properly since that is ajax request and able to call gridpanel.reconfigure() method.
I don't see any JS error but if call gridpanel.reconfigure() method in page load i am seeing JS error

Daniil
Sep 09, 2015, 2:14 PM
I provided the code what i have.....

Yes, but looking at the code I cannot determine a possible reason of the problem. I tried to put the code snippets together, but could not run it. To investigate the problem in details we should be able to reproduce it locally. Unfortunately, description and demonstration of code snippets appear to be not enough to determine the problem.



when we build the grid and grid columns dynamically in page load method, the column width is not setting properly... It is showing space in between columns. but if i build the same in direct method call showing properly since that is ajax request and able to call gridpanel.reconfigure() method.

For you additional details. Though, I still don't quite have any good ideas on what might be wrong.


I don't see any JS error

Okay, thanks.


but if call gridpanel.reconfigure() method in page load i am seeing JS error

Yes, that is expected. .Reconfigure() shouldn't be called on initial page load.

siyahgul
Sep 11, 2015, 10:51 PM
hi @velusoft.

You can look at it.

http://forums.ext.net/showthread.php?59970-CLOSED-Extjs-How-to-Create-dynamic-group-columns