Storing state using 2 instances of the same JQuery plugin

Question

I'm coding a jQuery plugin to build KendoUI grids. Everything was fine until I had to use 2 instances of the plugin in the same page. In this case, I need each instance of the plugin to have its own data.

I've read the jQuery guidelines for storing data with .data(), but when trying to access from outside the code of the plugin to the 'getSelectedItem()' this way:

selectedItemGrid1= $("#Grid1").kendoGrid_extended.getSelectedItem();
selectedItemGrid2= $("#Grid2").kendoGrid_extended.getSelectedItem();

I get the selectedItem of Grid2 in selectedItemGrid1. Here is a simplified version of my plugin code. Basically what I wanted to do is, anytime a row of the grid is selected ("change" event on the kendoGrid definition), store the new selected row inside the plugin, so when the user clicks on a "delete" button, read from the plugin the selected row and call the delete action with the info recovered from the plugin.

$.fn.kendoGrid_extended = function (options) {
    var opts = $.extend({}, $.fn.kendoGrid_extended.defaults, options);
    opts.controlId = '#' + this.attr('id');
    var gridExtended;
    var selectedItem;
    var instance = $(this);

    //Public accessor for the selectedItem object.
    $.fn.kendoGrid_extended.getSelectedItem = function () {
        return instance.data('selectedItem');
    }

    opts.gridDataSource = new kendo.data.DataSource({
        type: "json",
        serverPaging: true,
        serverSorting: true,
        sort: sortObject,
        serverFiltering: true,
        allowUnsort: true,
        pageSize: opts.pageSize,
        group: opts.group,
        transport: {
            read: {
                url: opts.dataSourceURL,
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data: function () { return opts.dataSourceParamsFunction(); }
            },
            parameterMap: function (options) {
                return JSON.stringify(options);
            }
        },
        schema: opts.dataSourceSchema,
    });

    gridExtended = $(opts.controlId).kendoGrid({
            columns: opts.gridColumns,
            dataSource: opts.gridDataSource,
            pageable: {
                refresh: true,
                pageSizes: true
            },
            groupable: opts.groupable,
            sortable: { mode: "multiple" },
            filterable: false,
            selectable: true,
            scrollable: true,
            resizable: true,
            reorderable: true,
            columnReorder: SetColumnsReorder,
            columnResize: SetColumnsResize,
            change: function () {
                var gridChange = this;
                gridChange.select().each(function () {
                    selectedItem = gridChange.dataItem($(this));
                    instance.data('selectedItem', selectedItem);
                });
            }
        });
}

The code itself it's a simplified version of my plugin. I know that this may not be the best way to write a plugin as I've read the jQuery guidelines for plugin development. It would be awesome if you could point me in the right direction or tell me why my code is not working. Thanks a lot in advance!

Answer 1

I finally solved it appending a hidden input with a unique Id to the grid of the helper. On that hidden input I'm storing all the data that I want to be persistent with the Jquery .data().

So if I generate 2 grids using the plugin, each grid will have appended something like this:

<input type="hidden" id="uniqueIdHere" />

Answer 2

I think you do not need that "public accessor" that you wrote, I think you actually can get it like this:

 selectedItemGrid1= $("#Grid1").data('selectedItem);
 selectedItemGrid2= $("#Grid2").data('selectedItem);

On a side you do not have to wrap that instance element into a jQuery object. You still be able to use rest of the jQuery methods, check the example.