topic dgrid - turn off row rendering in ArcGIS JavaScript Maps SDK Questions

dgrid - turn off row rendering

TracySchloss — Mon, 27 Jul 2015 19:49:45 GMT

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;

}

Re: dgrid - turn off row rendering

thejuskambi — Tue, 28 Jul 2015 16:19:28 GMT

I am not able to understand the requirement clearly. Could you try to explaing with some screen shot/image how you want to display the data. also could you be more specific like you want the same dgrid to display different tables with(out) similar structure.

renderRow is kind of main function which is responsible to creating the domNode for the entire row.

Re: dgrid - turn off row rendering

TracySchloss — Sat, 11 Dec 2021 16:45:06 GMT

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);
}