Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
werner buerstel
105
Column resizing method
posted

Hello! I have a grid that takes 100% width of the container DIV. The width of the container is also specified in percentages, so the grid resizes when I resize the browser window and no horizontal scroll bar appears (my users hate horizontal scroll bars ;-)). The users would like to resize the columns as well, and this works. What they (and I) dislike, however, is the way resizing one column affects the width of all the other columns. This is totally counter-intuitive for someone who is used to working with tables in Word or with Outlook. Is there a way to change the resizing method in such a way that changing the width on one column would only affect the width of the column to its right and not all the other columns?

Here is an example from DevExpress's site, which got it right: https://demos.devexpress.com/MVCxGridViewDemos/Columns/TextEllipsis

Is the same possible with igGrid? Many thanks.

  • 23953
    Offline posted

    Hello Werner,

    This scenario is supported by igGrid Resizing. You need to define column's widths in % as well.

    Here is an example code snippet:

    $("#grid1").igGrid({
	autoGenerateColumns: false,
	columns: [
		{ headerText: "Product ID", key: "ProductID", dataType: "number", width: "25%" },
		{ headerText: "Product Name", key: "Name", dataType: "string", width: "25%" },
		{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "25%" },
		{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "25%" }
	],
	height: "600px",
	width: "100%",
	dataSource: adventureWorks,
	features: [
		{
			name: "Resizing"
		}
	]
});

    Best regards,
    Martin Pavlov
    Infragistics, Inc.