PDA

View Full Version : [CLOSED] Auto adjust column size in grid panel



matrixwebtech
Aug 12, 2014, 10:37 AM
How to set gridpanel column size according column text length.and set up vertical scroll to gridpanel.

Daniil
Aug 12, 2014, 2:21 PM
Hi @matrixwebtech,


How to set gridpanel column size according column text length.

Maybe, this Ext.NET v1 example might help you to start implementing the required functionality.
http://forums.ext.net/showthread.php?3222&p=73207&viewfull=1#post73207


and set up vertical scroll to gridpanel.


Please start a new forum thread.

matrixwebtech
Aug 12, 2014, 3:41 PM
I add listners to gridpanel


.Listeners(l => { l.ViewReady.Fn = "onViewReady"; })

And add


<script type="text/javascript">
var onViewReady = function (grid) {

var view = grid.getView(),
store = grid.getStore(),
colModel = grid.getColumnModel(),
cell,
value,
width = 100;

store.each(function (record, index) {
cell = view.getCell(index, 1);
value = record.data.MaterialName;
width = Math.max(width, Ext.util.TextMetrics.measure(cell, value).width);
});

colModel.setColumnWidth(1, width + 10);
};
</script>

but an error occurs ,from firebug I got the error message


TypeError: grid.getColumnModel is not a function


colModel = grid.getColumnModel(),

I a post ,in this posts they mentioned an "AutoExpandColumn " for v1,is that in v2 i am not found.

http://forums.ext.net/showthread.php?14499-CLOSED-Grid-Panel-Column-width-%28Auto-width%29

http://forums.ext.net/showthread.php?18369-CLOSED-How-to-wrap-text-in-auto-expand-column-in-gridpanel

Daniil
Aug 13, 2014, 9:01 AM
There are quite many differences between Ext.NET v1 and v2. You can review this document:
http://examples2.ext.net/#/Getting_Started/Release_Documents/BREAKING_CHANGES/

We've listed as many difference as we could.

Hope this helps.

matrixwebtech
Aug 19, 2014, 9:46 AM
I change javascript ,but not working and there is no error message in firebug.


var onViewReady = function (grid) {
var view = grid.getView(),
store = grid.getStore(),
colModel,

cell,
value,
width = 100;
var headerCt = grid.headerCt
colModel = headerCt.getGridColumns();
columns = colModel.config,

Ext.each(columns, function (column, colIdx) {
store.each(function (record, rowIdx) {
cell = view.getCell(rowIdx, colIdx);
value = record.get(column.dataIndex);
width = Math.max(width, Ext.util.TextMetrics.measure(cell, value).width);
});


colModel.SetWidth(colIdx, width + 10);
});
};

Daniil
Aug 19, 2014, 10:05 AM
Is the code inside Ext.each() executing? I guess no, because this would though an error for sure:

colModel.SetWidth(colIdx, width + 10);

Also I think there should be a semicolon there, instead of a comma.

columns = colModel.config,

I see another JavaScript syntax errors.

matrixwebtech
Aug 19, 2014, 10:22 AM
I rectify my code ,change


colModel.SetWidth(width + 10);

and


columns = colModel.config;



var onViewReady = function (grid) {
var view = grid.getView(),
store = grid.getStore(),
colModel,

cell,
value,
width = 500;
var headerCt = grid.headerCt
colModel = headerCt.getGridColumns();
columns = colModel.config;

Ext.each(columns, function (column, colIdx) {
store.each(function (record, rowIdx) {
alert('1')
cell = view.getCell(rowIdx, colIdx);
value = record.get(column.dataIndex);
width = Math.max(width, Ext.util.TextMetrics.measure(cell, value).width);
});


colModel.SetWidth(width + 10);
});
};

but not working and no javascript error in firebug.

Daniil
Aug 19, 2014, 12:57 PM
Please clarify have you debugged that code step by step?

matrixwebtech
Aug 19, 2014, 1:15 PM
I will try


console.log(columns)

and found undefined in fire bug.bellow code is my full javascript code.


var onViewReady = function (grid) {
var view = grid.getView(),
store = grid.getStore(),
colModel,

cell,
value,
width = 500;
var headerCt = grid.headerCt
colModel = headerCt.getGridColumns();
columns = colModel.config;
console.log(columns)
Ext.each(columns, function (column, colIdx) {
store.each(function (record, rowIdx) {

cell = view.getCell(rowIdx, colIdx);
value = record.get(column.dataIndex);
width = Math.max(width, Ext.util.TextMetrics.measure(cell, value).width);
});


colModel.SetWidth(width + 10);
});
};

matrixwebtech
Aug 25, 2014, 12:56 PM
Hi I try bellow.


@model System.Collections.IEnumerable
@Html.X().ResourceManager()
<script>

var onViewReady = function (grid) {
var view = grid.getView(),
store = grid.getStore(),
colModel,

cell,
value,
width = 500;
var headerCt = grid.headerCt
colModel = headerCt.getGridColumns();
columns = colModel.config;
console.log(columns)
Ext.each(columns, function (column, colIdx) {
store.each(function (record, rowIdx) {

cell = view.getCell(rowIdx, colIdx);
value = record.get(column.dataIndex);
width = Math.max(width, Ext.util.TextMetrics.measure(cell, value).width);
});


colModel.SetWidth(width + 10);
});
};


</script>
@(
Html.X().GridPanel()
.Listeners(l => { l.ViewReady.Fn = "onViewReady"; })
.Width(200)
.AutoScroll(true)
.Scroll(ScrollMode.Both)
.Store(Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company"),
Html.X().ModelField().Name("now")
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company").Flex(1),
Html.X().Column().DataIndex("noe").Text("Now").Flex(1)

)
)




public class AutoadjustcolumnsizeingridpanelController : Controller
{
//
// GET: /Autoadjustcolumnsizeingridpanel/

public ActionResult Index()
{
return View(Sample.GetCompanies());
}

}

public class Sample
{
public static IEnumerable GetCompanies()
{
DateTime now = DateTime.Now;

return new object[]
{
new object[] { "3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co3m Co 3m Co 3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co" ,now},
new object[] { "IBM",now},

};
}
}

but company column not taking full length of its text,and no vertical scroll coming.

geoffrey.mcgill
Aug 25, 2014, 1:26 PM
Please step through your code and debug it line by line. You have an obvious error in your code that would easily be found if you debugged. This error was also pointed out to you several posts ago.

You can use tools such as Firefox + Firefox to debug your client-side JavaScript code. You can also use IE + Visual Studio

Hint: SetWidth

matrixwebtech
Aug 25, 2014, 3:55 PM
Hi


I found


columns = colModel.config;

this is return undefined

can you please tell me how to fix this.

geoffrey.mcgill
Aug 25, 2014, 4:29 PM
You can inspect the object in Firebug to find it's properties and function, and review the Ext JS Column Model documentation.

http://docs.sencha.com/extjs/4.2.1/

matrixwebtech
Aug 26, 2014, 6:03 AM
Hi,
I inspect with fire bug there are many functions and also see http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.property.HeaderContainer
but I don't understand what actually do.

Daniil
Aug 26, 2014, 2:12 PM
I think you should review the Ext.grid.header.Container class, not the Ext.grid.property.HeaderContainer one.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.header.Container

matrixwebtech
Dec 02, 2014, 4:50 AM
Hi ,
I try with sample code (http://forums.ext.net/showthread.php?41471-CLOSED-Auto-adjust-column-size-in-grid-panel&p=192321&viewfull=1#post192321) and found
columns = colModel.config; is undefined ,can you please look into this.
previously I follow your instructions but can not produce a working sample. see here (http://mvc.ext.net/#/GridPanel_ArrayGrid/DirectEvent_Creation/) 5th row,company column of the grid,text not showing after Group,in that case i need column resized and all text visible.

Daniil
Dec 02, 2014, 10:07 PM
So, what is exactly the error message?

matrixwebtech
Dec 03, 2014, 1:29 AM
firebug not showing any javascript error.show undefined for
console.log(columns).it will be great if you please rectify the sample and make this working.

Daniil
Dec 03, 2014, 7:17 PM
I've converted the original example for Ext.NET v2.
http://forums.ext.net/showthread.php?3222&p=216381&viewfull=1#post216381

matrixwebtech
Dec 04, 2014, 11:28 AM
Hi daniil thanks for your effort ,but not working for me,can you please look my sample and please let me know what wrong I did.

Sample View

@model System.Collections.IEnumerable
@Html.X().ResourceManager()
<script>
var onViewReady = function (grid) {

var column = grid.headerCt.items.getAt(0),
view = grid.getView(),
cell,
value,
width = 100;

grid.getStore().each(function (record, index) {
cell = view.getCell(record, column);
value = record.data.company;
console.log(value)
width = Math.max(width, Ext.util.TextMetrics.measure(cell, value).width);
});

column.setWidth(width + 12);
};
</script>
@(
Html.X().GridPanel()
.ID("GridPanel1")
.Layout(LayoutType.Fit)
.Listeners(l => {
l.ViewReady.Fn = "onViewReady";
})


.AutoScroll(true)
.Scroll(ScrollMode.Both)
.Store(Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company"),
Html.X().ModelField().Name("now")
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company").Flex(1),
Html.X().Column().DataIndex("noe").Text("Now").Flex(1)

)
)

Sample Controller

public class AutoadjustcolumnsizeingridpanelController : Controller
{
//
// GET: /Autoadjustcolumnsizeingridpanel/

public ActionResult Index()
{
return View(Sample.GetCompanies());
}

}

public class Sample
{
public static IEnumerable GetCompanies()
{
DateTime now = DateTime.Now;

return new object[]
{
new object[] { "3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co3m Co 3m Co 3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co" ,now},
new object[] { "IBM",now},

};
}
}
with a screen shot I can explain better.

16921
See first row of company column all data not showing,and can not set a horizontal scroll to the grid.

Daniil
Dec 04, 2014, 11:35 AM
In my example the second column is adjusted according to

column = grid.headerCt.items.getAt(1)

You probably need the first column to be adjusted.

matrixwebtech
Dec 04, 2014, 11:46 AM
Hi,
Update the sample and set
var column = grid.headerCt.items.getAt(0) but still not working.:(

Daniil
Dec 04, 2014, 3:55 PM
I think you should remove .Flex(1), because it resets what you calculate in the onViewReady function.

matrixwebtech
Dec 05, 2014, 4:01 AM
Hi daniil thanks for suggestion.remove Flex(1) from both column and put some more text to company column ,and then full text visible in company column but Now column not visible ,I think Now column not get space .I think a horizontal scroll will be better solution.I set
.AutoScroll(true)
.Scroll(ScrollMode.Both) but scroll not showing .please try bellow code.


public class AutoadjustcolumnsizeingridpanelController : Controller
{
//
// GET: /Autoadjustcolumnsizeingridpanel/

public ActionResult Index()
{
return View(Sample.GetCompanies());
}

}

public class Sample
{
public static IEnumerable GetCompanies()
{
DateTime now = DateTime.Now;

return new object[]
{
new object[] { "3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co 3m Co3m Co 3m Co 3m Co 3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co 3m Co 3m Co3m Co 3m Co 3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co 3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co 3m Co 3m Co3m Co 3m Co 3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co3m Co" ,now},


};
}
}





@model System.Collections.IEnumerable
@Html.X().ResourceManager()
<script>

var onViewReady = function (grid) {

var column = grid.headerCt.items.getAt(0),
view = grid.getView(),
cell,
value,
width = 100;

grid.getStore().each(function (record, index) {
cell = view.getCell(record, column);
value = record.data.company;

width = Math.max(width, Ext.util.TextMetrics.measure(cell, value).width);
});

column.setWidth(width + 12);
};
</script>
@(
Html.X().GridPanel()
.ID("GridPanel1")
.Layout(LayoutType.Fit)
.Listeners(l => {
l.ViewReady.Fn = "onViewReady";
})


.AutoScroll(true)
.Scroll(ScrollMode.Both)
.Store(Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company"),
Html.X().ModelField().Name("now")
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company"),
Html.X().Column().DataIndex("now").Text("Now")

)
)

Daniil
Dec 07, 2014, 8:41 PM
Please set some Height or MinHeight for the GridPanel, for example:

.MinHeight(100)
or

.Height(100)

Or the GridPanel's height should be calculated by layout of its parent container. Do you put the GridPanel into some container?