Multiple tabs each with own slickgrid table

[longraider007]

Hi,

it is possible to have a table with multiple tabs and in each tab a slickgrid table? Similar like in in an excel sheet with multiple tabs.

[6pac]

There's an example in my Alternative Master repo:

http://6pac.github.io/SlickGrid/examples/example-jquery-accordion.html

[longraider007]

Hi 6pac,

Thank you for your response. That is exactly what I am looking for.

I see that the number of grids are pre-defined in the code. It is possible to create a number of grids depending on a function, so flexible number of grids based on the circustance.

[6pac]

Yes, it is possible. You'd need to store the grids in an array or object. There was a recent enhancement to the repo to pass the grid object as the last parameter in all the events. This helps event code be independent of a particular hard-coded grid - this would be a necessity the case you are requesting. However I'm not 100% sure that that's going to be enough. I'll try to put together a purely dynamic grid example in the next few days. Quite a few people have been touching on this issue in the past 6 months, but we haven't had a definitive solution yet. This is probably the best test case for developing one.

[6pac]

note also the IE8 bug around this issue - it could be a show stopper:

look for 'Blank Grid Display in Accordion in IE8' here

[longraider007]

Thanks for your help. I look forward to your example with the dynamic grid....

[6pac]

OK a basic dynamic tab/grid is at: https://github.com/6pac/SlickGrid/blob/master/examples/example-dynamic-with-jquery-tabs.html

The next step is to do an advanced version with all the bells and whistles. That might take another week.

Live example at: http://6pac.github.io/SlickGrid/examples/example-dynamic-with-jquery-tabs.html

[longraider007]

ok, thank you very much....

[longraider007]

It is possible to use dataview in the dynamic tab/grid with filters?

I am trying

    dataView = new Slick.Data.DataView({ 
      groupItemMetadataProvider: groupItemMetadataProvider,
      inlineFilters: true 
    });

    dataView.beginUpdate();
    dataView.setItems(newArray);
    //dataView.setFilter(myFilter);
    groupBy();
    dataView.endUpdate();

    var grid = new Slick.Grid("#"+ tab[i], dataView, CreateColumns(), options);

but I get the following error:

Uncaught Error: SlickGrid requires a valid container, #11 does not exist in the DOM.

[6pac]

I'll see if I can put together this as an example later in the week. But if you switch to my repo, you'll see that the final parameter of all the event calls is the grid object (this was added recently). This gives your filter/sort/whatever events a handle on the datasource. Without that, it's probably not possible. I'm pretty sure my repo will do it without further mods, but I haven't put together an example to prove it yet

[longraider007]

Again, thank you for your help & time....

Look forward to your new example

[longraider007]

Hi,

Is it possible to create an example with all the bells and whistles? Thanks....

[6pac]

Live example at: http://6pac.github.io/SlickGrid/examples/example-dynamic-filtered-with-jquery-tabs.html

It's on the repo as an example with the same name.

[6pac]

This implements all the functions from example-4-model. A note is that the EditorLock defaults to a single global lock for the page, so it's necessary to pass a new EditorLock for each grid using the options. There are comments in the page source that run over a few of the options for customising things.

[longraider007]

That looks great!!! I will take a look. Thank you so much...

[longraider007]

Hi,

I am testing the new example with my own code, but I still get the following error message:

Uncaught Error: SlickGrid requires a valid container, #chapter1 does not exist in the DOM.

My code is:

function createGrid(no, tab, data){ if (!gridArray) { gridArray = []; dataViewArray=[]; }

var columns = CreateColumns(); var options = CreateOptions(); var dataView = new Slick.Data.DataView(); var grid = new Slick.Grid("#" + tab, dataView, columns, options); <----error

Can you please help me with what I am doing wrong? I still have not figured it out.

Thank you in advance.

[6pac]

little hard to tell without knowing the parameter values, but the error message is indicating that the 'tab' parameter has the value 'chapter1', but that there is not a <div> in the page with that id that the grid code can use as a container when creating the grid.

[longraider007]

Hi,

Here is my code...Thx

$(function () {      
    chapter=_.uniq(_.pluck(data,'chapter'));    // get the unique values under the header 'chapter'

    $( "div#tabs" ).tabs(); 

    for (var i=0; i< chapter.length; i++){

        var newArray = _.filter(database, function(data){        // filter the database to contain only the value chapter[i]
       return data.chapter==chapter[i];                      // and put this in the variable newArray
       });

    // ************newArray: contains the data to populate the grid*************

    current_chapter = chapter[i];

    var num_tabs = $("div#tabs ul li").length + 1;

    $("div#tabs ul").append(
        "<li><a href='#tab" + num_tabs + "'>Grid " + num_tabs + "</a></li>"
    );

    $("div#tabs").append(
            "<div id='tab" + num_tabs + "'>"
        + '<div id=' + current_chapter + ' style="width:600px;height:300px;" class="my-grid"></div>'
        + "</div>"
        );

    createGrid(i, current_chapter , newArray);
    $("div#tabs").tabs("refresh");
    };
});


function createGrid(no, current_chapter, data){
  if (!gridArray) { gridArray = []; dataViewArray=[]; }

  var columns = CreateColumns();
  var options = CreateOptions();
  var dataView = new Slick.Data.DataView();

  if (current_Book.length < 1) {
    console.info(container.length);
  }
  var grid = new Slick.Grid("#" + current_chapter, dataView, columns, options);    <--- error message here
  grid.setSelectionModel(new Slick.RowSelectionModel());
  var pager = new Slick.Controls.Pager(dataView, grid, $("#" + current_chapter));
  var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
}

gridArray[no] = grid;
dataViewArray[no] = dataView;

[6pac]

for a start, the HTML properties must be enclosed in double quotes:

$("div#tabs ul").append(
    '<li><a href="#tab' + num_tabs + '">Grid ' + num_tabs + '</a></li>'
);

$("div#tabs").append(
        '<div id="tab' + num_tabs + '">'
    + '<div id="' + current_chapter + '" style="width:600px;height:300px;" class="my-grid"></div>'
    + '</div>'
    );

[longraider007]

Thanks for your response. I amended my code, but still the same error message.....

Is it allowed to give the variable 'current chapter' any string values (for example names) or should it be string + number?

What I try to create is that after reading the data, it will create the necessary tabs. The number of tabs is dynamic. It is a bit different compare to your example.

[6pac]

the only way to really help with this is for you to share your full code. you could: (1) create a jsfiddle (runnable live, but tricky to get all the dependencies right) (2) attach your page as a zip file to your reply, make sure it can be dropped into the examples folder and work as pure js (use a JSON writer to create a statement to set up the server data array manually if you need server data) the problem doesn't really appear to be slickgrid, it's just the javascript and HTML setup

[longraider007]

Hi,

I figured it out. My fault. I forgot to include the table at the top of the page.

Thanks!!