search

mleibman / SlickGrid

A lightning fast JavaScript grid/spreadsheet
http://wiki.github.com/mleibman/SlickGrid
MIT License
6.81k stars 1.98k forks source link

SlickGrid FrozenColumn, is there a limit to max number of columns? #1002

Open rajbits opened 10 years ago

rajbits commented 10 years ago

I am using slickgrid (its great btw), and trying to use frozenColumn. It seems to work if there are limited number of columns, if the number of columns are more than 20, it seems to blank out. Please refer to the image.

!http://i.imgur.com/FbWMSjk.png

<html> <head> <title>Activities Grid test</title> <style>

container

        {
            padding: 20px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id='container'&gt;
        &lt;div id='myGrid'&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script src=&quot;http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js&quot;&gt;&lt;/script&gt;
    &lt;script id=&quot;itemDetailsTemplate&quot; type=&quot;text/x-jquery-tmpl&quot;&gt;
        &lt;div class='item-details-form'&gt;
            {{each columns}}
                &lt;div class='item-details-label'&gt;
                    ${name}
                &lt;/div&gt;
                &lt;div class='item-details-editor-container' data-editorid='${id}'&gt;&lt;/div&gt;
            {{/each}}

            &lt;hr/&gt;
            &lt;div class='item-details-form-buttons'&gt;
                &lt;button data-action='save'&gt;Save&lt;/button&gt;
                &lt;button data-action='cancel'&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/script&gt;
    &lt;script&gt;
        function addCalendar(columns)
        {
            var from = window.START_DT ? moment(window.START_DT) : moment().subtract('30', 'days');
            var to = window.END_DT ? moment(window.END_DT) : moment().add('0', 'months');

            var i = from.clone(), W = 45;
            while (i.isBefore(to))
            {
                i.add('1', 'day');
                columns.push({id: i.unix(), name: i.month() + '/' + i.date(), field: i.year() + '-' + i.month() + '-' + i.date(), minWidth: W, width: W, maxWidth: W, editor: Slick.Editors.Text});
            }
        }

        function loadCss(list, callback)
        {
            var head = document.getElementsByTagName('head')[0];
            $.each(list, function(i, l)
            {
                $('&lt;link/&gt;').attr({ rel: 'stylesheet', href: l}).appendTo(head);
            });

            if (callback) callback();
        }

        function requiredFieldValidator(value)
        {
            if (value == null || value == undefined || !value.length)
            {
                return {valid: false, msg: &quot;This is a required field&quot;};
            }
            else
            {
                return {valid: true, msg: null};
            }
        }

        function apply()
        {
            var grid, data = [];

            var options =
            {
                editable: true,
                enableAddRow: true,
                enableCellNavigation: true,
                asyncEditorLoading: false,
                autoEdit: true,
                forcefitColumns: false,
                frozenColumn: 2
            };

            var columns =
            [
                {id: &quot;title&quot;, name: &quot;Title&quot;, field: &quot;title&quot;, width: 120, cssClass: &quot;cell-title&quot;, editor: Slick.Editors.Text, validator: requiredFieldValidator},
                {id: &quot;desc&quot;, name: &quot;Description&quot;, field: &quot;description&quot;, width: 100, editor: Slick.Editors.LongText},
                {id: &quot;duration&quot;, name: &quot;Duration&quot;, field: &quot;duration&quot;, editor: Slick.Editors.Text},
                {id: &quot;percent&quot;, name: &quot;% Complete&quot;, field: &quot;percentComplete&quot;, width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
                {id: &quot;start&quot;, name: &quot;Start&quot;, field: &quot;start&quot;, minWidth: 60, editor: Slick.Editors.Date},
                {id: &quot;finish&quot;, name: &quot;Finish&quot;, field: &quot;finish&quot;, minWidth: 60, editor: Slick.Editors.Date},
                {id: &quot;effort-driven&quot;, name: &quot;Effort Driven&quot;, width: 80, minWidth: 20, maxWidth: 80, cssClass: &quot;cell-effort-driven&quot;, field: &quot;effortDriven&quot;, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}
            ];

            addCalendar(columns);

            for (var i = 0; i &lt; 5000; i++)
            {
                var d = (data[i] = {});

                d[&quot;title&quot;] = &quot;Task &quot; + i;
                d[&quot;description&quot;] = &quot;This is a sample task description.\n  It can be multiline&quot;;
                d[&quot;duration&quot;] = &quot;5 days&quot;;
                d[&quot;percentComplete&quot;] = Math.round(Math.random() * 100);
                d[&quot;start&quot;] = &quot;01/01/2009&quot;;
                d[&quot;finish&quot;] = &quot;01/05/2009&quot;;
                d[&quot;effortDriven&quot;] = (i % 5 == 0);
            }

            grid = new Slick.Grid(&quot;#myGrid&quot;, data, columns, options);
        }

        function init()
        {               
            require
            (
                ['../src/assets/lib/jquery/jquery-2.0.3.min.js'],
                function($)
                {
                    require
                    (
                        [
                            'https://code.jquery.com/ui/1.11.1/jquery-ui.min.js',
                            'http://cdn.jsdelivr.net/jquery.event.drag/2.2/jquery.event.drag.min.js',
                            'http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js',  
                            'http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js',               
                            sg + 'slick.core.js',
                            sg + 'slick.grid.js',
                            sg + 'slick.editors.js',
                            sg + 'slick.formatters.js',
                            sg + 'slick.dataview.js',
                            sg + 'slick.groupitemmetadataprovider.js',
                            sg + 'slick.remotemodel.js',
                            sg + 'controls/slick.columnpicker.js'       
                        ], 
                        function()
                        {
                            apply();
                        }
                    );

                    loadCss
                    ([                          
                        '../src/assets/lib/bootstrap/css/bootstrap.min.css',
                        'https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css',
                        sg + 'slick-default-theme.css',
                        sg + 'slick.grid.css',
                        sg + 'controls/slick.columnpicker.css',
                        'css/slick.example.css',
                        'css/testgrid.css'
                    ]);
                }                   
            );                                              
        }

        var lib = 'lib/', sg = lib + 'slickgrid/';
        init();

    &lt;/script&gt;
&lt;/body&gt;

</html>

asrini777 commented 9 years ago

Hi Raj,

I am also facing same issue..when no.of columns are more than 23 then first column(Frozen column) data is not rendering if I scroll horizontally and vertically.

Any thoughts on this...?

Thanks, Srini

jayadurgapeetam commented 9 years ago

Hi Srini,

I have not been able to successfully fix the behavior. Have moved on to other implementations (HandsonTable).

Thanks, Raj

asrini777 commented 9 years ago

No Raj,

Still I am trying to fix this..

asrini777 commented 9 years ago

Hi Raj,

Finally it's fixed..

Resolution: In slick.grid.js add below mentioned code.

} else if (( options.frozenColumn > -1 ) && ( i <= options.frozenColumn )) { appendCellHtml(stringArrayL, row, i, colspan); //Remove this line appendCellHtml(stringArrayL, row, i, colspan, d); //Add this line }

May be this will be helpful...

Thanks, Srini

jayadurgapeetam commented 9 years ago

wow, thats great! Will try that fix. Thanks so much!

asrini777 commented 9 years ago

You are WC