Showing Child Collections as sub rows.

[Daniel]

Hi!

I am really liking Slickgrid! Although I haven't been able to find the answer to my question.

I would like to show a sub rows of a data row in the grid that can be expanded or collapsed. But the sub rows must come from a column that is a collection.

For Example :

Category 1

     SubCategory 1

     SubCategory 2

     SubCategory 3

Category 2

     SubCategory 1

     SubCategory 2

Category 3

Where I have a collection of categories, each with a collection of sub categories. 

Is this possible to achieve? 

Thank you,

Daniel

[Daniel]

I'd like to display a custom sub row based off a sub collection(nested collection).. Would anyone have an example?

"Hello?" *hears an echo in the valley* :)

[Steve Zlamany]

I've done this with a SlickGrid - having columns span.  In a way that becomes sub rows if you color them properly and put good open/close icons on them.  Does this seem like something you want me to expand on with you?  btw - there is a forum - VBFORUMS.com - that has a jQuery section where a question like this would get attention.

​

--
You received this message because you are subscribed to the Google Groups "SlickGrid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Daniel]

Hi and thank you for your reply!

My question was more on the functionality of slickgrid rather than a jquery question. SlickGrid automatically generates rows based on a collection of objects you provide it. But if those objects have sub collections, I was wondering if slickgrid would automatically create sub rows for those. But it doesn't seem to.

SlickGrid has a grouping functionality, but I wasn't able to figure out how to use it to suit my needs.

Maybe your way would work for me as well. If you think it can, can you post a small example?

Thanks!

[Steve Zlamany]

So you are looking to have a "row" have "child" rows buried in an object within that object row?

In other words you might have 100 rows in the SlickGrid main "source object" array with those rows having a variable amount of child rows within.

From how I know SlickGrid works it's all about the viewport faking the display of rows in the source object - just showing enough to allow a bit of up/down scrolling and re-drawing in bulk when you move faster.  I've got lots of implementations where the grid has 10,000+ rows.

With that said, if I was doing what you are I would make a NEW object with all the rows "expanded".  Hiding rows is an easy task. My slick source is always a FUNCTION that returns the source array.  That way I can have the function adjust the rows seen in the grid (I have a standard SlickGrid filter my users work with).

[Daniel]

Would you have an example showing child rows loaded from an object with child objects?

Right now I just want to be able to show it in the grid, then I will try and figure out how to show and hide them.

Thank you.

[Steve Zlamany]

From what I know SlickGrid's basic design is to expose rows from an array of objects - I've just googled around and found no parent/child native implementation.

So you are left with setting the SOURCE to a function that can alter what it exposes as it's output value.

Then you have to hack the SlickGrid source to alter how it shows some rows - as I am guessing you want the child rows to look different.  That's what I showed in my image from my first post.  I've altered the SlickGrid source to use custom CSS settings for certain rows - based on a value in that row object.

I'm not really sure how I got subscribed to this google group - is it easy for people to find posts about issues with code snippets?  Is this easy to search??

[Steve Zlamany]

Got busy here today - no time to put up any code.  Have you solved your problem?  On your way to a solution??

I can post some code tomorrow AM if you are still interested.

[Daniel]

If you wouldn't mind posting some code, would be really helpful!

Thanks again for taking the time to write.

[Steve Zlamany]

Does the following function make sense to you??  Where you currently pass the SOURCE OBJECT array into the New SlickGrid you instead create a NEW GRID_SOURCE - then call the SET_SOURCE method to pass in the SOURCE OBJECT array.  Then in that spot where you pass the SOURCE OBJECT you instead pass the GET_OUTPUT method.

var grid_source = function () {

    var origSource = [];

    var expandedRows = [];

    var outputRows = [];

    var i_set_output = function() {

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

            outputRows.push(origSource[i]);

            if (expandedRows[i]) {

                for (var j=0; j < origSource[i].ChildField.length; j++) {

                    outputRows.push(origSource[i].ChildField[j]);

                }

            }

        }

    };

   

    return {

        set_source: function (a) {

            origSource = a;

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

                expandedRows[i] = false;

            }

            i_set_output();

        },

        get_output: function () {

            return outputRows;

        },

        expand_row: function (i) {

            expandedRows[i] = true;

            i_set_output();

        },

        close_row: function (i) {

            expandedRows[i] = false;

            i_set_output();

        }

    |;

};

[Steve Zlamany]

The i_set_output function needs this as the first line of code.

outputRows = new Array();

[Daniel]

Hello,

Sorry I just noticed your post today. I will definitely look into it and see if it can work. Thanks!

Will this allow edits you think? "editor: Slick.Editors.Text"

[Daniel]

Hello!

I finally had a chance to fiddle with the code you gave me but not sure how it can display the sub rows in the grid.. Would it be possible to provide an example using jsfiddle?

On Thursday, 23 April 2015 19:05:24 UTC-4, szlamany wrote: