[fresherParticipant]

Hi Peter,

I’m using all the below scripts

<script src=”content/scripts/jqwidgets/jqxcore.js”></script>
<script src=”content/scripts/jqwidgets/jqxtabs.js”></script>
<script src=”content/scripts/jqwidgets/jqxdata.js”></script>
<script src=”content/scripts/jqwidgets/jqxbuttons.js”></script>
<script src=”content/scripts/jqwidgets/jqxscrollbar.js”></script>
<script src=”content/scripts/jqwidgets/jqxdocking.js”></script>
<script src=”content/scripts/jqwidgets/jqxpanel.js”></script>
<script src=”content/scripts/jqwidgets/jqxmenu.js”></script>
<script src=”content/scripts/jqwidgets/jqxradiobutton.js”></script>
<script src=”content/scripts/jqwidgets/jqxcheckbox.js”></script>
<script src=”content/scripts/jqwidgets/jqxlistbox.js”></script>
<script src=”content/scripts/jqwidgets/jqxcombobox.js”></script>
<script src=”content/scripts/jqwidgets/jqxdropdownlist.js”></script>
<script src=”content/scripts/jqwidgets/jqxtextarea.js”></script>
<script src=”content/scripts/jqwidgets/jqxexpander.js”></script>
<script src=”content/scripts/jqwidgets/jqxtagcloud.js”></script>

<script src=”content/scripts/jqwidgets/jqxinput.js”></script>
<script src=”content/scripts/jqwidgets/jqxdatetimeinput.js”></script>
<script src=”content/scripts/jqwidgets/jqxcalendar.js”></script>
<script src=”content/scripts/jqwidgets/jqxtooltip.js”></script>
<script src=”content/scripts/jqwidgets/jqxprogressbar.js”></script>
<script src=”content/scripts/jqwidgets/globalization/globalize.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.js”></script>
<script src=”content/scripts/jqwidgets/jqxtree.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.sort.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.pager.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.selection.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.edit.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.filter.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.columnsresize.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.columnsreorder.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.aggregates.js”></script>
<script src=”content/scripts/jqwidgets/jqxgrid.grouping.js”></script>
<script src=”content/scripts/bootstrap/bootstrap.min.js”></script>
<script src=”content/scripts/jqwidgets/jqxexpander.js”></script>
<script src=”content/scripts/other/polyfill.min.js”></script>
<script src=”content/scripts/jqwidgets/jqxeditor.js”></script>
<script src=”content/scripts/jqwidgets/jqxmaskedinput.js”></script>
<script src=”content/scripts/jqwidgets/jqxdropdownbutton.js”></script>
<script src=”content/scripts/jqwidgets/jqxrating.js”></script>
<script src=”content/scripts/jqwidgets/jqxwindow.js”></script>
<script src=”content/scripts/jqwidgets/jqxpasswordinput.js”></script>

Kindly check the question once it was working without jqxdocking and jqxpanel scripts.
Please check the post script I have added differnece in rendering of angular tree after adding jqxpanel scripts

[fresherParticipant]

Hi,

I am binding the data to the grid with the columns and data below. I am formatting on column with the currency format, but it is not applying.

I am applying the cellsformat as “c2” for column ‘Bill Amount (USD)’ but is not applying

Columns:

private BillDetailsColumns: any = [
{
“text”: “Bill #”,
“dataField”: “billNumber”,
“cellsrenderer”: (row) => this.setBill(row, this.billsData),
“type”: “string”,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: “18%”
},
{
“text”: “Period”,
“dataField”: “serviceFromDate”,
“cellsrenderer”: (row) => this.setPeriod(row, this.billsData),
“type”: “date”,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: “11%”
},
{
“text”: “Days”,
“dataField”: “numberOfServiceDays”,
“type”: “int”,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: “6%”
},
{
“text”: “Bill Date”,
“dataField”: “billDate”,
“type”: “date”,
“editable”: false,
“cellsformat”: “”,
“aggregates”: “”,
“filtertype”: “”,
“width”: “11%”
},
{
“text”: “Bill Amount (USD)”,
“dataField”: “billAmount”,
“type”: “float”,
“editable”: false,
“cellsformat”: “c2”,
“aggregates”: “”,
“filtertype”: “”,
“width”: “10%”
}];

Json Data:
[
{
“billId”: 11112,
“billNumber”: “755-013629-01TWSA052013”,
“serviceFromDate”: “05/07/2013”,
“serviceToDate”: “06/05/2013”,
“billAmount”: “-1283.9700”
},
{
“billId”: 11112,
“billNumber”: “755-013629-01TWSA052013”,
“serviceFromDate”: “05/07/2013”,
“serviceToDate”: “06/05/2013”,
“billAmount”: “-1283.9700”
}];

Could you please provide the solution, it will be helpful

Thanks in Advance.

[fresherParticipant]

Any Update On the above, we are eagerly waiting as we are evaluating on building a pilot project(POC) with Angular 2 and jqWidgets Integration.

Thanks in Advance!

[fresherParticipant]

Hi Ivo Zhulev,

We have tried the same but that is not working , can you provide the code which can work??

Please provide details in implementing the cell click event emitter, where to initialize and all

We implemented grid.OnCellClick but that is not firing.

[fresherParticipant]

Hi ivo,

We have tried the same but unable to resolve the issue , you can find the video of the issue in below

JqGrid CellRenderer Issue Angular 2

Or else here

http://sudhirpaturu.blogspot.in/2016/10/jqwidgetsgrid-issue.html

[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.

[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.

[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,

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

Thanks in advance

[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.

[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

[fresherParticipant]

In Addition to the above post,

I am using Angular 2.0 final release and jqxWidgets latest

Unable to create a jqwidget dropdownlist dynamically onclick event.

In the examples provided we have static #dropdownlistreference and finding using ViewChild and creating widget in ngAfterViewInit but how to do in a click event.

[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)

[fresherParticipant]

Hi ,

I have initially set value to null so that I can see placeholder

$(“#jqDateTime1”).jqxDateTimeInput({ formatString: “MM/dd/yyyy”, placeHolder: “MM/DD/YYYY”, value: null});

after this I am able to enter date , which is fine but its allowing alphabets

ONLY two alphabets ‘a’ and ‘p’

Do you have any solution for this??

[fresherParticipant]

Hi Hristo,

Thanks for the reply,

Here I’m getting a horizontal scroll bar which is not acceptable for us.

I would like to autoresize only based on grid column Content i.e data not by column header text.

If the column header text is more and data is only 2 digits then column should take only 2digits width and header text should get WRAPPED.

[Author]

Posts