Row colspan to field with a lot of text

2 posts, 0 answers
  1. Tomas
    Tomas avatar
    11 posts
    Member since:
    Apr 2013

    Posted 05 Jun 2018 Link to this post

    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>
  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 06 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top