Row colspan to field with a lot of text

[Tomas]

Hi, I have a problem on Kendo Grid with a field that has a lot of text to show in a column only, so I thought to show it as row, as it's displayed in attached image.
The problem, is that when grouping any column, it doesn't work correctly, it's displayed in the following example.
Is there any workaround or feature about that?

  <div id="grid"></div>
<script>
$("#grid").kendoGrid({
    groupable: true,
    columns: [
    {
      title: "Name",
      field: "name"
    },
    {
      title: "Birthdate",
      field: "birthdate"
    },
    {
      title: "City",
      field: "city"
    },
    {
      title: "Country",
      field: "country"
    },
    {
        title: "Phone",
        field: "phone"
    },
    {
      hidden: true,
      title: "Descripcion",
      field: "descrip"
    }
  ],
  editable: true,
  dataBound: function (e) {
        dataBoundGridMain(e)
  },
  dataSource: [
    { name: "Jane Doe", birthdate: new Date("1995/05/04"), city: "London", country: "UK", phone: "555-444-333", descrip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium elit in mauris laoreet molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent et leo tellus." },
    { name: "Jhon Doe", birthdate: new Date("1997/05/04"), city: "Londo", country: "UK", phone: "555-444-356", descrip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium elit in mauris laoreet molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos." },
    { name: "Jhon Doe", birthdate: new Date("1997/05/04"), city: "New York", country: "USA", phone: "555-444-356", descrip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium elit in mauris laoreet molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos." }
  ]
});

  function dataBoundGridMain(e){
    var kendoGrid = e.sender;
    var rows = kendoGrid.tbody.children();
    var dataItem = null;
    var rowElement = null;
    var dataRowGrid = kendoGrid.dataItems();
    var rowLen = dataRowGrid.length, index = 0;

    console.log("test")

    for (index; index < rowLen; index++) {
      rowElement = rows[index];
      dataItem = dataRowGrid[index];
        if (dataItem.hasOwnProperty('descrip')) {
        addDescriptionTextNewRow(kendoGrid, dataItem, $(rowElement));
      }
    }
  }

  function addDescriptionTextNewRow(kendoGrid, dataItem, rowElement){
    var rowsElement,
        title,
        value,
        colsNumber,
        rowRender;

    if (dataItem.hasOwnProperty('descrip')) {
        title = 'Description';
        value = dataItem.descrip;
    }
    colsNumber = kendoGrid.columns.length
    rowsElement = "<tr><td colspan=" + colsNumber + " style= 'color:#434343; font:12px DroidBold; text-align: left; border-bottom:1px; height: 8px; padding:5px 0 0 5px;' >" + title + "</td></tr>";
    rowsElement += "<tr><td colspan=" + colsNumber + " style= 'color:#434343; font:Arial 10px; text-align: left' >" + value + "</td></tr>";
    rowRender = $(rowsElement);
    rowElement.after(rowRender[1]);
    rowElement.after(rowRender[0]);
  }

</script>

[Stefan]

Hello, Tomas,

Thank you for the example.

In general, we do not recommend interfering with the Grid rendering as this can cause a different issue as in this case with the grouping.

We can recommend using the details template and the expand all rows on loading:

https://dojo.telerik.com/igEWuKIr

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/detailtemplate

Another approach is if the column can have a large text which is unknown for setting a specific width, I can recommend using the autoFitColumn method of the Grid:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/autofitcolumn

https://dojo.telerik.com/IVemeQUQ

I hope one of the approaches to be helpful.

Regards,
Stefan
Progress Telerik