dgrid - turn off row rendering

TracySchloss

I have a dgrid that I had originally set up with a renderRow

  providerGrid = new dataGrid({

        id: 'selectGrid',

        selectionMode: 'single',

       showHeader: false,

      renderRow: renderRowFunction,

        loadingMessage: 'Loading data...',

    noDataMessage: 'No providers available in this area.'

    }, "providerDiv");

When each row is rendered, it's based on several fields and each record is rather tall.  I would like to be able to allow the user to see a tabular version, using the same grid, but just change how it's displayed.  I haven't been able to figure out how to remove the renderRow parameter. 

I have a button that executes a function that will turn on the headers.  I tried making a render function that just returned the object without doing any formatting, but that doesn't do anything.

    function toggle_GridTable() {

      providerGrid.set("showHeader", true);

      providerGrid.set('renderRow', renderNothing);

    } 

    function renderNothing (obj, options){

      return obj;

    }

TracySchloss

I came up with a workaround.  When using a row renderer, I'm combining information from several attributes and formatting it to be more of a paragraph.    It's really a grid that's one column wide.

I added the ColumnHider extension.  I took out the renderRow parameter, but was able to use the exact same function to render just one column.

  var dataGrid = new declare([Grid, Selection, Keyboard, ColumnResizer, ColumnHider]);
   
    //providers in the sidebar
  app.provGridColumns =  [
    {
      field:'List',
      name:'List',
      label:'',
      renderCell:renderRowFunction,
      hidden:true
    },
    {
        field: 'facility',
        label: 'Provider',
        hidden:true
    },
    {
        field: 'compoundCell',
        label: 'Address / Phone',
        renderCell: renderCellFunction,
        hidden:false
    },
      {
        field: 'city',
        label: 'City',
        hidden:true
    },
      { field: 'state',
        label: 'State',
        hidden:true
    },
        {
        field: 'phone',
        label: 'Phone',
        hidden:true
    },
    {
        field: 'specialty',
        label: 'Specialty',
        hidden:false
    }
];


    app.providerGrid = new dataGrid({
        id: 'selectGrid',
        selectionMode: 'single',
      columns:app.provGridColumns,
        loadingMessage: 'Loading data...',
    noDataMessage: 'No providers available in this area.'
    }, "providerDiv");

I included a few more columns to my grid, but made them hidden. Now my button is used to turn off the column the contains the  paragraph style formatted attributes and turns on the columns with individual attributes.  It gives me the results I was looking for.  I still have a renderCell in the middle, but that's mostly an experiment to see how I can fit the most information into a sidebar.  I may end up with a different combination of attributes, but at least I have a mechanism to do it.

function toggle_GridTable() {
       var head = app.providerGrid.get("showHeader");
       if (app.providerGrid.columns[0].hidden){
         app.providerGrid.columns[0].hidden = false;
         app.providerGrid.columns[1].hidden = true;
         app.providerGrid.columns[6].hidden = true;
       } else {
         app.providerGrid.columns[0].hidden = true;
         app.providerGrid.columns[1].hidden = false;
         app.providerGrid.columns[2].hidden = false;
         app.providerGrid.columns[6].hidden = false;
       }
       
       if (head){
         app.providerGrid.set("showHeader", false);
       }else {
      app.providerGrid.set("showHeader", true);
}