jqgrid in angular2 using free-jqgrid.d.ts

Question

I refer to this question on stackoverflow, where the example is given to build the jqgrid using angular 1.x version here .

In this answer, I could also see that the free-jqgrid.d.ts is provided, to build with all existing jqGrid options, callbacks and events in angular 2.

Is there any example/steps/guide available to use free-jqgrid.d.ts and build the jqgrid?

Answer 1

The following worked for me.

angular.json:

...     
"styles": [
                  "src/styles.css",
                  "./node_modules/jquery-ui/themes/base/all.css",
                  "./node_modules/free-jqgrid/css/ui.jqgrid.min.css"
                ],
                "scripts": [
                  "./node_modules/jquery/dist/jquery.min.js",
                  "./node_modules/free-jqgrid/js/jquery.jqgrid.min.js"
                ]
...

Component:

import { Component, OnInit } from '@angular/core';
declare var jQuery:any;
@Component({
...
})
export class MyComponent implements OnInit {
...
ngAfterViewInit() {
        (<any>jQuery("#grid")).jqGrid({
            colModel: [
                { name: "firstName" },
                { name: "lastName" }
            ],
            data: [
                { id: 10, firstName: "Angela", lastName: "Merkel" },
                { id: 20, firstName: "Vladimir", lastName: "Putin" },
                { id: 30, firstName: "David", lastName: "Cameron" },
                { id: 40, firstName: "Barack", lastName: "Obama" },
                { id: 50, firstName: "François", lastName: "Hollande" }
            ]
        });
    }
}

html:

<table id="grid"></table>