jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
August 31, 2015 at 6:54 am in reply to: Export is not working with CellClassName Export is not working with CellClassName #75300

shan_vs
Participant

It does work fine when you write it in a single file. But, when I try to write it separetely in cellClassCtrl.js and sample.html file….it is not working properly!!! I need to write the html and js part separetely only.

I have included again the files for your references.

sample.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>The sample illustrates how to add custom CSS styles to Grid cells under specific conditions.</title>
<link rel=”stylesheet” href=”../common/assets/css/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../common/assets/css/style.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.export.js”></script>
<script src=”cellClassCtrl.js”></script>
</head>
<body class=’default’ ng-controller=’sample’ ng-app=”demoAPP”>
<style>
.green {
color: black\9;
background-color: #b6ff00\9;
}
.yellow {
color: black\9;
background-color: yellow\9;
}
.red {
color: black\9;
background-color: #e83636\9;
}

.green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #b6ff00;
}
.yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: yellow;
}
.red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #e83636;
}
</style>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
<input type=”button” id=”exportBtn”>Export</input>
</div>
</body>
</html>

cellClassCtrl.js

var demoAPP = angular.module(“demoAPP”, [‘jqwidgets’]);

demoAPP.controller(“sample”,function($scope){
var data = [{ “ProductName”: ‘XYZ’, “QuantityPerUnit”:12, “UnitPrice”: 123.2, “UnitsInStock”: 15, “Discontinued”: 1},
{ “ProductName”: ‘asd’, “QuantityPerUnit”:1, “UnitPrice”: 129.2, “UnitsInStock”: 49, “Discontinued”: 0},
{ “ProductName”: ‘qwe’, “QuantityPerUnit”:16, “UnitPrice”: 223.2, “UnitsInStock”: 15342.8, “Discontinued”: 1},
{ “ProductName”: ‘errt’, “QuantityPerUnit”:29, “UnitPrice”: 223.2, “UnitsInStock”: 15342.8, “Discontinued”: 0},
{ “ProductName”: ‘cvb’, “QuantityPerUnit”:5, “UnitPrice”: 193.2, “UnitsInStock”: 123452.8, “Discontinued”: 1}]

var source =
{
datatype: “JSON”,
datafields: [
{ name: ‘ProductName’, type: ‘string’ },
{ name: ‘QuantityPerUnit’, type: ‘int’ },
{ name: ‘UnitPrice’, type: ‘float’ },
{ name: ‘UnitsInStock’, type: ‘float’ },
{ name: ‘Discontinued’, type: ‘bool’ }
],
localData: data
};

var cellclass = function (row, columnfield, value) {
if (value < 20) {
return ‘red’;
}
else if (value >= 20 && value < 50) {
return ‘yellow’;
}
else return ‘green’;
}

var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
editable: true,
selectionmode: ‘multiplecellsadvanced’,
columns: [
{ text: ‘Product Name’, datafield: ‘ProductName’, width: 250 },
{ text: ‘Quantity per Unit’, datafield: ‘QuantityPerUnit’, cellsalign: ‘right’, align: ‘right’, width: 120 },
{ text: ‘Unit Price’, datafield: ‘UnitPrice’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100 },
{ text: ‘Units In Stock’, datafield: ‘UnitsInStock’, cellsalign: ‘right’, cellclassname: cellclass, width: 100 },
{ text: ‘Discontinued’, columntype: ‘checkbox’, datafield: ‘Discontinued’ },
]
});

$(“#exportBtn”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});

});

August 31, 2015 at 4:50 am in reply to: Export is not working with CellClassName Export is not working with CellClassName #75290

shan_vs
Participant

Hi,

Even after the inclusion of the two references to the scripts jqxdata.export.js and jqxgrid.export.js the expor t is not working and showing the same error :

TypeError : ’0′ is not a function

May 27, 2015 at 7:09 am in reply to: Grid Filter [Excel Level and Conditional] Grid Filter [Excel Level and Conditional] #71612

shan_vs
Participant

Hi Dimitar,

Thanks for the help !!!

But the requirement is we need to show both excel and conditional filter in single column in the JQXGrid. Please provide sample to implement the same.

Thanks

Regards

V Shan

November 13, 2014 at 10:22 am in reply to: JQXTAB with Angularjs JQXTAB with Angularjs #62680

shan_vs
Participant

Hi Peter,

I am using import.js file, which Included all the files.

Angular.js, jquery-1.11.1.min.js, jqxcore.js, jqxdata.js, jqxbuttons.js, jqxgrid.js, jqxgrid.filter.js, jqxgrid.selection.js, jqxgrid.sort.js, jqxgrid.edit.js, jqxangular.js, etc…

Please clarify why jqx-settings not applying for components.

November 13, 2014 at 9:50 am in reply to: JQXTAB with Angularjs JQXTAB with Angularjs #62676
shan_vs
Participant
Hi Peter,

Thanks for a reply. I am not able to access Jqx-Settings inside Tab Control. I applied jqx-settings for Jqx-Grid but the grid is not creating.
```
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
<script type="text/javascript" src="../../scripts/angular.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script>
	var demoApp = angular.module("demoApp", [ "jqwidgets" ]);

	demoApp.controller("demoController", function($scope) {
		$scope.tabsSettings = {
			width : 800,
			height : 800
		}
	});
	demoApp.controller("Tab1Controller", function($scope) {
		$scope.obj1 = {
			Grid1 : {
				width : '200',
				height : '100',
				showheader : true,
				columns : [ {
					text : 'Name',
					datafield : 'name',
					width : '100'
				} ]
			},
			name : "Peter Smith",
			calling1 : function() {
				alert("Calling 1");
			}
		};

	});
	demoApp.controller("Tab2Controller", function($scope) {
		$scope.obj2 = {
			Grid2 : {
				width : '200',
				height : '100',
				showheader : true,
				columns : [ {
					text : 'Name',
					datafield : 'name',
					width : '100'
				} ]
			},
			name : "Peter",
			calling2 : function() {
				alert("Calling 2");
			}
		};
	});
</script>
</head>
<body>
	<div ng-controller="demoController">
		<jqx-tabs jqx-settings="tabsSettings">
		<ul style="margin-left: 30px;">
			<li>Tab 1</li>
			<li>Tab 2</li>
		</ul>
		<div ng-controller="Tab1Controller">
			{{obj1.name}}
			<jqx-grid jqx-settings="obj1.Grid1"></jqx-grid>
			<jqx-button ng-click="obj1.calling1()">Tab 1</jqx-button>
		</div>
		<div ng-controller="Tab2Controller">
			{{obj2.name}}
			<jqx-grid jqx-settings="obj2.Grid2"></jqx-grid>
			<jqx-button ng-click="obj2.calling2()">Tab 2</jqx-button>
		</div>
		</jqx-tabs>
	</div>
</body>
</html>
```
November 5, 2014 at 9:06 am in reply to: Navigation bar Color Change Navigation bar Color Change #62169

shan_vs
Participant

Hi Nadezhda,

Thanks for your reply. I have three Navigation menu, One is expanded and two is collapsed. If I want to change collapse TAB background color for only one collapsed TAB, How to set this.?

October 16, 2014 at 5:35 am in reply to: How to use Separate Controller for JqxWindow How to use Separate Controller for JqxWindow #61214

shan_vs
Participant

Hi peter,

Thanks a lot. If I have only one function means, I can use Jqx-data. Suppose if the controllers have multiple functions, How I can use that functions inside docking or window.

October 16, 2014 at 5:16 am in reply to: jqxdocking ng-click event not fired with arguments. jqxdocking ng-click event not fired with arguments. #61212

shan_vs
Participant

Hi Peter,

Please provide solution to implemented shared scope between jqwidgets components (JQXDOCKING,JQXTAB,JQXWINDOW) and angular.

Thanks

Regards

V Shan

October 15, 2014 at 11:09 am in reply to: How to use Separate Controller for JqxWindow How to use Separate Controller for JqxWindow #61167
shan_vs
Participant
Hi peter,

Thanks for your response. Actually, JqxTabs and jqxWindows are isolated scope, If I use ng-controller again and again, the controller is calling again and again and also the “apply” method is getting error.
```
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<link rel="stylesheet" type="text/css" href="../css/jqx.base.css" />
<script type="text/javascript" src="../Tools/angular.min.js"></script>
<script type="text/javascript" src="../Tools/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../Tools/jqxcore.js"></script>
<script type="text/javascript" src="../Tools/jqxdata.js"></script>
<script type="text/javascript" src="../Tools/jqxbuttons.js"></script>
<script type="text/javascript" src="../Tools/jqxwindow.js"></script>
<script type="text/javascript" src="../Tools/jqxangular.js"></script>
<script type="text/javascript">
	var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
	demoApp.controller("ParentCtrl", function($scope) {
		$scope.message = "Child updated from parent controller";
	
		$scope.clickFunction = function() {
			$scope.$broadcast('update_parent_controller', $scope.message);
			$scope.jqxWindowSettings.apply('open'); 
		};

		$scope.jqxWindowSettings = {
			height : 300,
			width : 300,
			resizable : false,
			isModal : true,
			autoOpen : false,
			modalOpacity : 0.3
		};
	});
	demoApp.controller("ChildCtrl", function($scope, $rootScope) {
		alert("ChildCtrl Controller");
		$scope.message = "Some text in child controller";

		$scope.$on("update_parent_controller", function(event, message) {
		$scope.message = message;
		});
	});
</script>
</head>
<body>
	<div ng-controller="ParentCtrl">

		<jqx-window jqx-settings="jqxWindowSettings" id="window" ng-controller="ChildCtrl">
		<div>Title</div>
		<div ng-controller="ChildCtrl">{{message}}</div>
		</jqx-window>

		<jqx-tabs>
		<ul>
			<li>Tab</li>
		</ul>
		<div>
			<button data-ng-click="clickFunction()">Click</button>
		</div>
		</jqx-tabs>
	</div>
</body>
</html>
```
Here if I put ng-controller=”ParentCtrl” in JqxTabs for scope, I getting this Error Uncaught TypeError: Object #<Object> has no method 'apply' in console when I click the button. How to avoid this error, please provide a sample for isolated scope and to avoid repeating ng-controller.
October 15, 2014 at 8:01 am in reply to: How to use Separate Controller for JqxWindow How to use Separate Controller for JqxWindow #61148
shan_vs
Participant
Hi Peter,

Thanks for your reply.
```
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<link rel="stylesheet" type="text/css" href="../css/jqx.base.css" />
<script type="text/javascript" src="../Tools/angular.min.js"></script>
<script type="text/javascript" src="../Tools/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../Tools/jqxcore.js"></script>
<script type="text/javascript" src="../Tools/jqxdata.js"></script>
<script type="text/javascript" src="../Tools/jqxbuttons.js"></script>
<script type="text/javascript" src="../Tools/jqxwindow.js"></script>
<script type="text/javascript" src="../Tools/jqxangular.js"></script>
<script type="text/javascript">
	var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
	demoApp.controller("demoController", function($scope) {
		$scope.jqxWindowSettings = {
			height : 300,
			width : 300,
			resizable : false,
			isModal : true,
			autoOpen : false,
			modalOpacity : 0.3
		};
		$scope.showWindow = function() {
			$scope.jqxWindowSettings.apply('open');
		}

		$scope.test = "sample text";
	});
</script>
</head>
<body ng-controller="demoController" class='default'>
	<div>
		<jqx-window jqx-settings="jqxWindowSettings" id="window" >
		<div>Title {{test}}</div>
		<div>Sample {{test}}</div>
		</jqx-window>
		<jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
	</div>
</body>
</html
```
Here how to print the {{test}} scope variable inside <jqx-window>. If I put ng-controller in <jqx-window>, I getting this Error,

Uncaught TypeError: Object #<Object> has no method 'apply'
October 13, 2014 at 5:08 am in reply to: jqxdocking ng-click event not fired with arguments. jqxdocking ng-click event not fired with arguments. #61017

shan_vs
Participant

Hi Peter,

Please let us know, why data-ng-click event not fired inside of docking.

Please help

Thanks

Regards

V Shan

October 10, 2014 at 8:45 am in reply to: jqxdocking ng-click event not fired with arguments. jqxdocking ng-click event not fired with arguments. #60944

shan_vs
Participant

Hi Peter,

Thanks for the help.

Please clarify.

Example :

1) With docking data-ng-click event fired for jqxbutton.

<div ng-controller=”DemoController”>
<div>
<div data-ng-repeat=”record in data” on-render=”jqxButton” id={{record.uniqueNo}}
class=”window ” style=”width: 220px !important; float: left;” >
<div class=”sell”>
<jqx-button jqx-settings=”mrktWtcBtn” data-ng-click=”onSellClick(record);”>Sell</jqx-button>
</div>
</div>
</div>
</div>

2) With docking data-ng-click event not fired for jqxbutton.

<div ng-controller=”DemoController”>
<div>
<jqx-docking jqx-width=”‘90%'” jqx-orientation=”‘vertical'”
jqx-mode=”‘docked'” id=”docking” jqx-data=”currencyList”
class=”dcking” style=”float: left; min-height: 452px; !important”>
<div>

<div data-ng-repeat=”record in data” on-render=”jqxButton” id={{record.uniqueNo}}
class=”window ” style=”width: 220px !important; float: left;” >
<div class=”sell”>
<jqx-button jqx-settings=”mrktWtcBtn” data-ng-click=”onSellClick(record);”>Sell</jqx-button>
</div>
</div>
</div>
</div>
</div>

Please provide an sample for using docking with ng-repeat and access using jqxbutton.

Thanks for your help

Regards

V Shan

October 10, 2014 at 5:25 am in reply to: jqxdocking ng-click event not fired with arguments. jqxdocking ng-click event not fired with arguments. #60924

shan_vs
Participant

Hi Peter,

Please Check this above sample code. Here {{data.ListId}} printing the Array values, But If I pass this value to demoFunction(data.ListId), Its printing as [Object Object]. please provide a sample for retriving data from ng-repeat inside docking.

October 9, 2014 at 7:46 am in reply to: jqxdocking ng-click event not fired with arguments. jqxdocking ng-click event not fired with arguments. #60862

shan_vs
Participant

Hi Peter,

Please clarify the above code to acces the data in demofunction.

Thanks

Regards

V Shan

October 9, 2014 at 5:54 am in reply to: jqxdocking ng-click event not fired with arguments. jqxdocking ng-click event not fired with arguments. #60851

shan_vs
Participant

var demoApp = angular.module(“demoApp”, [ “jqwidgets” ]);

demoApp.controller(“demoController”, function($scope) {
$scope.buttons = {
width : 66,
height : 17,
};
$scope.List = [];
$scope.List.push({
ListId : “001”,
PriceLeft : “58.596667”,

});

$scope.demoFunction = function(ListId) {
alert(“Demo Fucntion Calling”);
alert(ListId);
};

});
</script>
</head>
<body>
<div ng-controller=”demoController”>
<div ng-repeat=”record in List”>

<jqx-docking jqx-width=”222″ jqx-orientation=”‘horizontal'”
jqx-height=”155″ jqx-mode=”‘default'” id=”docking” jqx-data=”record”
style=”float: left;” class=”dcking”>
<div>Title</div>
<div>
{{ data.ListId }} <br> {{ data.PriceLeft }} <br>
<jqx-button jqx-settings=”buttons”
ng-click=”demoFunction(data.ListId)”>Sell</jqx-button>
</div>
</jqx-docking>
</div>
<jqx-input jqx-width=”200″ jqx-height=”25″ value=’textValue’></jqx-input>
</div>

</body>
</html>`

Here, List is array, I want to pass this Array of Obj “record” in demoFunction() as argument. In that demoFunction, I want to access the value and set that value to TextBox. I tried but the “alert(record.ListId);” is undefined. Why? How to pass arguments in function.
Author

Posts

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →