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
never mind,
I figure it out.
Thank you so much
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" });
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.