Our blazing fast Grid component built with pure JavaScript


Post by janan »

Hi,
In the following example,
https://www.bryntum.com/examples/grid/celledit/
I have changes the js as follows. I have used renderers to get the dropdown text otherwise I get the key value and not the text.
Is there any better way to do this as in column.renderer can we access directly text for the given value?

Changed column 'birthplace' as so:

{
            text   : 'Birthplace',
            field  : 'city',
            width  : '8em',
            renderer : _renderDropDown,
            editor : { type : 'dropdown',
            items : [
              { value: 'Moscow', text: 'moscue' },
              { value: 'Dubai', text: 'dub' },
              { value: 'Barcelona', text: 'bar' },
              { value: 'Paris', text: 'par' },
              { value: 'Stockholm', text: 'stk' },
              { value: 'New York', text: 'ny' },
              { value: 'San Francisco', text: 'san' },
              { value: 'Washington', text: 'wash' }
            ] ,
            displayValueRenderer:_renderDropDownEdit,
          }
        },
var _renderDropDown = function(record) {
  var value = record.value,
      items = record.column.data.editor.items,
      text;
  for (var i =0; i<items.length; i++) {
    if(items[i].value === value) {
      text = items[i].text;
    }
  }
  return text;
};
var _renderDropDownEdit = function(value) {
  var value = value;
    if(value && value.data) {
      value = value.data.text;
    }
  return value;
};

Post by mats »

Why not just use https://bryntum.com/docs/scheduler/#Core/widget/Combo#config-displayField and point it to the 'text' property?

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post by janan »

Hi,
I made the following changes but I do get the value not text. Could you please let me know where I go wrong?

{
            text   : 'Birthplace',
            field  : 'city',
            width  : '8em',
            //renderer : _renderDropDown,
            editor : { type : 'combo',
            valueField: 'value',
            displayField: 'text',
            items : [
              { value: 'Moscow', text: 'moscue' },
              { value: 'Dubai', text: 'dub' },
              { value: 'Barcelona', text: 'bar' },
              { value: 'Paris', text: 'par' },
              { value: 'Stockholm', text: 'stk' },
              { value: 'New York', text: 'ny' },
              { value: 'San Francisco', text: 'san' },
              { value: 'Washington', text: 'wash' }
            ] ,
          //  displayValueRenderer:_renderDropDownEdit,
          }

Post by fabio.policeno »

Hi janan,

The best option is that after you select an item on your dropdown you have to find on dropdown store that item record to show in the grid cell the specific value that you want.

Here is an example:

{
    text   : 'Birthplace',
    field  : 'city',
    width  : '8em',
    editor : {
        type         : 'dropdown',
        valueField   : 'name',
        displayField : 'text',
        items        : [{
            name : 'Dubai',
            text : 'Dubai 1'
        }, {
            name : 'Moscow',
            text : 'Moscow 1'
        }, {
            name : 'San Francisco',
            text : 'San Francisco 1'
        }, {
            name : 'New York',
            text : 'New York 1'
        }, {
            name : 'Paris',
            text : 'Paris 1'
        }]
    },
    renderer : ({ value, column }) => column.editor.store.getById(value)?.get('text')
}

If you have any question, please let us know.

Fabio Jr. Policeno
Core Developer


Post by jandresampaio »

Hi,

We are having a similar issue, but in our case the list of combo items is dynamic, and we need to fetch it from the server, according with current row params. What would be the correct way to do this?

Up until now, we were doing what seems to be a workaround, by setting the items on the beforeCellEditStart event and then using displayValueRenderer to display the text. As a side note - record param in displayValueRenderer is always undefined.

function beforeCellEditStart(e) {
    if (e.editorContext.column.field == "StageComboColumn") {
        fetch("server", params).then( items => {
             // selected value exists in data fetched from server? if not, push current selected item to combo items, 
            // otherwise it would only appear the id
                            const { WorkflowStateId: StatusId, WorkflowStateName: StatusName } = e.editorContext.record;
            const existsInFetchedData = items.find(t => t.StatusId === StatusId);
            if (!existsInFetchedData )
                items.push({ StatusId, StatusName })
             e.editorContext.column.editor.items = items

    });
}
return true;
}
      {
            id: "stagecombocolumn",
            field: 'StageComboColumn',
            text: "Stage",
            align: 'center',
            editor: {
                type: 'combo',
                valueField: 'StatusId',
                displayField: 'StatusName',
                items: [],
                displayValueRenderer: function stageRenderer(record, combo) {
                    const selectedValue = combo && combo.store.getById(combo.value);
                    return selectedValue ? selectedValue.StatusName : "";
                },
            },
            renderer: function stageRenderer(e) {
                const transition = e.column.editor.store.getById(e.value);
                return transition ? transition.get("StatusName") : e.record.get("WorkflowStateName");
            }
        },


Post by fabio.policeno »

Hi jandresampaio,

To filter your combo options according with the current record being edited you don't have to populate it manually, you can use https://www.bryntum.com/docs/grid/#Core/data/AjaxStore on your combo that it will make the hard work automatically according your server response. On https://www.bryntum.com/docs/grid/#Grid/feature/CellEdit#event-beforeCellEditStart event you can filter it.

Here is a short example:

columns : [
        ...
        {
            text   : 'Birthplace',
            field  : 'city',
            editor : {
                type         : 'combo',
                valueField   : 'name',
                displayField : 'text',
                // store configs
                store        : {
                    type    : 'ajax', // remote store
                    readUrl : 'cities.json', // your url to bring the combo options
                    idField : 'name', // the field identified
                    filterParamName : 'myFilter' // the parameter name for your filter
                }
            }
        },
        ...
    ],
    ...
    listeners : {
        ...
        beforeCellEditStart({ editorContext }) {
            // here is filtering by name, but you can filter for category or the field  conditionyou are using to identify the record
            editorContext.editor.store.filter('name', editorContext.record.city);
        }
    },

Here you have more details with examples about the remote filter on stores: https://www.bryntum.com/docs/grid/#Core/data/AjaxStore

Now, to show value on column where you have the editor I would recommend you bring that value together with your grid data as an extra field on your model instead of filter on renderer because that data on combos are dynamic and you don't have that data on your editor combo store.

Any additional question, please let us know.

Fabio Jr. Policeno
Core Developer


Post by jandresampaio »

Can we map the server response to match the format bryntum requires?
We just receive a flat array and not an object with { success: true, data: [] }


Post by fabio.policeno »

jandresampaio, since is a different question, please open a new post including a test case. Thank you.

Fabio Jr. Policeno
Core Developer



Post by alex.l »

Hi jandresampaio,

This is set of filter objects. The object is specified in our docs: https://www.bryntum.com/docs/grid/#Core/data/AjaxStore#remote-filtering

{
    "field": "country",
    "operator": "=",
    "value": "sweden",
    "caseSensitive": false
}

Post Reply