[lqbwebParticipant]

I have fixed the problem by adding:

this.ValueString = "";

in line 2853, on the _setDecimal function. Although it does not respect the symbol

[lqbwebParticipant]

I have realized about something:

https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html

OnChanges does not get fired if you just change the @Input() property, but only if that property is bound to another one, and you change the last one.

Instead, you need to implement your own change detector:

https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html

Therefore, I believe it makes a lot of sense to have fixed methods that act on the jquery instance that does not depend on the change detection as you have now with the latest update. But keep this in mind for your existing @Input() in other components.

Have a look at this plunkr:

https://plnkr.co/edit/litwgoJ1OLbnHNjIIYhO

[lqbwebParticipant]

Have a look at my post and my solution:

http://www.jqwidgets.com/community/topic/problem-rendering-new-tabs-feature-request/

You are experiencing I think this bug from angular2:

https://github.com/angular/angular/issues/12283

[lqbwebParticipant]

To help other users, this is what I ended up doing with the above template:

@Directive({
    selector: '[new-tab]'
})
export class NewTabTemplate {
    @Input('new-tab') public title : string;
}

export class MyTabPanel implements AfterViewInit {
    .......
    @ViewChild(jqxTabsComponent) jqxTab: jqxTabsComponent;
    @ContentChild(NewTabTemplate) newTab : NewTabTemplate;
    @ContentChild(NewTabTemplate, { read: TemplateRef }) newTabRef;
    .......

    private renderNewTemplate(atIndex : number) {
        let res = this.tabContent.createEmbeddedView(this.newTabRef);
        this.jqxTab.addAt(atIndex, this.buildTitle(this.newTab.title), "<div id='newTab'>Loading</div>");
        let jqxNode = (this.jqxTab.widgetObject as any)._contentList[atIndex];
        jqxNode.parentNode.removeChild(jqxNode);
        let divElement = $(res.rootNodes).filter('div')[0];
        (this.jqxTab.widgetObject as any)._contentList[atIndex]=divElement;
        (this.jqxTab.widgetObject as any)._uiRefresh(false);
    }

    public ngAfterViewInit(): void {
         console.log(this.newTab);
         this.jqxTab.OnTabclick.subscribe((eventData) => {
             var numberTabs : number = this.jqxTab.length() - 1; //
             if(eventData.args.item == numberTabs) { // the user pressed on "New Tab"
                this.renderNewTemplate(numberTabs);
             }
         });

        .....
    }
}

[lqbwebParticipant]

You could place the jqwidgets-ts in your node-modules folder, to make automatic resolution work in typescript

Have a look here:
http://www.typescriptlang.org/docs/handbook/module-resolution.html

If you put it somewhere else, you need to specify in the import the relative path from your tsconfig.json.

Also, now you could link jqwidgets using npm in your package.json, as the typescript definitions are also there.

[lqbwebParticipant]

I just saw your new release. My comments:

Overall, looks better, at least the ngModel now works. But there are things that I am not convinced about:

– I see you just went for removing the hook to the ngChanges and do setters for everything, this is not good IMHO, because you can not bind it to any angular expression. Why not implementing two ways binding that write to the jquery instance?
– The only two Input that you have declared are not correctly bound. I suspect that changing the width and height after having called to createWidget, will not be updated.
– you do not need to project anything, therefore you can remove <ng-content></ng-content> from the template.
– Yet, the <input> is not created by angular. Although, I see this a bit harder to fix with your current implementation.

Regards

[lqbwebParticipant]

Thanks,

I have managed to make it work, by simply setting the {keyboardNavigation: false} at the tabs panel. But as you said it does not work, so far I do not care, but maybe you want to improve this:

The angular_jqxxInput only exposes an OnChange. Tried what you say there, and it does not work. Then I tried to bind to the “input” event with jquery, and stop the propagation there, also does not work (besides that it is a bit ugly to bind to the event with jquery).

Thanks again.

[lqbwebParticipant]

Please Ivo, have a look at my last thread here:

http://www.jqwidgets.com/community/topic/ngmodel-does-not-refresh-the-view/

I believe it is an important bug, that will be a pity that you miss, and I still have not got any answer there or by email.

[lqbwebParticipant]

ok, I found the problem.

Peter, you are not implementing ControlValueAccessor on any of the angular2 components, and therefore the ngModel does not work properly. I have tweaked jqxInputComponent a little bit and now it works. I will send you my modifications to you by email.

Regards,
Ruben

[lqbwebParticipant]

wow, that would have saved me a lot of time. thanks very much!

[lqbwebParticipant]

I have managed to do sort of what I was trying to do by overriding the ‘Delete’ function on the __proto__ of my number input instance, but I am afraid to be breaking some functionality.

What I want to achieve is make your number input not to reset the value to “0” when trying to delete the content, but to null (since the field, accepts nulls due to allowNull). This makes perfectly sense in the real world, since some of my number fields may be optional, and I do not want to display anything at all, and leave the user the option to clear its content.

[lqbwebParticipant]

also, it seems to be an issue related. When you specify a minimum value, and you select all text and press Del, it still goes to 0, leaving the field invalid.

[lqbwebParticipant]

Hello,

There seems to be an issue when I am wrapping, for example, jqxInput into my own directive.

My user case:

renderFormModule.directive('customDirective', function($compile) {
	return {
		restrict: 'E',
		replace:false,
		scope: {
			name: '='
		},

		template: '<jqx-input ng-model="name"></jqx-input>',
		
		compile: function compile(element, attrs) {
		    var child = angular.element(element[0].firstChild);
		    element.replaceWith(child);
		    
			child.removeAttr("name"); //the properties from the directive scope, we need to remove
			
			return {
			  pre: function preLink(scope, iElement, iAttrs, controller) { },
			  post: function postLink(scope, iElement, iAttrs, controller) {
				iElement.attr('name', iAttrs.name);
				iElement.attr('id', iAttrs.name + '_id');
				$compile(iElement)(scope);
			  }
			};
		}
	}
});

This seems to be exactly the same problem as in the op case.

which, can be worked around by wrapping the jqx-input in the template between a div, as:

template: '<div><jqx-input ng-model="name"></jqx-input></div>',

Does anyone knows why?

[lqbwebParticipant]

Thanks Ivailo for your support.

I know I can draw lines with bands, but if you read carefully my question, I did not say “line” but “segments”. Indeed, I do not want the line to go all the way across the x axis, only part of it. Is this somehow possible already?

[lqbwebParticipant]

ok, with that example I can not place a “cross” as a symbol.

Maybe my requirements are a bit unusual, not sure, but in general I had to work a lot with annotations, and I am finding it a bit painful, partially because of the lack of documentation about it.

My suggestions and improvements for the annotations:

1) If you have different types of annotations, then the configuration should be in different types of containers. It does not make sense having a parameter “radius” at the same level as “width” or “height”.

2) An annotation type called “line”, I would expect to have an attribute like “length” or “x1, y1, x2, y2”, but still, it seems that when I apply a “width” to a “line”, it has somehow an effect, indeed, I see a rectangle instead of a line :|. Sorry, this part, I find it very confusing.

3) If we are meant to use the annotations inside the grid area, why the path annotation works outside this grid area? The design principles sound a bit inconsistent.

4) all position and size attributes should have some sort of units. ie: xValue=1px would refer to an absolute position, while xValue=1, would just refer to the coordinate where x=1. The same principle should apply for the offsets, width, height, etc. width=50px, would refer to an absolute width of 50 pixels, while width=50, could refer to a width of 50 increments on the “x” axis.

In general, I find the JqWidgets platform absolutely great. Please take this only in a constructive manner. In the end, our application has complex requirements on charts, and I am very close to fulfill all of them with jqxChart.

Thanks very much for your support, which I also find it to be great.

[Author]

Posts