CODEWITHSUNDEEP
javascriptajaxgridviewslickgrid
Dinoop Nair
Dinoop Nair

Reputation: 2773

slick grid example using ajax

I'm looking for a simple example on how to use SlickGrid when trying to retrieve the data as JSon via jQuery.Ajax. I was also unable to find any documentation of the SlickGrid plugin and was wondering if I was just looking in the wrong places. Any help to get me started with SlickGrid would be most appreciated.

Upvotes: 2

Views: 5639

Answers (2)

Gourneau
Gourneau

Reputation: 12868

For anyone else looking to do this check out this fork of slickgrid. https://github.com/harbulot/SlickGrid

It adds a nice little local Python server to provide the AJAX backend

git clone [email protected]:harbulot/SlickGrid.git
cd SlickGrid/
python localajaxserver.py

Then go to http://127.0.0.1:8000/examples/example6b-ajax-localserver.html with your browser.

Look at the Pull Request to see what was changed https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder

Upvotes: 1

biofractal
biofractal

Reputation: 19133

I have been writing an ajax slick-grid. It has gone well so its definitely an idea worth pursuing.

I used a skip-take model to pull down a large amount of data in batches. I also wrote a wrapper Grid class for the slick-grid set-up and manipulation so it was easier to reuse.

Below is some code that I hope might help you get started. I have cut it down to make it specific to your AJAX loading question. The real grid makes use of column filters and check box selectors, both of which are well worth investigating but would obfuscate the reply.

The syntax is CoffeeScript but I am sure you can get the idea.

SlickGrid Wrapper

class Grid
    grid = null
    dataView = null
    options = {
        enableCellNavigation: true,
        explicitInitialization: true
    }

    constructor:(@gridId, @pagerId, @columns, loadData)->
        @setupDataView()
        @setupGrid()
        @setupPager()
        grid.init()
        loadData()

    setupDataView:() ->
        dataView = new Slick.Data.DataView()
        dataView.onRowCountChanged.subscribe(->
            grid.updateRowCount()
            grid.render()
        )
        dataView.onRowsChanged.subscribe((e, args)->
            grid.invalidateRows(args.rows)
            grid.render()
        )

    setupGrid:()->
        grid = new Slick.Grid(@gridId, dataView, @columns, options)
        grid.setSelectionModel(new Slick.RowSelectionModel())

    setupPager:() ->
        dataView.setPagingOptions({ pageSize: 25 });
        pager = new Slick.Controls.Pager(dataView, grid, $(@pagerId));

    addRows:(rows)->
        dataView.beginUpdate()
        dataView.addItem row for row in rows 
        dataView.endUpdate()

Implementing the Wrapper for a User Grid

viewdata = $('#viewdata').data('viewdata')
take = 800
grid = null
loadingGlyph = '<img class="loading" style="float:right;margin-top:5px" src="/Content/img/ajax-loader.gif" alt="loading" width="16" height="16"/>'

columns = [
    { id: 'last name', name: 'Last Name', field: 'LastName', sortable:true },
    { id: 'first name', name: 'First Name', field: 'FirstName', sortable:true },
    { id: 'email', name: 'Email', field: 'Email', sortable:true }
]

loadData=() =>
    $('.slick-pager-status').after(loadingGlyph)
    for skip in [0..viewdata.count] by take
        url = '/' + viewdata.id + '/users/' + skip + '/' + take
        $.getJSON(url, (users) ->
            grid.addRows(users)
            $('.loading').hide() if users.length < take
        )

$ -> 
    grid = new Grid('#user-grid', '#user-pager', columns, loadData)

The HTML

<div style="margin: 10px;">
    <div id="user-grid" style="width: 100%; height: 700px;"></div>
    <div id="user-pager" style="width: 100%; height: 20px;"></div>
</div>

Some SQL to give you the idea

select * from 
(
    select Id, FirstName, LastName, Email, ROW_NUMBER() over (order by UserName) rownum
    from [.. your stuff]
    where [... your stuff]
) seq
where seq.rownum between @skip and @count

Upvotes: 2

Related Questions