Javascript Grid..

[TinTin]

Hi all,

Am needing a grid for use in an app, there's not a native one, but I'm sure it's possible to use a JS grid ie:

http://js-grid.com/

I've tried to find some reference to adding JS libraries and how to reference them, I've added the .js and the .css to my main
app within project / properties and libraries and files.. how would one reference this within NAB to init ./ create / update the grid?


Thanks
AJ

[Gaev]

AJ:

how would one reference this within NAB to init ./ create / update the grid?

1) According to this page ... http://js-grid.com/getting-started/ ... you also need to include the jQuery library (see Step 2) as it depends on it.

2) You need to have a DIV element (perhaps inside a Container) with the id of "jsGrid"

3) If the Grid content is static, their code in Step 5 would be specified in the Start section of the App ... otherwise, there are several methods in the documentation that show you how to dynamically change the content values etc.

[TinTin]

Thanks Gaev, I'll give it a go.

[TinTin]

Hi Gaev,

I've added the jquery lib to NAB (in App Properties)

Created a DIV in Container referencing the ID of the Grid as suggested, I tried to just test the example 1st from step 5 (pasted into Startup within a JS block) but can't seem to get it showing in NAB, am just about to try an example within
a standalone HTML file to see if that shows their example code.

I really like the idea of using 3rd party JS libraries because I think there's a lot that can be added later on - once I get passed this bit I'll have a go at writing a plugin around it.

Cheers
AJ

[luishp]

TinTin, take theese steps to make it work:

1) Install the PowerApp plugin
2) In Project -> App Events ->Start-Up write this code (it loads the required libraries from a public CDN):

Code: Select all

slLoadJS "https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid.min.js"
slLoadCSS "https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid.min.css"
slLoadCSS "https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid-theme.min.css"

3) Add a container the the stage and rename it to "jsGrid" (be carefull as "id's" are case sensitive)
4) Add a Push Button to the stage.
5) Double click the button and write this code into the code editor:

Code: Select all

BeginJS
    var clients = [
        { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
        { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
        { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
        { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
    ];

    var countries = [
        { Name: "", Id: 0 },
        { Name: "United States", Id: 1 },
        { Name: "Canada", Id: 2 },
        { Name: "United Kingdom", Id: 3 }
    ];

    $("#jsGrid").jsGrid({
        width: "100%",
        height: "400px",

        inserting: true,
        editing: true,
        sorting: true,
        paging: true,

        data: clients,

        fields: [
            { name: "Name", type: "text", width: 150, validate: "required" },
            { name: "Age", type: "number", width: 50 },
            { name: "Address", type: "text", width: 200 },
            { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
            { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
            { type: "control" }
        ]
    });
EndJS

Test your publication

You don't need to add JQuery as it is already part of NAB.

[luishp]

I have uploaded the sample to our server:

http://sinlios.com/neoappbuilder/jsgrid

Source and demo:

http://sinlios.com/neoappbuilder/jsgrid.zip

Good luck!

[farhad2008]

hi,
very good
thank you very much
regards farhad

[TinTin]

Luis,

Thanks very much - I didn't check forum today and to my surprise you have worked wonders! I'll put it to the test tomorrow.

Thanks again and for your plugins work

Cheers

[TinTin]

Luis,

Can we do something like this for the libraries rather than fetch from server?


slLoadJS "file://C:/JsGrid/jsgrid.min.js"
slLoadCSS "file://C:/JsGrid/jsgrid.min.css"
slLoadCSS "file://C:/JsGrid/jsgrid-theme.min.css"

It works on the local dev machine, but when it comes to compiled app I don't think there's a way to reference their deployed location.

Cheers

[luishp]

TinTin, if you prefer a local copy of the libraries you don't need PowerApp plugin.
Just add the files (.js and .css) in:
Project -> App properties -> Libraries/Files

That's all!

[TinTin]

ahh that was easy, didn't realise NAB would include in the manifest.. lots of possibilities for 3rd party libraries now.


Thanks Luis

[TinTin]

Managed to add records to the grid.. (modified for 3 columns for now/ Fruit / Description / Colour)

BeginJS
$("#jsGrid").jsGrid("insertItem", { "Fruit": "Apple", "Description": "Nice Apple", "Colour": "Green" })
EndJS

I'm wanting to update an existing record, I and got to this...

BeginJS
$("#jsGrid").jsGrid("updateItem", item, { "ID": "1", "Fruit": "Pear", "Description": "Nasty Pear", "Colour": "Brown" })
EndJS

But it's having none of it.. I would have imagined that would update row 1..

[PaulTomo]

I have just been taking a look at this, very interesting.

I guess this could be used to load data direct from a database direct in to a grid of an app for editing, adding and deleting, rather than as the demo shows just producing a list that loads from a variable each time the app is run.

I can get the "sample variable data code" examples to work fine but would prefer to work with some live data that then saves as per the changes once edited, they all save for that session but are gone once you exit. I have messed around most of the day and although something happens with my own loaded data, I either get many empty lines in the grid or the exact right number of lines but again all the data fields are blank.

I just wondered if anyone has succeeded in getting any data in to the grid from a text file or maybe even from a database on a server or saved locally to load data directly in to the grid of a test app, managed to add, edit or make a change and then save these for the next time the app runs and if so, could you post some example code?

[Gaev]

TinTin:

According to the documentation here ... http://js-grid.com/docs/#updateitemitem ... em-promise ... there are three different formats for this method ... assuming that you meant to use ...

Code: Select all

// update specified item with particular data (row DomNode or row jQueryElement can be used instead of item reference)
$("#grid").jsGrid("updateItem", item, { ID: 1, Name: "John", Age: 25, Country: 2 })

1) what is the value of the item object/variable ?

2) the ID key is meant to have a numeric value ... so try specifying the value without the double quotes ...

Code: Select all

BeginJS
$("#jsGrid").jsGrid("updateItem", item, { "ID": 1, "Fruit": "Pear", "Description": "Nasty Pear", "Colour": "Brown" })
EndJS

[TinTin]

I've only got round to looking at this again, I also spent quite a few hours trying to get my data from variables to update the grid, and failed miserably...! I just ended up getting the spinning loading icon.

I'm going to have a look around for some other grids, I used to use nsbasic app studio which used jquery library so maybe that's an option, am quite surprised there's no grid in NAB yet!!