TreeList: Fix the width of the first column when it has a specified t…

…emplate (T1221037) (#27680)

Co-authored-by: Alyar <>

e2e/testcafe-devextreme/tests/treeList/markup.ts

@@ -54,4 +54,108 @@ const tasksT1223168 = [{
   }).after(async () => {
     await changeTheme(Themes.genericLight);
   });
+
+  // T1221037
+  test('TreeList screenshot when the first cell has a template', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const treeList = new TreeList('#container');
+
+    await t
+      .expect(await takeScreenshot(`T1221037-cell-with-template-${theme}`, treeList.element))
+      .ok()
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await changeTheme(theme);
+
+    return createWidget('dxTreeList', {
+      dataSource: [{
+        ID: 1,
+        Head_ID: 0,
+        Full_Name: 'John Heart',
+        Prefix: 'Mr.',
+        Title: 'CEO',
+        City: 'Los Angeles',
+        State: 'California',
+        Email: '[email protected]',
+        Skype: 'jheart_DX_skype',
+        Mobile_Phone: '(213) 555-9392',
+        Birth_Date: '1964-03-16',
+        Hire_Date: '1995-01-15',
+      }, {
+        ID: 2,
+        Head_ID: 1,
+        Full_Name: 'Arthur Miller',
+        Prefix: 'Mr.',
+        Title: 'CTO',
+        City: 'Denver',
+        State: 'Colorado',
+        Email: '[email protected]',
+        Skype: 'arthurm_DX_skype',
+        Mobile_Phone: '(310) 555-8583',
+        Birth_Date: '1972-07-11',
+        Hire_Date: '2007-12-18',
+      }, {
+        ID: 3,
+        Head_ID: 2,
+        Full_Name: 'Brett Wade',
+        Prefix: 'Mr.',
+        Title: 'IT Manager',
+        City: 'Reno',
+        State: 'Nevada',
+        Email: '[email protected]',
+        Skype: 'brettw_DX_skype',
+        Mobile_Phone: '(626) 555-0358',
+        Birth_Date: '1968-12-01',
+        Hire_Date: '2009-03-06',
+      }, {
+        ID: 4,
+        Head_ID: 3,
+        Full_Name: 'Morgan Kennedy',
+        Prefix: 'Mrs.',
+        Title: 'Graphic Designer',
+        City: 'San Fernando Valley',
+        State: 'California',
+        Email: '[email protected]',
+        Skype: 'morgank_DX_skype',
+        Mobile_Phone: '(818) 555-8238',
+        Birth_Date: '1984-07-17',
+        Hire_Date: '2012-01-11',
+      }, {
+        ID: 5,
+        Head_ID: 4,
+        Full_Name: 'Violet Bailey',
+        Prefix: 'Ms.',
+        Title: 'Jr Graphic Designer',
+        City: 'La Canada',
+        State: 'California',
+        Email: '[email protected]',
+        Skype: 'violetb_DX_skype',
+        Mobile_Phone: '(818) 555-2478',
+        Birth_Date: '1985-06-10',
+        Hire_Date: '2012-01-19',
+      }],
+      keyExpr: 'ID',
+      parentIdExpr: 'Head_ID',
+      columnAutoWidth: true,
+      width: 770,
+      columns: [{
+        dataField: 'Title',
+        caption: 'Position',
+        cellTemplate(_, cellInfo) {
+          return $('<div>').append(
+            $('<span>').text(cellInfo.data.Title),
+          );
+        },
+      }, 'Full_Name', 'City', 'State', {
+        dataField: 'Hire_Date',
+        dataType: 'date',
+      }],
+      showRowLines: true,
+      showBorders: true,
+      expandedRowKeys: [1, 2, 3, 4],
+    });
+  }).after(async () => {
+    await changeTheme(Themes.genericLight);
+  });
 });

packages/devextreme/scss/widgets/base/treeList/_common.scss

@@ -19,7 +19,7 @@
     white-space: nowrap;
 
     .dx-treelist-text-content {
-      display: inline;
+      display: inline-block;
       white-space: normal;
     }