Results 1 to 6 of 6

Thread: Change the dataIndex of selected grid row

  1. #1
    Sencha User
    Join Date
    Jan 2017
    Posts
    16

    Default Answered: Change the dataIndex of selected grid row

    Hi,

    I would appreciate some guidelines on the following:

    I have a Store, a Model and a Grid.
    The content of the Grid columns is defined by pointing to the data fields in the Model, through the column's 'dataIndex' config.

    I want to accomplish the following behaviour:
    In the Grid, when selecting a row by clicking on it, I want a cell in this selected row to display the data of another field from my data Model.
    And when this row becomes un-selected, I want to return to the data as originally displayed.

    My approach was to have the 'dataIndex' config of this cell changed into another one. But so far I have not been able to get near a solution.
    Perhaps there are other ways to accomplish this.

    A have prepared a simple fiddle here: https://fiddle.sencha.com/#view/editor&fiddle/303f , to further clarify my question.

  2. Hi,

    For the version of ExtJs you are using (6.2 Classic), you can try :
    Code:
    {
        text:'Changing content',
        dataIndex: 'state',
        renderer: function(value, cell, record) {
            return '<span class="initial-value">' + Ext.String.htmlEncode(value) + '</span>'
             + '<span class="combi-value">' + Ext.String.htmlEncode(record.get('combi')) + '</span>';
        }
    }
    with CSS :
    Code:
    <style>
        .combi-value {
            display: none;
        }
        .x-grid-item-selected .initial-value {
            display: none;
        }
        .x-grid-item-selected .combi-value {
            display: block;
        }
    </style>
    For modern toolkit, see Ext.grid.cell.Text.encodeHtml

  3. #2
    Sencha Premium User
    Join Date
    Mar 2017
    Posts
    21
    Answers
    1

    Default

    Hi,

    For the version of ExtJs you are using (6.2 Classic), you can try :
    Code:
    {
        text:'Changing content',
        dataIndex: 'state',
        renderer: function(value, cell, record) {
            return '<span class="initial-value">' + Ext.String.htmlEncode(value) + '</span>'
             + '<span class="combi-value">' + Ext.String.htmlEncode(record.get('combi')) + '</span>';
        }
    }
    with CSS :
    Code:
    <style>
        .combi-value {
            display: none;
        }
        .x-grid-item-selected .initial-value {
            display: none;
        }
        .x-grid-item-selected .combi-value {
            display: block;
        }
    </style>
    For modern toolkit, see Ext.grid.cell.Text.encodeHtml

  4. #3
    Sencha User
    Join Date
    Jan 2017
    Posts
    16

    Default

    Hi sentinelo,

    Different route from mine, but works like a charm!
    Thanks for your response!

  5. #4
    Sencha Premium User
    Join Date
    Mar 2017
    Posts
    21
    Answers
    1

    Default

    you're welcome...
    I understand that you wanted to "Find the record and the expected cell in store/grid, change the content and do the opposite while deselecting"
    I've faced so many extjs' "bufferedrendering" issues while trying to play with cell contents (column visibility, rowexpander, ...) that I wanted to prevent you from doing that.
    I had to find a simpler and safer alternative.
    Pretty sure I'll be asked for such behaviour.

  6. #5
    Sencha User
    Join Date
    Oct 2018
    Location
    Noida
    Posts
    56
    Answers
    10

    Default

    Hi Xermit,

    You can also use rowbody to show the details for selected row. By default you can give hidden style to rowbody and with x-grid-selected class you can make gridbody as visible.
    So that process will have less DOM manipulation while selecting any grid row.

    Cheers!
    Last edited by praveensaini23; 22 Oct 2019 at 10:16 PM. Reason: typo fix

  7. #6
    Sencha User
    Join Date
    Jan 2017
    Posts
    16

    Default

    Hi praveensaini23,

    Thanks for your tip!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •