jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by Kavyad23 10 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

New theme is Not apllying when Button click Posts

September 18, 2014 at 11:58 am New theme is Not apllying when Button click #59702

Participant

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title id='Description'>Grid with localization.</title>
<link rel="stylesheet" href="/eTreasury/css/jqx.base.css"
	type="text/css" />
<link rel="stylesheet" href="/eTreasury/css/jqx.Blue.css"
	type="text/css" />
<link rel="stylesheet" href="/eTreasury/css/jqx.energyblue.css"
	type="text/css" />
<!-- All Script files -->
<script type="text/javascript">
	var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
	demoApp.controller("demoController", function($scope) {

		$scope.Gridsettings = {
			theme : "Blue",
			source : $scope.people,
			height : 200,
			width : 350,

		};

		$scope.changeTheme = function() {
			$scope.settings.theme = 'energyblue';
			$scope.inputSettings.theme = 'energyblue';
		};

		$scope.inputSettings = {
			theme : 'Blue',
			value : "test"
		};
	});
</script>
</head>
<body>
	<div ng-controller="demoController">

		<jqx-grid jqx-columns="columns" jqx-ng-model jqx-settings="Gridsettings"></jqx-grid>

		<jqx-input jqx-width="200" jqx-height="25" jqx-settings="inputSettings"></jqx-input>

		<jqx-button ng-click="changeTheme()">Change Source</jqx-button>
	</div>
</body>
</html>

This is my sample code for changing the theme while button. If I start executing, My Default Theme is “Blue”. If I click a Button, changeTheme() method will call. In that method, I wrote a code for changing the theme, but If I click that button the Theme is not changing for grid and input box. Please help me out to solve this issue.

September 18, 2014 at 2:39 pm New theme is Not apllying when Button click #59714

Peter Stoev

Keymaster

Hi Kavyad23,

You cannot change a Theme like that. Your change does not affect anything, because you change a sub property instead of the entire watched property which is GridSettings and inputSettings. If you want to change a theme using such construction, then you will have to add jqx-watch attribute to the HTML and make it to point to the theme setting.

Example:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxGrid directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.arctic.css" />
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.energyblue.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/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
            // Grid data.
            var data = new Array();
            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
            var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
            var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];
            var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];

            for (var i = 0; i < firstNames.length; i++) {
                var row = {};
                row["firstname"] = firstNames[i];
                row["lastname"] = lastNames[i];
                row["title"] = titles[i];
                row["city"] = city[i];
                row["country"] = country[i];
                data[i] = row;
            }

            $scope.people = data;

            $scope.bindingCompleted = "";
            $scope.settings =
            {
                altrows: true,
                width: 800,
                height: 200,
                theme: 'arctic',
                ready: function()
                {
                    $scope.settings.apply('selectrow', 1);
                },
                sortable: true,
                source: $scope.people,
                columns: [
                    { text: 'First Name', datafield: 'firstname', width: 150 },
                    { text: 'Last Name', datafield: 'lastname', width: 150 },
                    { text: 'Title', datafield: 'title', width: 150 },
                    { text: 'City', datafield: 'city', width: 150 },
                    { text: 'Country', datafield: 'country' }
                ],
                bindingcomplete: function (event) {
                    $scope.bindingCompleted = "binding is completed";
                }
            }

            $scope.changeTheme = function () {
                $scope.settings.theme = 'energyblue';
                $scope.inputSettings.theme = 'energyblue';
            };

            $scope.inputSettings = {
                theme: 'arctic',
                value: "test"
            };
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-grid jqx-watch="settings.theme" jqx-settings="settings"></jqx-grid>
        <br />
        <br />
        <jqx-input jqx-watch="settings.theme" jqx-settings="inputSettings"></jqx-input>
        <br />
        <br />
        <jqx-button jqx-on-click="changeTheme()">Change Theme</jqx-button>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

September 19, 2014 at 5:06 am New theme is Not apllying when Button click #59750

Kavyad23

Participant

Thanks a lot.. Peter.. Its working fine

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.