[StanislavParticipant]

Hello robf,

You can pass 4 parameters to the addRow method:

1) Row Key/ID - unique ID which identifies the row. If null is passed, the jqxTreeGrid will generate an unique ID for the row.
2) Row Data - Object with Key/Value pairs. To add an empty row, pass {}.
3) Row Position - string with two possible values - "last" and "first". By default "last" is used.
4) Parent Row Key/ID - unique ID which identifies the Parent Row. If null is passed, the jqxTreeGrid will add the new row at the first level.

When adding the new row, you will need to get the parent rowKey and pass it.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello edwardsmarkf,

I tried to re-create this behavior, but with no success.
It selected(checked) the items on the first click, and I was able to drag and drop both checked and unchecked items.

I am not sure what is causing this behavior.
If you have more information, please tell us.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello ImSanjay,

Unfortunately, this can not be done.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello fabriceb,

Please contact the sales department for more inforation on this manner.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Indu,

The only two options I can give you are:
Virtual Scrolling
Virtual Paging

What I understand is, that you want to load new rows on page scroll.
Unfortunately, this can not be done.
Virtual Scrolling loads new rows, but it uses the grids scrollbar.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello draki,

Take a look at this example: Link
The NavBar and the Grid are placed in a splitter.
The NavBar’s hight is a constant of 74px(the splitter content size is set to 74px) and the grid takes up the rest of the splitter.

This way, you won’t need to calculate the hight of the grid on every change.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello robf,

Is this what you are looking for?
http://jsfiddle.net/rkttb/478/

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello edwardsmarkf,

This should not be happening.
A fix will be released for this in the next update.

Thanks for the report!

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello edwardsmarkf,

What are you trying to achieve with this?

You want a place to store all your global variables?

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Shakti,

Here is an example of custom tooltip:

app.component.HTML

<jqxGrid [width]="850" [height]="450" [source]="dataAdapter"
		 [enabletooltips]="false"
		 [cellhover]="cellhovertooltiprenderer"	
		 [selectionmode]="'singlecell'"
		 [columns]="columns" [altrows]="true" [sortable]="true">
</jqxGrid>

app.component.ts

export class AppComponent {
	source: any =
	{
		datatype: 'xml',
		datafields: [
			{ name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
			{ name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
			{ name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
			{ name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
			{ name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
			{ name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
		],
		root: 'entry',
		record: 'content',
		id: 'm\\:properties>d\\:OrderID',
		url: '../assets/sampledata/orders.xml',
		sortcolumn: 'ShipName',
		sortdirection: 'asc'
	};

	dataAdapter: any = new jqx.dataAdapter(this.source);

	counter: number = 1;
	tooltiprenderer = (element: any): void => {
		let id = <code>toolTipContainer${this.counter}</code>;
		element[0].id = id;
		let content = element[0].innerHTML;
		setTimeout(_ => jqwidgets.createInstance(<code>#${id}</code>, 'jqxTooltip', { position: 'mouse', content: content }))
		this.counter++;
	}

	cellhovertooltiprenderer = (element: any, pageX: number, pageY: number): void => {
		setTimeout(_ => jqwidgets.createInstance('.jqx-item', 'jqxTooltip', { position: 'mouse', content: "Hello!" }));
	};

	columns: any[] =
	[
		{ text: 'Ship Name', datafield: 'ShipName', width: 250, rendered: this.tooltiprenderer },
		{ text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd', rendered: this.tooltiprenderer },
		{ text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right', rendered: this.tooltiprenderer },
		{ text: 'Ship Address', datafield: 'ShipAddress', width: 350, rendered: this.tooltiprenderer },
		{ text: 'Ship City', datafield: 'ShipCity', width: 100, rendered: this.tooltiprenderer },
		{ text: 'Ship Country', datafield: 'ShipCountry', width: 101, rendered: this.tooltiprenderer }
	];
}

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello mikhaa,

Have you tried using the dynamic component loader?
Recently we added it to our documentation and it shows how to inject dynamic components into the main component.
Here is the link Link

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello shakti,

When you set [enabletooltips]="true", the tooltips appears above the checkboxes.
here is an example:
app.component.ts

export class AppComponent {
	source: any =
	{
		localdata: generatedata(13, true),
		datafields:
		[
			{ name: 'available', type: 'bool' }
		],
		datatype: 'array'
	};

	dataAdapter: any = new jqx.dataAdapter(this.source);

	columns: any[] =
	[
		{ text: 'Available', datafield: 'available', threestatecheckbox: true, columntype: 'checkbox', width: 70 }
	];
}

app.component.HTML

	<jqxGrid [width]="70" [source]="dataAdapter" [enabletooltips]="true"
			 [editable]="true" [columns]="columns">
	</jqxGrid>

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Sandeep,

Can you please confirm this:
You want a ListBox that has checkboxes. When checking the checkboxes, you show or hide columns(or other elements)?

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Sandeep,

Here is an example of jqxTreeGrid with TextArea as the last column.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { jqxTreeGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtreegrid';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
})

export class AppComponent {
	@ViewChild('treeGridReference') treeGrid: jqxTreeGridComponent;

	source: any =
	{
		dataType: "csv",
		dataFields: [
			{ name: 'EmployeeKey', type: 'number' },
			{ name: 'ParentEmployeeKey', type: 'number' },
			{ name: 'FirstName', type: 'string' },
			{ name: 'LastName', type: 'string' },
			{ name: 'DepartmentName', type: 'string' }
		],
		hierarchy:
		{
			keyDataField: { name: 'EmployeeKey' },
			parentDataField: { name: 'ParentEmployeeKey' }
		},
		id: 'EmployeeKey',
		url: '../assets/sampledata/employeesadv.csv'
	};

	dataAdapter: any = new jqx.dataAdapter(this.source);

	columns: any[] =
	[
		{ text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 250 },
		{ text: 'LastName', dataField: 'LastName', width: 250 },
		{
			text: 'Department Name', dataField: 'DepartmentName', width: 350, columnType: 'template',
			createEditor: (row, cellvalue, editor, cellText, width, height) => {
				// construct the editor. 
				let TextAreaSource = ['Recruiter', 'Benefits Specialist', 'Human Resources Manager', 'Assistant to the Chief Financial Officer', 'Accounts Manager'];
				editor.jqxTextArea({
					width: 300, height: 90, source: TextAreaSource, minLength: 1
				});
			}
		}
	];

	ready: any = () => {
		this.treeGrid.expandRow(32);
	};
}

app.component.HTML

<jqxTreeGrid #treeGridReference
			 [width]="850" [height]="'auto'" [source]="dataAdapter" [pageable]="true" 
			 [columns]="columns" [ready]="ready" [editable]="true">
</jqxTreeGrid>

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello Sandeep,

Unfortunately, listbox doesn’t have this kind of functionality, you can not have group headers with checkboxes.

Take a look at this: TreeGrid with checkboxes
treeGrid has this functionality built-in.

Best Regards,
Stanislav

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

[Author]

Posts