Jsgrid: Okay, coming from twitter [@zzco]

[lighth7015]

Hi,

I'm working on a website where you search for prescription medications by name and select the one you want from a pop-up modal and then POST it to a django service for some behind-the-scenes processing and posting to a third-party for more information.

Anyway, I'm trying to replicate much of the click-to-select-row functionality of this link. Mainly, the row selection. I can replicate the CSS styling easily enough. I abandoned the other grid because it doesn't work particularly well when being used in a modal like I need to be able to.

How would I go about doing this with your grid?

[tabalinas]

Could you bring more details about the issues you have with implementation? At least concrete questions.

[lighth7015]

Well, there aren't any _issues_, per-se; just more "How do I implement this part?"

I have a handful of areas I'm struggling to grasp the core concepts in-

My issues so far-

1. Pagination
   
   
   
   • Given a json dataset, I'm having trouble using promises + $.ajax({ ... }) to return my dataset to the grid. It either complains about the 'data' array being NULL or gives me no results.
   
   
2. Server-side pagination
   
   
   
   • Assuming that issue 1 (Pagination) is fixed, I would like to feed the grid data a handful of results at at time (to save bandwidth and load time); I'm not sure how this one is supposed to happen.
   
   
3. Row selection
   
   
   
   • Assuming that issues 1 (Pagination) and 2 (Server-side pagination) are fixed, I need to figure out which grid item the user has selected so I can package the data up and ship it back to a hidden form field so when the data is submitted, all of the fields are properly populated.
   
   

DEMO: Working copy of the grid.
EDIT: oops, that was supposed to be a link.

[tabalinas]

Ok. Here is some comments:

1) Pagination
According to the docs for loading by page scenario you should return result as a { data: [...], itemsCount: N } http://js-grid.com/docs/#loaddatafilter-promisedataresult

2) Out-of-box supported 2 load strategies: loading all data at once, and loading data by pages http://js-grid.com/docs/#load-strategies
So in your case (loading by several pages) custom load strategy could be created.
Or you can just have an array storing all loaded items so far. Once user opens the page you try to pick it up from the array. If data is not loaded - load this batch from server. In the end you use pageLoading but optimized with your simple client-size cache.

3) Row select could be done with a checkbox field and storing selected items in js array. To highlight selected row you can use rowClass method http://js-grid.com/docs/#rowclass. Or you can go w/o checkbox just selecting item in rowClick handler http://js-grid.com/docs/#rowclick.

Hope it will help.

[lighth7015]

Okay, so I'm trying to move the json loading to inside the data grid; this does not work-

    var d = $.Deferred();

    $.ajax({
        url: '/drugList.json',
        dataType: "json"
    }).done(function(response) {
        d.resolve(response.value);
    });

    return d.promise();

I get jsgrid.js:524: Uncaught TypeError: Cannot read property 'length' of undefined

My call to jsGrid is as follows-

    $("body").jsGrid({
        data: [],
        autoload: true,

        paging: true,
        pageLoading: true,

        pageSize: 14,
        controller: {
            loadData: function(filter) {
                var d = $.Deferred();

                $.ajax({
                    url: '/drugList.json',
                    dataType: "json"
                }).done(function(response) {
                    d.resolve(response.value);
                });

                return d.promise();

                /*
                return {
                    data: db.slice(startIndex, startIndex + filter.pageSize),
                    itemsCount: db.length
                };
                */
            },

            onError: function() {
                console.log('Error.');
            },
        },

        fields: [
            { name: "DrugName", title: 'Drug Name', type: "text" },
            { name: "Strength", width: 150 },
            { name: "NDC", width: 50 }
        ]
    });

[tabalinas]

The error looks like something is wrong with the response.value.
Have you checked it? e.g. with console.log(response)?

[lighth7015]

I get a bunch an array of Objects.

[tabalinas]

Could you expand few of them and attach a screenshot? Or maybe you have a public page to be able to take a look. Basic scenario should work, it's most probably something wrong with the data.

[lighth7015]

You can click here.

[tabalinas]

Thank you!
Ok, the data returned in wrong format.
It's stated in my first answer:

1) Pagination According to the docs for loading by page scenario you should return result as a { data: [...], itemsCount: N } http://js-grid.com/docs/#loaddatafilter-promisedataresult

So if you want loading data by pages you should return it in the format:

d.resolve({ data: response.value, itemsCount: [provide total items count] });

Or just turn off page loading pageLoading: false

[lighth7015]

OH, okay. That makes sense.

[lighth7015]

Hmm, refresh the page. You mean my call to d.resolve() is supposed to look something like that?

[tabalinas]

Yes, but not sure why you put response.text instead of response.value.

[tabalinas]

Worth to mention: if you load all data at once, you don't need pageLoading. It make sense only if you will load data but pages (or batch of pages).

[lighth7015]

Oh, oops- that fixes THAT error. But where do I get startIndex from? filter?

[lighth7015]

And that's just a sample data snippet. It's just so I can become familiar with jsGrid.

[tabalinas]

Have you checked the docs http://js-grid.com/docs/#loaddatafilter-promisedataresult?

[lighth7015]

Yes, so I just report how many results there are in the json response and set the itemsCount in the result?

[tabalinas]

In itemsCount you put overall amount of items available. This how server-side paging usually works: you should provide items for a page and total amount of items. So grid can show the pager correctly.

[tabalinas]

Could you please clarify, when you are talking about significant efforts to make jsGrid support server-side paging, what exactly do you mean by these efforts?

Currently it works like this, e.g. you have a million items on the server, so you

• turn on pageLoading
• in loadData(filter) make an ajax call to the server passing filter.pageIndex and filter.pageSize
• server returns e.g. 20 items and total amount of items e.g. 1 000 000
• resolve the deferred with { data: [array of 20 items], itemsCount: 1000000 }

That's it. Is it too complicated? If yes, then could you share your thoughts what could be the easiest API?

[lighth7015]

Nah, that's not complicated; the docs are just a bit unclear on how you're _supposed_ to do it. The way you explained it makes perfect sense.

Thanks! :D

[tabalinas]

Ok, then I need to improve description in the docs.
Thank you for the feedback!

[lighth7015]

My main issue with the documentation is that it assumes you are already familiar with the way the grid works; I happened to stumble across it as a result of a google search.

So it was like, "Wait, okay.. How do I (insert operation here)?" And I look at the docs and it doesn't really give you any integration examples. Like the oData was just fine, but I couldn't work out how to get it to page the oData service.

[tabalinas]

Good note, thanks! Gonna improve it.

[rohitoza147]

i have used jsgrid using php i have dynamically fetched the record using json but the filtering is not working other all thing is working in jsgrid table

[rohitoza147]

(function() {

var db = {


                    loadData: function(filter) {
                     var db = $.Deferred();
                    return $.ajax({
                            type: "ajax",
                            url: "get.php",
                            data: filter,
                            dataType: "json"
                        }).done(function(result) {
                            result = $.grep(result, function(item) {
                                 // some client-side filtering below
                                    return (!filter.pname || item.pname.indexOf(filter.pname) > -1);
                                    return (!filter.amount || item.amount.indexOf(filter.amount) > -1);

                            });
                            db.resolve(result);
                        });
                        return db.promise();
                    }

};

window.db = db;

}());

[rohitoza147]

thats my db file