Hello Expert,
I have a large text field that need to display in the igGrid. However, since the text is too large, it took up a real estate of the screen. What I would like to do is short the text display in Grid column, but show full text when user mouse over.
Thank you
Hello Phong Nguyen,
Thank you for posting in our forum.
What I can suggest for achieving your requirement is using column formatter function in combination with Tooltips feature of igGrid. The formatter function is used to format cell values. It should accept a value and return the new formatted value. You will use this function to trim long values. Hoever, when tooltips feature is enabled when you hover a grid cell the whole cell text will appear in the tooltip. For example:
$("#grid").igGrid({ dataSource: data, autoGenerateColumns: false, columns: [ { headerText: "Name", key: "Name", dataType: "string", formatter: function (val) { return val.substring(0, 5) } }, { headerText: "Age", key: "Age", dataType: "number" } ], features: [ { name: "Tooltips", visibility: "always", showDelay: 1000, hideDelay: 500 } ] });
$("#grid").igGrid({
dataSource: data,
autoGenerateColumns: false,
columns: [
{ headerText: "Name", key: "Name", dataType: "string", formatter: function (val) { return val.substring(0, 5) } },
{ headerText: "Age", key: "Age", dataType: "number" }
],
features: [
{
name: "Tooltips",
visibility: "always",
showDelay: 1000,
hideDelay: 500
}
]
});
I am also attaching a small sample illustrating my suggestion for your reference.
Please let me know if you need any further assistance with this matter.
How can apply this on the Controller?
layout = new GridColumnLayoutModel(); layout.AutoGenerateColumns = false; layout.Key = item.DataObjectIdentity; layout.Caption = item.AssociateObjectName; layout.ForeignKey = "RowId"; layout.Columns.Add(new GridColumn() { HeaderText = "RowId", Key = "RowId", DataType = "string" }); layout.Columns.Add(new GridColumn() { HeaderText = "Bundle", Key = "Bundle", DataType = "string", Width = "120px" }); layout.Columns.Add(new GridColumn() { HeaderText = "Dash", Key = "Dash", DataType = "string", Width = "80px" }); layout.Columns.Add(new GridColumn() { HeaderText = "Effs", Key = "Effs", DataType = "string" });
never mind,
I figure it out.
Thank you so much