Angular 2 Jqxgrid

[GaryParticipant]

I’m getting the following error when enabling property showgroupaggregates on jqxgrid,

app/listgrid.component.ts(64,13): error TS2322: Type ‘{ width: string; groupable: boolean; columns: ({ text: string; datafield: string; width: string; …’ is not assignable to type ‘GridOptions’.
Object literal may only specify known properties, and ‘showgroupaggregates’ does not exist in type ‘GridOptions’.

I searched angular_jqxgrid.ts and do not find an @Input for showgroupaggregates.

Regards,
Gary

[adminKeymaster]

Thanks for the feedback.

showgroupaggregates is not added to the Typescript file and that’s why you’re getting this error. We will fix this with the next update. Can you provide an example how you try to use this option so we can look for a workaround?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[GaryParticipant]

I can wait for the update.
I’m just in the beginning of using Angular 2 with JQWIDGETS and Angular 2 is still in RC mode.

Thanks….

[fresherParticipant]

ReferenceError: jqwidgets is not defined when using create widget as shown in demo.

ReferenceError: jqwidgets is not defined
at jqxGridComponent.createWidget (http://localhost:58082/content/scripts/jqwidgets/jqwidgets-ts/angular_jqxgrid.ts!transpiled:57:45)
at LandingComponent.ngAfterViewInit (http://localhost:58082/app/landing/main/component/landing.component.js:188:33)
at DebugAppView._View_LandingComponent_Host0.detectChangesInternal (LandingComponent_Host.ngfactory.js:33:67)
at DebugAppView.AppView.detectChanges (http://localhost:58082/node_modules/@angular/core/bundles/core.umd.js:9546:18)
at DebugAppView.detectChanges (http://localhost:58082/node_modules/@angular/core/bundles/core.umd.js:9651:48)
at ViewRef_.detectChanges (http://localhost:58082/node_modules/@angular/core/bundles/core.umd.js:7645:24)
at RouterOutlet.activate (http://localhost:58082/node_modules/@angular/router/bundles/router.umd.js:3451:46)
at ActivateRoutes.placeComponentIntoOutlet (http://localhost:58082/node_modules/@angular/router/bundles/router.umd.js:2969:20)
at ActivateRoutes.activateRoutes (http://localhost:58082/node_modules/@angular/router/bundles/router.umd.js:2947:26)
at eval (http://localhost:58082/node_modules/@angular/router/bundles/router.umd.js:2909:23)

[adminKeymaster]

fresher, please use the current version as the demos which are online on the website are built with it. Make sure that all required Node Modules are also installed as that is very common mistake.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[fresherParticipant]

Hi,

I Have Binded a jqxGrid with columns and datasource below.

and in the click event and iam assigning new columns to that same grid with same datasource (changing only columns source)

But the newly assigned columns are not showing in the grid.

JSON data Source
{
“Data”: [
{
“Audit”: null,
“Bill”: “69120810284685900270122012”,
“Period”: “12/12/12 – 01/15/13”,
“Days”: 35,
“Bill Date”: “01/15/2013”,
“Bill Amount”: 18799.1,
“Current Charges”: 18799.1,
“Prevoius Balance”: 0,
“Late Fee”: 0,
“Utility”: “ELECTRIC”,
“Image”: “EDI_INVOICE_07012009”
},
{
“Audit”: null,
“Bill”: “69120810284685900270112012”,
“Period”: “11/09/12 – 12/12/12”,
“Days”: 34,
“Bill Date”: “12/12/2012”,
“Bill Amount”: 16088.19,
“Current Charges”: 16088.19,
“Prevoius Balance”: 0,
“Late Fee”: 0,
“Utility”: “ELECTRIC”,
“Image”: “EDI_INVOICE_07012009”
},
{
“Audit”: null,
“Bill”: “69120810284685900270102012”,
“Period”: “10/11/12 – 11/09/12”,
“Days”: 30,
“Bill Date”: “11/09/2012”,
“Bill Amount”: 15853.84,
“Current Charges”: 15853.84,
“Prevoius Balance”: 0,
“Late Fee”: 0,
“Utility”: “ELECTRIC”,
“Image”: “EDI_INVOICE_07012009”
},
{
“Audit”: null,
“Bill”: “69120810284685900270092012”,
“Period”: “09/13/12 – 10/11/12”,
“Days”: 29,
“Bill Date”: “10/11/2012”,
“Bill Amount”: 11361.32,
“Current Charges”: 11361.32,
“Prevoius Balance”: 0,
“Late Fee”: 0,
“Utility”: “ELECTRIC”,
“Image”: “EDI_INVOICE_07012009”
},
{
“Audit”: null,
“Bill”: “69120810284685900270082012”,
“Period”: “08/14/12 – 09/13/12”,
“Days”: 31,
“Bill Date”: “09/13/2012”,
“Bill Amount”: 13031.29,
“Current Charges”: 13031.29,
“Prevoius Balance”: 0,
“Late Fee”: 0,
“Utility”: “ELECTRIC”,
“Image”: “EDI_INVOICE_07012009”
},
{
“Audit”: null,
“Bill”: “69120810284685900270072012”,
“Period”: “07/16/12 – 08/14/12”,
“Days”: 30,
“Bill Date”: “08/14/2012”,
“Bill Amount”: 12624.47,
“Current Charges”: 12624.47,
“Prevoius Balance”: 0,
“Late Fee”: 0,
“Utility”: “ELECTRIC”,
“Image”: “EDI_INVOICE_07012009”
},
{
“Audit”: null,
“Bill”: “69120810284685900270062012”,
“Period”: “06/13/12 – 07/16/12”,
“Days”: 34,
“Bill Date”: “07/16/2012”,
“Bill Amount”: 14651.57,
“Current Charges”: 14651.57,
“Prevoius Balance”: 0,
“Late Fee”: 0,
“Utility”: “ELECTRIC”,
“Image”: “EDI_INVOICE_07012009”
},
{
“Audit”: null,
“Bill”: “69120810284685900270052012”,
“Period”: “05/14/12 – 06/13/12”,
“Days”: 31,
“Bill Date”: “06/13/2012”,
“Bill Amount”: 10533.93,
“Current Charges”: 10533.93,
“Prevoius Balance”: 0,
“Late Fee”: 0,
“Utility”: “ELECTRIC”,
“Image”: “EDI_INVOICE_07012009”
}];

Columns:

BillDetailsColumns: any = [
{
“text”: “Bill #”,
“dataField”: “Bill”,
“type”: “string”,
// “cellsrenderer”: this.cellsrenderer,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: ‘18%’
},
{
“text”: “Period”,
“dataField”: “Period”,
“type”: “date”,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: ‘11%’
},
{
“text”: “Days”,
“dataField”: “Days”,
“type”: “int”,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: ‘6%’
},
{
“text”: “Bill Date”,
“dataField”: “Bill Date”,
“type”: “date”,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: ‘11%’
}
];

GridSettings:

private settings: jqwidgets.GridOptions = {

editable: true,
showfilterrow: false,
showstatusbar: true,
statusbarheight: 30,
columnsheight: 50,
autorowheight: false,
//autoheight: false,
pagesize: 10,
showaggregates: true,
filterable: true,
sortable: true,
pageable: true,
pagermode: ‘simple’,
//autoheight: true,
columnsresize: true,
showfiltercolumnbackground: true,
autoshowfiltericon: true,
columnsreorder: true,
//ready: function () {
// addfilter();
//},
selectionmode: ‘none’,
altrows: true,
width: ‘100%’,
height: 450,
rowsheight: 60,
scrollbarsize: 4,
enablebrowserselection: true,

}

var source =
{
datatype: “json”,
localdata: response.json().Data
};

var dataAdapter = new $.jqx.dataAdapter(source);
this.Settings.source = dataAdapter;
this.Settings.columns = this.BillDetailsColumns;

Creating Grid:

this.myGrid.createWidget(this.Settings);

And in the Button Click Event I want to change the columns as:

Button Click Event:
clk(): void{

this.BillDetailsColumns =[ {
“text”: “Bill Date”,
“dataField”: “Bill Date”,
“type”: “date”,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: ‘11%’
},
{
“text”: “Bill Amount (USD)”,
“dataField”: “Bill Amount”,
“type”: “float”,
“editable”: false,
“cellsformat”: “c2”,
“aggregates”: “”,
“filtertype”: “”,
“width”: ‘10%’
}];

this.myGrid.columns = BillDetailsColumns;
}

So, at the click event the newly binded columns are not showing in the grid.

Can you please suggest the solution?

Thanks in advance

[Peter StoevKeymaster]

Hi fresher,

As in your other post – this.myGrid.columns = BillDetailsColumns; will do nothing. You should use setOptions method and pass a JSON as you do in the createWidget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[fresherParticipant]

Hi Peter,

Thanks for your reply,

I have tried this and it works fine in the first click event.

But in the next consecutive click i am getting this error and below is the change i did..

Code Change
this.myGrid.setOptions({ columns: this.BillDetailsColumns });

Error
RangeError: Maximum call stack size exceeded at ZoneTask.toString

Thanks in advance.

[Ivo ZhulevParticipant]

Hi fresher,

I’ve tested your example just with other sample data and all is fine, no errors thrown.
So check your data settings and the data itself.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[fresherParticipant]

Hi,

Can you please share the example which worked for you, that will helps me.

Thanks in advance

[Ivo ZhulevParticipant]

Hi fresher,

Here is the code i`ve tested with:

data(): any
    {
        let data = {};
        for (let i = 0; i < 10; i++)
        {
            let row = this.generaterow(i);
            data[i] = row;
        }
        return data;
    };
    firstNames = ["Andrew", "Nancy", "Shelley"];
    lastNames = ["Fuller", "Davolio", "Burke"];
    productNames = ["Black Tea", "Green Tea", "Caffe Espresso"];
    generaterow(i: number): any 
    {
        var row = {};
        var productindex = Math.floor(Math.random() * this.productNames.length);
        row["firstname"] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
        row["lastname"] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
        row["productname"] = this.productNames[productindex];
        return row;
    }
    source =
    {
        localdata: this.data(),
        datatype: "local",
        datafields:
        [
            { name: 'firstname', type: 'string' },
            { name: 'lastname', type: 'string' },
            { name: 'productname', type: 'string' }
        ]
    };
    dataAdapter = new $.jqx.dataAdapter(this.source);

    settings: jqwidgets.GridOptions = {
        source: this.dataAdapter,
        editable: true,
        showfilterrow: false,
        showstatusbar: true,
        statusbarheight: 30,
        columnsheight: 50,
        autorowheight: false,
        //autoheight: false,
        pagesize: 10,
        showaggregates: true,
        filterable: true,
        sortable: true,
        pageable: true,
        pagermode: 'simple',
        //autoheight: true,
        columnsresize: true,
        showfiltercolumnbackground: true,
        autoshowfiltericon: true,
        columnsreorder: true,
        //ready: function () {
        // addfilter();
        //},
        selectionmode: 'none',
        altrows: true,
        width: 610,
        height: 450,
        rowsheight: 60,
        scrollbarsize: 4,
        enablebrowserselection: true,
        columns:
        [
            { text: 'First Name', datafield: 'firstname', width: 200 },
            { text: 'Last Name', datafield: 'lastname', width: 200 },
            { text: 'Product', datafield: 'productname', width: 200 }
        ]
    };

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[fresherParticipant]

Hi,

I am binding a grid with json data and in the columns im using the cellsrenderer, it is firing as expected when binding the data to grid.

I am trying to access the local variables in the cellsrenderer method, but i am getting as undefined.

Below is my code:

local variable
private test: string = “somevalue”;

Columns:
private BillDetailsColumns: any = [
{
“text”: “Bill #”,
“dataField”: “billNumber”,
“type”: “string”,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: ‘18%’
},
{
“text”: “Period”,
“dataField”: “serviceFromDate”,
“cellsrenderer”: this.mymethod,
“type”: “date”,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: ‘11%’
}
];

//
Binding the grid will be here
Note: I created a different component for binding the grid and through input parameters i am sending the datasource and columns
Below is the HTML:
<ems-grid [DataSource]=”billsData” [Columns]=”BillDetailsColumns”></ems-grid>
//

cellsrenderer method:
mymethod(row, columnfield, value, defaulthtml, columnproperties): string {
debugger;
var a = this.test; //HERE iam getting value as undefined
return “”;
//return “<div>” + this.billsData[row].serviceFromDate + ” – ” + this.billsData[row].serviceToDate + “</div>”;
}

can you please suggest, how can i access ‘this.test’ value in the cellrenderer method.

Thanks in advance.

[fresherParticipant]

Hi,

I have seen your code, but i didnt see the changing of columns in any button click event in the provided example.

Actually, i am changing the columns of the grid on the fly in the button event.

so when i clicked on the button for the first time the columns are changing but from the next time im getting the below error.

Error
RangeError: Maximum call stack size exceeded at ZoneTask.toString

Can you please suggest a solution

you can refer the code in my previous post.

Thanks in advance.

[Ivo ZhulevParticipant]

Hi fresher,

Sorry for not placing the event code. Ive tested it with exact same code you provided for the event.
No matter how many times I clicked at the button it worked okay and no errors were thrown.
Try executing the code I provided just add the event and see if it throws an error.
If it does then there something wrong with your other code or configuration.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[fresherParticipant]

Hi ,

I have added a anchor tag to a column in cellsrenderer event of jqxGrid , but unable to have click event to it, ANy Idea??

MyCellRenderer(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
        debugger;

        if (value.indexOf('#') != -1) {
            value = value.substring(0, value.indexOf('#'));
        }
        var href = "test";
        var html = "<a id='testing' onclick='resolveCLick()'  class='mytest' >Edit</a>";
        return html;
    }

Where resolveClick is a method in my component
Tried different ways using this.renderer.liste(but click event is getting added multiple times on comonent click) ,

but unable to get onclick event of it.

[Author]

Posts