Label at Grouping

[simcon94Participant]

Hello,
i have following Problem.
In my Grid i have a dropdownlist as column.

, {
                        text: '@Resources.MeterType.MeterTypeModel_Unit', columntype: 'dropdownlist', displayfield: "Unit", datafield: "UnitId", placeHolder: "Bitte wählen", filtertype: 'checkedlist', width: 150,
                        validation: function (cell, value) {
                            if (value) {
                                return true;
                            }
                            return { result: false, message: "@Resources.CostCenter.Error_Grid_Number" };
                        }
                        , createeditor: function (row, cellvalue, editor) {
                            editor.jqxDropDownList({ source: dataAdapterUnit, displayMember: 'Symbol', valueMember: 'Id', placeHolder: "Bitte wählen", dropDownHeight: 100 });
                        },
                    }

When i group this Column, the label is always “Unit”.
So how can i set the Label with localisation? For Example in German?

[DimitarParticipant]

Hello simcon94,

Do you mean the group label in the groups header? By default, it is the same as the column’s text, but if you wish, you can modify it with the callback function groupcolumnrenderer (example).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[simcon94Participant]

I am not sure, that the label is default the “text”.
When the Cloumn is columntype: ‘dropdownlist’, then he takes always the displayfield.
When i call groupcolumnrenderer, then i get an array the value from displayfield….
0 “U”
1 “n”
2 “i”
3 “t”

When the column isn’t ‘dropdownlist’, then i get an string…

[simcon94Participant]

so i implemented this workaround:
var groupcolumnrenderer = function (text) {
var toCheck = “”;
if (typeof text === ‘string’) {
return text;
} else {
for (var i = 0; i < text.length; i++) {
toCheck += text[i];
}
if (toCheck === ‘State’) {
return ‘@Resources.State’;
} else if (toCheck === ‘Country’) {
return ‘@Resources.Country’;
}
}
}

[simcon94Participant]

But now, i have the probelm at groupsrenderer.
There is always “State” as Label.
And i get an Error:
TypeError: data.groupcolumn is null

[DimitarParticipant]

Hi simcon94,

Could you, please, share a JSFiddle example demonstrating the issue and guide us how to reproduce it?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[simcon94Participant]

It is very simple to reporduce it.
Take a grid with a columntype: ‘dropdownlist’.
Group this column and you will see the problem

[DimitarParticipant]

Hi simcon94,

Here is such an example: http://jsfiddle.net/Dimitar_jQWidgets/enoqugob/. If I group the dropdownlist column “First Name” nothing unexpected happens.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[simcon94Participant]

Hmm…when you create the column this way:

, {
                        text: '@Resources.MeterType.MeterTypeModel_Unit', columntype: 'dropdownlist', displayfield: 'Unit', datafield: "UnitId", placeHolder: "Bitte wählen", filtertype: 'checkedlist', width: 150,
                        validation: function (cell, value) {
                            if (value) {
                                return true;
                            }
                            return { result: false, message: "@Resources.CostCenter.Error_Grid_Number" };
                        }
                        , createeditor: function (row, cellvalue, editor) {
                            editor.jqxDropDownList({ source: dataAdapterUnit, displayMember: 'Symbol', valueMember: 'Id', placeHolder: "Bitte wählen", dropDownHeight: 100 });
                        },
                    }

It doenst work

[simcon94Participant]

i try this way:

 var data = generatedata(500);
var countries = [
                 { value: "AF", label: "Afghanistan" },
                 { value: "AL", label: "Albania" },
                 { value: "DZ", label: "Algeria" },
                 { value: "AR", label: "Argentina" },
                 { value: "AM", label: "Armenia" },
                 { value: "UK", label: "United Kingdom" },
                 { value: "US", label: "United States" }
            ];
            var countriesSource =
            {
                 datatype: "array",
                 datafields: [
                     { name: 'label', type: 'string' },
                     { name: 'value', type: 'string' }
                 ],
                 localdata: countries
            };
            var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                autoBind: true
            });
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };
var groupcolumnrenderer = function (text) {
    console.log(text);
      if (text === 'Country') {
          return 'Land';
      } else {
          return text;
      }
  }

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
           groupcolumnrenderer: groupcolumnrenderer,
      groupable: true,
     groups: ['countryCode'],
      //groupsrenderer: groupsrenderer,
     editable: true,
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         width: 90,
         columntype: 'dropdownlist'
     }, {
         text: 'Last Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd-MMMM-yyyy'
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     },{
               text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'dropdownlist',
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
                        }}
              ]
 });

Then it works, when you load the grid.
When you close the group and group Country again, it doesn’t work…..

[simcon94Participant]

No idea?

[DimitarParticipant]

Hi simcon94,

We again tried to reproduce the issue as per your instructions: http://jsfiddle.net/Dimitar_jQWidgets/enoqugob/. Everything is fine in this configuration, too.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[simcon94Participant]

i found following :

********* REMOVED CODE DUE TO EULA VIOLATION **************

This works…….

[Author]

Posts