Hello,
I use dxDataGrid in my application. Because some times there are quite a lot of columns to be displayed I test currently the fixed column feature of the grid. I have a problem with that because the width of my data grid containers is not constant. Their width depends on the width of the browser window for better responsiveness. The fixed column seems not to accept a relative width of for example 60%. The fixing seems just to work with absolute widths in pixels. If the container width is <= the width of the fixed column it is not possible to show the other columns. The fixed column consumes the complete width of the grid. The horizontal scrollbar is shown but is has no effect because of the absolute width of the fixed column.
What would be optimal would be a relative width of the fixed column of for example 60% of the grid's width. The other columns could have absolute widths. Is there a direct way to setup the grid for that or am I forced to dynamically adapt the absolute width of the fixed column to the container to achieve that?
Best regards
Matthias
Hi,
According to the Column Fixing help section, it is necessary to make sure that the columnAutoWidth option is disabled and total width of columns exceeds the container width. Relative width specification is not compatible with fixed columns functionality due to its specifics. We will update our documentation to explicitly describe this specificity. Thank you for your time and cooperation.
Hello Alessandro,
thank you for the response. Maybe I did not made completely clear what I want. columnAutoWidth is disabled (default) in my case. Attached you find a sample which shows what I mean. The container div has a relative width of 40% of the browser window. If you make the browser window smaller its width and the width of the grid gets smaller. But the width of the fixed column remains constant. If the container width is equal to the width of the fixed column I cannot longer see the other columns. Maybe I can set the width of the fixed column with the option function to adapt it to the container width and to keep it always smaller als the container. I was asking whether you could recommend something more straightforward.
Best regards
Matthias
<script> var elements = [ { value: 'fixed column data 01', attr1: "testattribute1 01", attr2: "anderes Attribut 01", attr3: "drittes 01", attr4: "viertes Attribut 01", attr5: "fünftes attribut 01" }, { value: 'fixed column data 02', attr1: "testattribute1 02", attr2: "anderes Attribut 02", attr3: "drittes 02", attr4: "viertes Attribut 02", attr5: "fünftes attribut 02" }, { value: 'fixed column data 03', attr1: "testattribute1 03", attr2: "anderes Attribut 03", attr3: "drittes 03", attr4: "viertes Attribut 03", attr5: "fünftes attribut 03" }, { value: 'fixed column data 04', attr1: "testattribute1 04", attr2: "anderes Attribut 04", attr3: "drittes 04", attr4: "viertes Attribut 04", attr5: "fünftes attribut 04" }, { value: 'fixed column data 05', attr1: "testattribute1 05", attr2: "anderes Attribut 05", attr3: "drittes 05", attr4: "viertes Attribut 05", attr5: "fünftes attribut 05" } ]; angular.module('myApp',['dx']) .controller('myController', ($scope)=>{ $scope.gridOptions = { dataSource : elements, columns : [ { dataField: "value", width: 400, fixed: true }, { dataField: "attr1", width: 150 }, { dataField: "attr2", width: 150 }, { dataField: "attr3", width: 150 }, { dataField: "attr4", width: 150 }, { dataField: "attr5", width: 150 } ], filterRow : { visible: true, applyFilter: "auto" }, headerFilter : { visible: true }, paging: { enabled: false }, scrolling: { mode: "virtual" }, onInitialized : function(e) { $scope.testGrid = e.component; } }; }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <div style="width:40%"> <div dx-data-grid="gridOptions" style="height:200px;"></div> </div> </body> </html>Hi,
Thank you for your clarification. Yes, you can subscribe to the window.resize event, calculate the actual width of the parent container, and change the fixed column width accordingly by using the columnOption method. For example:
var wnd = angular.element($window); wnd.bind('resize', function () { var parentSize = $("#gridContainer").parent().width(); $scope.testGrid.columnOption("value", "width", parentSize - 100); });Attached is a standalone code sample. I hope this information helps.
Hello,
thank you for your advice. Then I will use that approach.
Best regards
Matthias