SlickGrid error: Slick.Editors.Text is not a constructor

Question

I'm trying to implement SlickGrid on the edit page of a CakePHP project, and when the page loads I get this error in the javascript console:

slick.grid.js:2173TypeError:'Slick.Editors.Text is not a constructor' (evaluating 'new (editor || getEditor(activeRow, activeCell))')

The data renders correctly in the grid on my page, but when I click on a cell to edit it, it just turns white and I can't type anything. If I click on another cell, that cell will turn white and the first one will stay white.

Here is my php/jQuery code:

<?php echo $this->Html->script("/js/slickgrid/lib/jquery-1.7.min.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/lib/jquery.event.drag-2.0.min.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/lib/jquery-ui-1.8.16.custom.min.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/slick.core.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/slick.grid.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/slick.editors.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/slick.formatters.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/slick.dataview.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/plugins/slick.cellselectionmodel.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/plugins/slick.cellrangedecorator.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/plugins/slick.cellrangeselector.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/plugins/slick.rowselectionmodel.js"); ?>

<?php  // Setup rows and cols array for grid

    $columns = array();
    foreach($route['Stop'] as $stop) {
        $columns[] = array( "name"   => $stop['name'],
                            "field"  => $stop['id'],
                            "id"     => $stop['id'],
                            "editor" => "Slick.Editors.Text");
    }

    $tripId = 1;
    $thisTrip['id'] = $tripId;
    foreach($route['RouteTrip'] as $routeTrip) {
        if($routeTrip['trip_id'] != $tripId) {
            $rows[] = $thisTrip;
            $tripId = $routeTrip['trip_id'];
            $thisTrip['id'] = $tripId;
        }
        else {
            $thisTrip[$routeTrip['stop_id']] = $routeTrip['time'];
        }
    }
?>

<?php 
        echo $this->Html->scriptBlock('

            var rows = '.json_encode($rows).';
            var columns = '.json_encode($columns).';
            var options = { rowHeight:21,
                            defaultColumnWidth:100,
                            editable:true,
                            enableAddRow:true,
                            enableCellNavigation:true,
                            asyncEditorLoading:false,
                            autoHeight:true,
                            autoEdit:true
                          };

            slickgrid = new Slick.Grid($("#scheduleTable"), rows, columns, options);
            slickgrid.setSelectionModel(new Slick.CellSelectionModel());
            slickgrid.updateRowCount();
            slickgrid.render();
        ');
?>

The $rows and $columns are correctly formatted, and each column has an "editor" attribute with "Slick.Editors.Text" as its value.

Help?

Answer 1

I have also got this error initially when i started working with slickgrid.

The error is because you have specified the editor as string and not as a class. So, remove the double quotes in "editor" => "Slick.Editors.Text" and give as "editor" => Slick.Editors.Text

This solved the error for me. Hope this solution will solve yours too.