DataViewer with Ajax Load

[JJ]

Hello all.  First of all, great work on this project.  I am trying to use it to do an ajax load in asp.net to a dataviewer.  My base was example #4 and #15.  Pretty much, i'm trying to do the following.  I highlighted how I'm trying to accomplish this below, along with the corresponding JSON, which looks to be in good form?  Any thoughts?

<script type="text/javascript">
        var dataView;
        var grid;
        var mydata = [];
        var columns = [
            { name: 'Date', field: 'date', sortable: true, minWidth: 90 },
            { name: 'File Name', field: 'filename', filter: 'text', sortable: true, minWidth: 100 },
            { name: 'Description', field: 'description', filter: 'text', sortable: true, width: 62 },
            { name: 'Uploaded by', field: 'contactname', filter: 'text', sortable: true, width: 62 }
        ];

        var options = {
            enableCellNavigation: true,
            forceFitColumns: true,
            topPanelHeight: 25
        };

        var sortcol = "filename";
        var sortdir = 1;       
        var searchString = "";
       

        function myFilter(item, args) {
            var myfilename = item["filename"].toUpperCase();
            var myDescription = item["Description"].toUpperCase();           
            var mySearch = args.searchString.toUpperCase();

            if (mySearch != "" && myfilename.indexOf(mySearch) == -1 && myDescription.indexOf(mySearch) == -1) {
                return false;
            }
            return true;
        }

        function comparer(a, b) {
            var x = a[sortcol], y = b[sortcol];
            return (x == y ? 0 : (x > y ? 1 : -1));
        }
       

        $(".grid-header .ui-icon")
        .addClass("ui-state-default ui-corner-all")
        .mouseover(function (e) {
            $(e.target).addClass("ui-state-hover")
        })
        .mouseout(function (e) {
            $(e.target).removeClass("ui-state-hover")
        });


        //hide the modal on startup
        $(document).ready(function () {               

            dataView = new Slick.Data.DataView({ inlineFilters: true });
            dataView.setPagingOptions({pageSize: 50});

            grid = new Slick.Grid("#myGrid", dataView, columns, options);       

            grid.setSelectionModel(new Slick.RowSelectionModel());

            //right click       
            grid.onContextMenu.subscribe(function (e) {
            });

            //left click
            grid.onClick.subscribe(function (e) {       
            });

            var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
            var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);                            

            grid.onSort.subscribe(function (e, args) {
                sortdir = args.sortAsc ? 1 : -1;
                sortcol = args.sortCol.field;

                if ($.browser.msie && $.browser.version <= 8) {               
                    dataView.fastSort(sortcol, args.sortAsc);
                } else {               
                    dataView.sort(comparer, args.sortAsc);
                }
            });     

            dataView.onRowsChanged.subscribe(function (e, args) {
                grid.invalidateRows(args.rows);
                grid.render();
            }); 

            var h_runfilters = null;       

            // wire up the search textbox to apply the filter to the model
            $("#txtSearch").keyup(function (e) {           
                //on enter search
                if (e.which == 13) {
                    searchString = this.value;
                    updateFilter();   
                }           

            });

            function updateFilter() {
                dataView.setFilterArgs({               
                    searchString: searchString
                });
                dataView.refresh();
            }
       

            // initialize the model after all the events have been hooked up
            dataView.beginUpdate();
              
            // get the data
            $.getJSON('PostBack.aspx?ID=1', function(data) {
                dataView.setItems(data);
            });        

            dataView.setFilterArgs({           
                searchString: searchString
            });
            dataView.setFilter(myFilter);
            dataView.endUpdate();

            // if you don't want the items that are not visible (due to being filtered out
            // or being on a different page) to stay selected, pass 'false' to the second arg
            dataView.syncGridSelection(grid, true);
               
        });               
    </script>



The JSON looks like so:
{
    "data": [
        {
            "id": 40,
            "filename": "Lease_50_Detail_Workbook.xls",
            "contactname": "Jeff Mullen",
            "date": "5/25/2012 1:59:50 PM",
            "description": "Attachment"
        },
        {
            "id": 41,
            "filename": "Lease_53_Detail_Workbook.xls",
            "contactname": "Jeff Mullen",
            "date": "5/25/2012 2:00:32 PM",
            "description": "Attachment"
        }
    ]
}

[Rafael B.]

 I am trying to use it to do an ajax load in asp.net to a dataviewer.

The slick.dataview.js is not intended for AJAX calls. It is intended for scenarios where you load all your data beforehand.

If you would like your data to be loaded AJAX'ly take a look at example #6 - this is the only example that uses AJAX.

It is just an example, that polls data from Digg, that means you'll have to rewrite slick.remotemodel.js the way you want it.

Hope that helps.

[Robert Stackhouse]

I'm using a dataview with AJAX.

Robert

[Rafael B.]

I'm using a dataview with AJAX. 

"A" dataview ?

The slick.dataview.js is a sample Model for SlickGrid which provides great methods for filtering, sorting and reordering, without any server-side help.

If you rely on server-side AJAX calls to filter and sort your results, then you don't need 99% of the dataview. If you use AJAX, it makes things much simpler in the client-side aspect, therefore, the AJAX example, slick.remotemodel.js is tiny compared to the dataview. 

In short, the dataview and remotemodel act very different with data they receive, and each solves a completely different problem.

The dataview has built-in aggregation methods, filtering, sorting and more. All data must be provided beforehand. No AJAX.

The remotemodel is a very basic and simple implementation of server-side AJAX calls to ensure data, with offset & limit. It relies on the server to filter, sort, order, etc.

[isotrope]

I'm using dataView with AJAX.
Pull an initial (full) set, then poll to get Deltas (based on a suggestion from Tin).

I've excised a bunch of stuff from my function, it mainly deals with "is this a full load or just an update?"
I still have to refactor my initial load, and data updates into a single function. Seems like a waste.

Anyway, in case it can help...
Think of this more as an outline than anything:

var OneOfMyGrids_dataView;
var OneOfMyGrids_grid;
var OneOfMyGrids_data = [];
               
var OneOfMyGrids_columns = [
{
    id:"job_id",
    name:"ID",
    field:"id",
    cssClass :"col_id",
    sortable: true
}
// more column defs
   

];



var OneOfMyGrids_options = {
    enableCellNavigation: true,
    editable: true,
    enableAddRow: false,
    autoEdit: true,
    editCommandHandler: queueAndExecuteCommand
};    
   
   
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
            action: 'load_OneOfMyGrids',
            week_year: weeknum
        },
        success:  function(data) {
            // OneOfMyGrids_data = $.parseJSON(data);
            OneOfMyGrids_data = data;
            OneOfMyGrids_dataView = new Slick.Data.DataView();
            OneOfMyGrids_grid = new Slick.Grid("#OneOfMyGrids_listings .slick_table", OneOfMyGrids_dataView, OneOfMyGrids_columns, OneOfMyGrids_options);
                      

            OneOfMyGrids_dataView.onRowCountChanged.subscribe(function(e,args) {
            //empty in example
            });
                       
            OneOfMyGrids_dataView.onRowsChanged.subscribe(function(e,args) {
            //empty in example
            });
           

            OneOfMyGrids_dataView.beginUpdate();
            OneOfMyGrids_dataView.setItems(OneOfMyGrids_data);
            OneOfMyGrids_dataView.setFilter(OneOfMyGrids_filter);


            OneOfMyGrids_dataView.endUpdate();


        }
    });


function refresh_data_ajax(gridPrefix) {
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
            action: 'load_' + gridPrefix,
            week_year: weeknum
        },
        success:  function(data) {
           
            window[gridPrefix + '_data']= data;
                   
                   
            window[gridPrefix + '_dataView'].beginUpdate();
            window[gridPrefix + '_dataView'].setItems(window[gridPrefix + '_data']);
            window[gridPrefix + '_dataView'].setFilter(window[gridPrefix + '_filter']);
                   
            window[gridPrefix + '_dataView'].endUpdate();
            window[gridPrefix + '_grid'].invalidate(); 

            window[gridPrefix + '_dataView'].reSort();
                   
                   
                   
        }
    });
}

[JJ]

thanks guys. i ended up modifying using this:
http://stackoverflow.com/questions/6668613/slickgrid-ajax-data
got the job done via ajax. everything is being done on the backend
(sort/search) and it looks to be working great. thanks

[Hal Diggs]

Like Tin said, the DataView wasn't meant for the ajax calls but I went through the same process. To get it to load you just have to use the .success event of the $.getJSON() call. Setup the rest of the DataView there.

I also added a check to make sure there was an "id" field to use for the index. I'm going to have to redo my work using the Ajax Model but heck this was sooo nice to start with. I hope this helps someone.

$.getJSON(dataPath, function (rows, textStatus, jqXHR) {
	if (rows.length > 0) {
		if (rows[0].id = 'undefined') {
			$(rows).each(function (index) {
				rows[index].newAttribute = "id"
				rows[index]["id"] = index;
			});
		}
	};
	data = rows;
	

// initialize the model after all the events have been hooked up

	dataView.beginUpdate();
	dataView.setItems(data);
 
	dataView.setFilterArgs({
		percentCompleteThreshold: percentCompleteThreshold,
		searchString: searchString
	});
	dataView.setFilter(myFilter);
	dataView.endUpdate();
 
	

// if you don't want the items that are not visible (due to being filtered out
	// or being on a different page) to stay selected, pass 'false' to the second arg
	dataView.syncGridSelection(grid, true

);
})
.error(function (jqXHR, textStatus, errorThrown) { alert("error: " + errorThrown); })

[Konthamvar Archana]

post your code of slickgrid data through ajax.