GridView alignment problem when content is compressed without spacing

Question

GridView alignment problem when content is compressed without spacing

This situation presents a challenge

SLNo FirstName LastName Description

1 AA BB lengthy description of the scenario

                     more details about the scenario

2 CC BB another detailed description of the scenario

The entire row is shifting to the right unexpectedly. How can we address this issue? There seems to be no problem even with a space in between. How should we handle this situation?

This issue has been brought up previously on by another user. To solve it, we must wrap it with the following code: e.Row.Cells[4].Attributes.Add("style", "WORD-BREAK:BREAK-ALL");

Which event should this code be written in?

Thank you in advance.

c#javascript .net asp.net gridview

Answer 1

Answer №1

To execute code after the OnLoad and OnInit events, utilize the OnPreRenderComplete event.

public void OnPreRenderComplete(EventArgs e) {
     if(!Page.IsPostBack) {
         ....
     }
}

For more information, visit http://msdn.microsoft.com/en-us/library/system.web.ui.page.onprerendercomplete.aspx

Answer 2

To execute code after the OnLoad and OnInit events, utilize the OnPreRenderComplete event.

public void OnPreRenderComplete(EventArgs e) {
     if(!Page.IsPostBack) {
         ....
     }
}

For more information, visit http://msdn.microsoft.com/en-us/library/system.web.ui.page.onprerendercomplete.aspx

Answer 3

Answer №2

Solved the problem by implementing Word-Break in RowDataBound event

public void GridView_RowDataBound(object sender, GridViewRowEventArgs e) { // Cell[5] represents the Comment column e.Row.Cells[5].Attributes.Add("style", "WORD-BREAK:BREAK-ALL"); }

Answer 4

Solved the problem by implementing Word-Break in RowDataBound event

public void GridView_RowDataBound(object sender, GridViewRowEventArgs e) { // Cell[5] represents the Comment column e.Row.Cells[5].Attributes.Add("style", "WORD-BREAK:BREAK-ALL"); }

Answer 5

Answer №3

Not all browsers support Word-Break. To limit the text, you can use the following method:

private void OnItemDataBound(object sender, DataGridItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || 
        e.Item.ItemType == ListItemType.AlternatingItem)
    {   
        if(e.Item.Cells[3].Text > 50)
           e.Item.Cells[3].Text= e.Item.Cells[3].Text.SubString(0, 47) + "...";
           // Alternatively, you can also insert a space after 50 characters.
    }
}

Answer 6

Not all browsers support Word-Break. To limit the text, you can use the following method:

private void OnItemDataBound(object sender, DataGridItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || 
        e.Item.ItemType == ListItemType.AlternatingItem)
    {   
        if(e.Item.Cells[3].Text > 50)
           e.Item.Cells[3].Text= e.Item.Cells[3].Text.SubString(0, 47) + "...";
           // Alternatively, you can also insert a space after 50 characters.
    }
}

GridView alignment problem when content is compressed without spacing

Answer №1

Answer №2

Answer №3

Similar questions

What does the "listen EACCESS localhost" error in the code signify and why is it occurring?

The data from the Flickr API is consistently unchanging

An element featuring a background color is vertically aligned in the middle of its parent container

Is there a way to customize the pagination dots in react-native-swiper-flatlist?

How come my express POST endpoint delivers a 404 error when the Content-Type is specified by the requester?

The request to the route timed out after waiting 5000ms for a response from the server

Using Node.js to return JSON data containing base64 encoded images

Is there a way to use JQuery to dynamically generate a new select box with specific options?

Vue.js and TypeScript combination may result in a 'null' value when using file input

Retrieving information from a function within a Node module

AngularJS $http.post() response function not executing in the correct sequence

Tips for retrieving information in addition to a promise

Encountering difficulties while setting up microsoft-net-sdk-blazorwebassembly-aot in Dockerfile

Challenges with loading content and async JavaScript within websites

Accessing information from RESTful Web Service with Angular 2's Http functionality

Harnessing the power of VUE.js: Exploring the versatility of V-bind with Array and

looping through the iteration

React and Material UI: troubleshooting problems with layout columns

Trouble with CSS loading due to div in Visual Studio MVC

Using jQuery Ajax to Retrieve Selected Text from an ASP.NET Dropdown List in CodeBehind After Binding