Loading ...
Sorry, an error occurred while loading the content.

How to modify the content of a datatable cell and run the cell formatter again?

Expand Messages
  • saw8304
    Hello everyone I am new to YUI and got a bit stucked trying to modify a datatable cell (YUI 2.6.0). There is the following column definition. var
    Message 1 of 3 , Nov 4, 2008
    • 0 Attachment
      Hello everyone

      I am new to YUI and got a bit stucked trying to modify a datatable
      cell (YUI 2.6.0).

      There is the following column definition.

      var columnDefinitions = [
      {key:"id", label:'ID', sortable:true, width: 50},
      {key:"name", label:'Text', sortable:true, width: 120},
      {key:"localizedDescriptionId", label:'Msg', sortable:true,
      width: 120},
      {key:"lastModified", label:'Date', sortable:true, width: 100},
      {key:"username", label:'User', sortable:true, width: 80},
      {key:"customerId", label:'customer, sortable:true, width: 40},
      {key:"sealed", label:'Sealed', sortable:false, width: 60,
      formatter: publicFormatter}
      ];

      At the last column there is a custom formatter 'publicFormatter'
      defined. This formatter sets a specific image into the cell according
      to the parameter flag 'oData'.

      var publicFormatter = function(elCell, oRecord, oColumn, oData)
      {
      elCell.innerHTML = (oData) ? lockedImage : unlockedImage;
      }

      Up to here everything works great. The datatable gets rendered and the
      images are set correctly. Now I would like to change the image (due to
      a successful async ajax operation) because the flag turn e.g from true
      to false.

      var selectedRows = dt.getSelectedRows();
      var selectedRowId = selectedRows[0];
      var row = document.getElementById(selectedRowId);
      var record = dt.getRecord(row);
      record.setData('sealed', true); // set cell data

      How can I tell the datatable to run the formatter again for this
      specific cell (or the whole datatable).

      Best regards
      Silvio
    • Satyam
      ... The DataTable knows about what s below, the Record object doesn t know about what s above. If you update the Record, the DataTable won t refresh the
      Message 2 of 3 , Nov 5, 2008
      • 0 Attachment
        saw8304 wrote:
        > Hello everyone
        >
        > I am new to YUI and got a bit stucked trying to modify a datatable
        > cell (YUI 2.6.0).
        >
        > There is the following column definition.
        >
        > var columnDefinitions = [
        > {key:"id", label:'ID', sortable:true, width: 50},
        > {key:"name", label:'Text', sortable:true, width: 120},
        > {key:"localizedDescriptionId", label:'Msg', sortable:true,
        > width: 120},
        > {key:"lastModified", label:'Date', sortable:true, width: 100},
        > {key:"username", label:'User', sortable:true, width: 80},
        > {key:"customerId", label:'customer, sortable:true, width: 40},
        > {key:"sealed", label:'Sealed', sortable:false, width: 60,
        > formatter: publicFormatter}
        > ];
        >
        > At the last column there is a custom formatter 'publicFormatter'
        > defined. This formatter sets a specific image into the cell according
        > to the parameter flag 'oData'.
        >
        > var publicFormatter = function(elCell, oRecord, oColumn, oData)
        > {
        > elCell.innerHTML = (oData) ? lockedImage : unlockedImage;
        > }
        >
        > Up to here everything works great. The datatable gets rendered and the
        > images are set correctly. Now I would like to change the image (due to
        > a successful async ajax operation) because the flag turn e.g from true
        > to false.
        >
        > var selectedRows = dt.getSelectedRows();
        > var selectedRowId = selectedRows[0];
        > var row = document.getElementById(selectedRowId);
        > var record = dt.getRecord(row);
        > record.setData('sealed', true); // set cell data
        >
        > How can I tell the datatable to run the formatter again for this
        > specific cell (or the whole datatable).
        >
        > Best regards
        > Silvio
        >
        >
        >
        >
        The DataTable knows about what's below, the Record object doesn't know
        about what's above. If you update the Record, the DataTable won't
        refresh the screen because it won't know about it. You will have to use
        either updateCell or updateRow to have both the interface and the Record
        updated:

        http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#method_updateCell

        Satyam
      • saw8304
        Hello Satyam Thank you very much for your answer. ... interface and the Record updated: This code made it work (as you have suggested). var record =
        Message 3 of 3 , Nov 5, 2008
        • 0 Attachment
          Hello Satyam

          Thank you very much for your answer.

          --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
          > You will have to use either updateCell or updateRow to have both the
          interface and the Record updated:

          This code made it work (as you have suggested).

          var record = dt.getRecord(row);
          var col = dt.getColumn('sealed');
          dt.updateCell(record, col, true);

          Best regards,
          Silvio
        Your message has been successfully submitted and would be delivered to recipients shortly.