EzDevInfo.com

Saving changes in SlickGrid

HI, I'm looking at SlickGrid and I can see example on how to edit the cell, however do I save these changes. I have yet to find an example that tells me how to do this.

SlickGrid what is a Data View?

I started to use SlickGrid and I got confused about the difference between Data View and Grid (with editing enabled). I haven't found in the docs some discussion about data view, although it has been mentioned there.

Please enlighten me.

SlickGrid Column Groups

Is there a way to add a column groupings? For example:

   Unit 1    |    Unit 2    |
Pre Mid Post | Pre Mid Post |
--- --- ---- | --- --- ---- |
 2   4   5   |  3   4   4   |
 1   2   4   |  3   4   5   |

Basically, I need a header row for Unit that has three subcolumns in the Unit group; Pre, Mid, and Post.

This concept can also be seen in following pictures:

Disabling specific cell edit in Slick grid

Is there a way to disable a cell for editing? We can define editor at column level but can we disable that editor for specific rows?

SlickGrid AJAX data

I'm trying to get AJAX working with SlickGrid. The example given is hardcoded for Digg.

Also, I don't think the cache is working in that example. And because of the Digg rate limiting, it's hard to really get feel for how it works. How can I setup SlickGrid to get data from my database with paging.

How to add a row using javascript in SlickGrid

I am trying to add a row to a slick grid on my page using javascript. The way I am able to do it now is by using the following code. I was just wondering if there was a better way to do the same.

....

//data is the array which was used to populate the SlickGrid
data.push({name:'Finish scanning the slickgrid js', complete:false}); 
grid.setData(data);
grid.render();

....

How do I add a css class to particular rows in slickGrid?

I've searched everywhere to find out how to add a class to a particular row in slickgrid. It looks like there used to be a rowCssClasses property but it's gone now. Any help on this would be extremely appreciated.

Update: I figured it out using the getItemMetadata...so before you render, you have to do something like this:

dataView.getItemMetadata = function (row) {
    if (this.getItem(row).compareThis > 1) {
        return {
            'cssClasses': 'row-class'
        };
    }
};

That will inject that 'row-class' into the row that matches the if statement. It seems that this getItemMetadata function doesn't exist until you put it there and slickGrid checks to see if there's anything in there. It makes it kind of difficult to figure out it's options but if you search for getItemMetadata in the slick.grid.js file you should find some hidden treasures! I hope this helps someone!

If there's a better way of doing this, please let me know.

JavaScript data grid for millions of rows [closed]

I need to present a large number of rows of data (ie. millions of rows) to the user in a grid using JavaScript.

The user shouldn't see pages or view only finite amounts of data at a time.

Rather, it should appear that all of the data are available.

Instead of downloading the data all at once, small chunks are downloaded as the user comes to them (ie. by scrolling through the grid).

The rows will not be edited through this front end, so read-only grids are acceptable.

What data grids, written in JavaScript, exist for this kind of seamless paging?

How do I autosize the column in SlickGrid?

I want slickgrid to autosize the columns based on the widest content or header text - whichever is wider. In simpler terms, I want it to simulate the default behavior of regular HTML tables when it comes to column sizing. How can I do it in slickgrid?

Is variable rowheight a possibility in SlickGrid?

I would like to provide variable row height depending upon the content size. is it possible in Slickgrid?

Can you point me towards any examples?

Slickgrid - Column Definition with Complex Objects

I have a Java object where the person object contains a displayName object. I have converted it to a JSON object for my JSP. The data looks like the following:

var people = [
{"id":52959,"displayName":{"firstName":"Jim","lastName":"Doe","middleName":"A"},"projectId":50003,"grade":"8","statusCode":"A","gradYear":2016,"buyer":false},
{"id":98765,"displayName":{"firstName":"Jane","lastName":"Doe","middleName":"Z"},"projectId":50003,"grade":"8","statusCode":"A","gradYear":2016,"buyer":true}
];

I want to bind my columns to the name properties that reside within the displayName object, but I am cannot get the column definition to recognize where the data resides. Here is an example of my firstName column definition:

{id: 'displayName.firstName', field: 'displayName.firstName', name: 'First Name',
width: 110, sortable: true, editor: TextCellEditor, formatter: SpaceFormatter,              
cssClass: '', maxLength: 250, editable: true}

The view does not render the names although the data is there. Is it possible to bind a column to an object property that resides within another object? If so, what am I doing wrong?

SlickGrid select editor

I want to make a dynamically populated html select for a select cell. I extract some information from a database which is different for every row item. The problem is that the editor loses the initial data and I don't know how to keep some data for a specific cell. Has someone done this before?

function StandardSelectCellEditor($container, columnDef, value, dataContext) {
var $input;
var $select;
var defaultValue = value;
var scope = this;

this.init = function() {
    $input = $("<INPUT type=hidden />");
    $input.val(value); 
    }

    $input.appendTo($container);

    $select = $("<SELECT tabIndex='0' class='editor-yesno'>");
    jQuery.each(value, function() {
      $select.append("<OPTION value='" + this + "'>" + this + "</OPTION></SELECT>");
    });
    $select.append("</SELECT>");

    $select.appendTo($container);

    $select.focus();
};


this.destroy = function() {
    //$input.remove();
    $select.remove();
};


this.focus = function() {
    $select.focus();
};

this.setValue = function(value) {
    $select.val(value);
    defaultValue = value;
};

this.getValue = function() {
    return $select.val();
};

this.isValueChanged = function() {
    return ($select.val() != defaultValue);
};

this.validate = function() {
    return {
        valid: true,
        msg: null
    };
};

this.init();
};

SlickGrid: Simple example of using DataView rather than raw data?

I'm working with SlickGrid, binding data directly to the grid from an Ajax call. It's working well at the moment, the grid updates dynamically and is sortable, and I'm using a custom formatter for one column:

var grid;
var columns = [{
  id: "time",
  name: "Date",
  field: "time"
},
{
  id: "rating",
  name: "Rating",
  formatter: starFormatter // custom formatter 
}
];
var options = {
  enableColumnReorder: false,
  multiColumnSort: true
};
// When user clicks button, fetch data via Ajax, and bind it to the grid. 
$('#mybutton').click(function() {
  $.getJSON(my_url, function(data) {
    grid = new Slick.Grid("#myGrid", data, columns, options);
  });
});

However, I want to apply a class to rows in the grid based on the value of the data, so it appears I need to use a DataView instead. The DataView example on the SlickGrid wiki is rather complicated, and has all kinds of extra methods.

Please could someone explain how I simply convert data to a DataView - both initially and on Ajax reload - while leaving the grid sortable, and continuing to use my custom formatter? (I don't need to know how to apply the class, literally just how to use a DataView.)

I'm hoping it's one or two extra lines inside the .getJSON call, but I fear it may be more complicated than that.

How do I append a record to a dataset in Recline JS?

I am using the rather nice javascript library Recline http://okfnlabs.org/recline/ it is build around Backbone. It also uses SlickGrid.

There are quite a number of examples and of course there is the source code to have a look at too. I have got quite a long way on my own - writing my own backend and showing the data in a slickgrid view.

However one thing I cannot find in the examples is how to append a record to a dataset. I would like to bind the action to a button, so I can append an empty record on the end of the dataset, so I can then use the slickgrid view to edit the data.

The only way I seem to be able to add a record is to round trip to the server, but I don't want to have to do that, since that would involve having to post valid data since in reality I don't want blank rows in my dataset. I would like to have the possbility to add a few rows on the browser client before actually posting the data via REST to the server.

The code looks like this at the moment.

$(document).ready(function() {
var dataset = new recline.Model.Dataset({
     url: '/rest/monitors',
     backend: 'restlet',
    });

    dataset.fetch().done(function(dataset) { 



        var $el = $('#mygrid');
        var grid = new recline.View.SlickGrid({
          model: dataset,
          el: $el,
          state: {
                gridOptions: {editable: true,enableCellNavigation: true},
                columnsEditor: [
                             {column: 'monitoruntil', editor: Slick.Editors.Date },
                             {column: 'enabled', editor: Slick.Editors.Checkbox },
                             {column: 'owneremail', editor: Slick.Editors.Text},
                             {column: 'normalinterval', editor: Slick.Editors.Text}
                           ],
                columnsWidth:[{column: 'owneremail', width: 100},{column: 'url', width: 300},{column: 'lastaccessed', width:100 }]
                 }
        });
        grid.visible = true;
        grid.render();


        //Bind Save Button to a function to save the dataset

        $('#savebutton').bind('click', function() {
              //alert($(this).text());
              dataset.save();
            });

        });;

} )

With this code I can only edit and save existing records which have been delivered with the "restlet" backend.

What is this design pattern known as in JavaScript/jQuery?

I was looking over the JavaScript source code for SlickGrid.

I've noticed that slick.grid.js has the following structure:

(function($) {
    // Slick.Grid
    $.extend(true, window, {
        Slick: {
            Grid: SlickGrid
        }
    });

    var scrollbarDimensions; // shared across all grids on this page

    ////////////////////////////////////////////////////////////////////////////
    // SlickGrid class implementation (available as Slick.Grid)

    /**
     * @param {Node}           container   Container node to create the grid in.
     * @param {Array,Object}   data        An array of objects for databinding.
     * @param {Array}          columns     An array of column definitions.
     * @param {Object}         options     Grid options.
     **/
    function SlickGrid(container,data,columns,options) {
        /// <summary>
        /// Create and manage virtual grid in the specified $container,
        /// connecting it to the specified data source. Data is presented
        /// as a grid with the specified columns and data.length rows.
        /// Options alter behaviour of the grid.
        /// </summary>

        // settings
        var defaults = {
            ...
        };

        ...

        // private
        var $container;

        ...


        ////////////////////////////////////////////////////////////////////////
        // Initialization

        function init() {
            /// <summary>
            /// Initialize 'this' (self) instance of a SlickGrid.
            /// This function is called by the constructor.
            /// </summary>

            $container = $(container);

            ...
        }

        ////////////////////////////////////////////////////////////////////////
        // Private & Public Functions, Getters/Setters, Interactivity, etc.
        function measureScrollbar() {
            ...
        }

        ////////////////////////////////////////////////////////////////////////
        // Public API

        $.extend(this, {
            "slickGridVersion": "2.0a1",

            // Events
            "onScroll":                     new Slick.Event(),

            ...

            // Methods
            "registerPlugin":               registerPlugin,

            ...

        });

        init();
    }
}(jQuery));

Some code has been omitted for brevity and clarity, but this should give you the general idea.

1. What is the purpose of the the following: (function($) { // code }(jQuery)); Is this the module pattern that I've seen talked about? Is this meant to keep the global namespace clean?

2. What do the $.extend() lines mean?: The top $.extend(true, window, { // code }); looks like it has to do with a "namespace"; what's a namespace? It looks like the bottom $.extend(this, { // code }); is used to exposed 'public' members and functions? How would you define a private function or variable?

3. How would you initialize multiple "SlickGrids" if you wanted to? How much would they share and how would they interact? Note the "constructor" function: function SlickGrid(...) { // code }.

4. What are some books, links, and other resources on coding in this style? Who invented it?

Thanks! ♥