Jqx-watch issue

[pramilkprinceParticipant]

I am using JQWidgets with angularjs.

I have created jqxgrid as follows

<jqx-grid jqx-settings="ftwHLwatchGridConfg" class="ftw_hl_watchGrid" jqx-watch="[ftwHLwatchGridConfg.source,columns,columngroups]" jqx-create="true"></jqx-grid>

and also created dropdownbox as follows

jqx-drop-down-list  jqx-settings="ftwHLActionComboConfg"
                                         jqx-instance="drpAction"   
                                         ng-model="ftwHLActionValue" jqx-ng-model                                                                            jqx-watch="ftwHLActionComboConfg.source"
                                         class="ftw_hl_actionCombo" ></jqx-drop-down-list>
                </div>

Corresponding configuarion as follows

 var actionSource = {
            datatype: "json",
            datafields: [
                {name: 'action', type: 'string'},
                {name: 'actionLabel', type: 'string'}
            ],
            localdata: []
        };
        var actnCmbAdp = new $.jqx.dataAdapter(actionSource);
        $scope.ftwHLActionComboConfg = {
            theme: 'flip_xl',
            width: 170,
            height: 25,
            selectedIndex:0,
            autoDropDownHeight: true,
            dropDownWidth: 170,
            placeHolder: 'Select',
            source: actnCmbAdp,
            valueMember: 'action',
            displayMember: 'actionLabel',
            
            select: function(event) {
            	var strAction = $scope.ftwHLActionValue.actionLabel;
            	$scope.ftwHLwatchGridConfg.columns = gridColumns(strAction, 'renderMethod');
            	$scope.ftwHLwatchGridConfg.columngroups = colGroup(strAction,strAction);
            	if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
                    $scope.$apply();
                } 
            }
        };

 var gridsource = {
            datatype: "json",
            datafields: [
                {name: 'venue', type: 'string'},
                {name: 'symbol', type: 'string'},
                {name: 'bbq', type: 'number'},
                {name: 'bbp', type: 'float'},
                {name: 'bsp', type: 'float'},
                {name: 'bsq', type: 'number'},
                {name: 'ltp', type: 'float'},
                {name: 'percentagechange', type: 'float'},
                {name: 'netchange', type: 'float'},
                {name: 'ttv', type: 'float'},
                {name: 'ttq', type: 'number'}
            ],
            localdata: []
        };
        
        var gridColumns = function(headingName, renderMethod) {
            var columns = [
                           {text: 'Venue', columngroup:headingName, datafield: 'venue'},
                           {text: 'Symbol', columngroup:headingName, datafield: 'symbol'},
                           {text: 'BBQ', columngroup:headingName, datafield: 'bbq'},
                           {text: 'BBP', columngroup:headingName, datafield: 'bbp'},
                           {text: 'BSP', columngroup:headingName, datafield: 'bsp'},
                           {text: 'BSQ', columngroup:headingName, datafield: 'bsq'},
                           {text: 'LT Price', columngroup:headingName, datafield: 'ltp'},
                           {text: '%Change', columngroup:headingName, datafield: 'percentagechange'},
                           {text: 'Net change', columngroup:headingName, datafield: 'netchange'},
                           {text: 'TTV', columngroup:headingName, datafield: 'ttv'},
                           {text: 'TTQ', columngroup:headingName, datafield: 'ttq'}
                           ];
            return columns;
        };
        var colGroup = function(headingText, headingName) {
        	
        	var colgroupvalue = [{text: headingText, align: 'left', name: headingName}];
        	return colgroupvalue;
        };
        
        var adapter = new $.jqx.dataAdapter(gridsource);
        $scope.ftwHLwatchGridConfg = {
            theme: "flip_xl",
            source:adapter,
            Width: '99%',
            scrollmode: 'logical',
            disabled: false,
            editable: false,
            selectionmode: 'singlerow',
            sortable: true,
            filterable: true,
            altrows: true,
            columnsreorder: true,
            columnsresize: true,
            scrollbarsize: 10,
            autoheight: true,
            autorowheight: true,            
        };

In select event of $scope.ftwHLActionComboConfg ,I am writing codes for changing grid columngroup and columns with the label of dropdownbox. But it is not working .Please identify my mistake in code and give a solution for this

[Peter StoevKeymaster]

Hi pramilkprince,

jqx-watch can point to a single property, not to an array of properties.

Best Regards,
Peter Stoev

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

[pramilkprinceParticipant]

How can I fix that issue?

[Peter StoevKeymaster]

Hi pramilkprince,

You cannot watch for multiple property changes. You can watch for changes of a single property so if you wish this to point to an array, we cannot offer a solution.

Best Regards,
Peter Stoev

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

[Author]

Posts