Background:
I want to make my grid columns always visible (fixed via css/jQuery/bootstrap affix), but I'm getting weird results and nothing I try seems to work.
Is there a clean way to implement this feature? What would you guys recommend?
Requirements:
Columns must also be resizable.
Hello Spencer,
Thank you for posting in the community.
What I can suggest for achieving your requirement is initially fix the required columns and remove the option for them to be unfixed. This could be accomplished by using columSettings of Fixing feature. This is a list of column settings that specifies custom column fixing options on a per column basis. What you need to do is set the column to be initially fixed and since you would like to be always fixed you could set allowFixing property to false. This will ensure that this column is never going to be unfixed. For example:
$(function () { $("#grid").igGrid({ columns: [ { headerText: "Customer ID", key: "ID", dataType: "string", width: "150px" }, { headerText: "Company Name", key: "CompanyName", dataType: "string", width: "200px" }, { headerText: "Contact Name", key: "ContactName", dataType: "string", width: "200px" }, { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "200px" }, { headerText: "Address", key: "Address", dataType: "string", width: "200px" }, { headerText: "City", key: "City", dataType: "string", width: "150px" }, { headerText: "Country", key: "Country", dataType: "string", width: "150px" } ], autoGenerateColumns: false, dataSource: nwCustomersWithOrders, width: "1000px", height: "400px", features: [ { name: "Resizing" }, { name: "ColumnFixing", fixingDirection: "left", columnSettings: [ { columnKey: "CompanyName", isFixed: true, allowFixing: false }, { columnKey: "ContactName", isFixed: true, allowFixing: false }, { columnKey: "ContactTitle", allowFixing: false, isFixed: true, allowFixing: false } ] } ] }); });
$(function () { $("#grid").igGrid({ columns: [ { headerText: "Customer ID", key: "ID", dataType: "string", width: "150px" }, { headerText: "Company Name", key: "CompanyName", dataType: "string", width: "200px" }, { headerText: "Contact Name", key: "ContactName", dataType: "string", width: "200px" }, { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "200px" }, { headerText: "Address", key: "Address", dataType: "string", width: "200px" }, { headerText: "City", key: "City", dataType: "string", width: "150px" }, { headerText: "Country", key: "Country", dataType: "string", width: "150px" } ], autoGenerateColumns: false, dataSource: nwCustomersWithOrders, width: "1000px", height: "400px", features: [ { name: "Resizing" }, { name: "ColumnFixing", fixingDirection: "left", columnSettings: [ { columnKey: "CompanyName", isFixed: true, allowFixing: false }, { columnKey: "ContactName", isFixed: true, allowFixing: false }, { columnKey: "ContactTitle", allowFixing: false, isFixed: true, allowFixing: false }
] } ] }); });
Regarding your second requirement what I can suggest is Resizing feature of igGrid. Enabling this feature will give you the ability to resize columns. Similar to ColumnFixing feature you could specify resizing options on a column per column basis using resizing columnSettings.
I am attaching a small sample illustrating my suggestion and I am attaching it for your reference. If this sample is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me or send me a detailed explanation of your requirement.
Please let me know if you have any additional questions regarding this matter.
Please let me know if you need any further assistance with this matter.