Author Topic: An undesired "undefined" word is showing when using render function and grouping  (Read 1906 times)

darioup

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 4
  • Webmaster Creativo
    • View Profile
Hi, I'm using the render function to make some customization on a column.
I'm also using the grouping feature to keep data more clear.
When the data is grouped it seems that the column with render function displays their "summary" option, which I don't declare in the colModel, and an undefined word is showed at the top of the table
How can I remove this "undeifned" word, or stop colModel with render function from being summarized?


Removing the grouping

Code: [Select]
colModel: [
                { title: "ID", "dataType": "integer", "dataIndx": "id",
                    editable: false, maxWidth: 50, align: 'center', denyGroup: true, },
                { title: "Nombre", dataType: "string", dataIndx: "name",
                    editable: false, width: 150 },
                { title: "Material", dataType: "string", dataIndx: "material",
                    editable: false, },
                { title: "Color", dataType: "string", editable: false, dataIndx: "color",
                  render: function (ui) {
                      var html = "";
                      if (ui.rowData.color_value) {
                          html += '<div class="color-sq" style="background-color:'+ ui.rowData.color_value +'"></div>';
                      }
                      html += "<span>"+ ui.rowData.color +"</span>";
                      return {
                          text: html
                        }
                  }
                },
                { title: "TamaƱo", dataType: "string", dataIndx: "size",
                    editable: false, },
                { title: "Stock", dataType: "integer", dataIndx: "quantity",
                    maxWidth: 80, align: 'center', denyGroup: true,
                    summary: { type: "sum" },
                  render: function (ui) {

                      return {
                          style: 'background-color: rgb(76, 175, 80);color: white;border:1px dotted #333333;border-top:0;'
                      }
                  }
                },
            ],
Code: [Select]
groupModel: {
                on: true,
                dataIndx: ['name'],
                collapsed: [true],
                fixCols: false,
                summaryInTitleRow: 'all',
                titleInFirstCol: false,
                headerMenu: false,
            }

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
If undefined is returned as text value by your render function, then it displays undefined.

Code: [Select]
html += "<span>"+ ui.rowData.color +"</span>";

Try changing it to

Code: [Select]
html += "<span>"+ (ui.rowData.color || "") +"</span>";

Please let me know whether it fix your issue, if not then kindly share a jsfiddle.

darioup

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 4
  • Webmaster Creativo
    • View Profile
thanks it solved  :)