Remove border from scheduler, documentation incomplete

[martijnParticipant]

Hi I would like to remvoe the border from the scheduler. I’m using the material theme. Is this possible? I’ve read the docs about styling but at the end it says something about an example which is not there. Think it’s incomplete?

[MartinParticipant]

Hello martijn,

Thank you for this feedback!
Do you need to remove the outer border only?
In this case you can apply border: none style to .jqx-scheduler class in the AfterViewInit lifehook.
Here is an Example.

Otherwise, you can use the same approach for removing other borders, too.

Best Regards,
Martin

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

[martijnParticipant]

Yes i meant the outer border! Thanks for the solution, however is there a way to do this with an Angular approuch? I odnt want to import jQuery. I tried this:

        this.renderer.setElementStyle(this.schedulerElementRef.nativeElement, 'border', 'none');

But that doesn’t work.

If I inspect the scheduling, i can see in the inspector that it’s the border of the ‘.jqx-grid’ class. So it’s indeed the outer border that i want to remove, but it’s part of the jqxGrid.

[MartinParticipant]

Hello martijn,

You do not need to import jquery, as it is already used by jqwidgets components.
You can just add declare var $; at the top of the ts file.

Alternatively, you can achieve the same using pure javascript:

let element = document.getElementsByClassName('jqx-scheduler')[0] as HTMLElement;
element.style.border = 'none';

Best Regards,
Martin

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

[martijnParticipant]

Thanks, I didn’t know you could use $ like this.

However i can’t seem to get it to work. I located the css-rule that applies the border and it’s this one:

/*applied to the Grid's element.*/
.jqx-grid
{
    overflow: hidden;
    border-style: solid;
    border-width: 0px;
}

So I tried your examples but instead of jqx-scheduler i tried jqx-grid, sadly to no avail.

I tried logging the element property but it stays undefined. In inspector the css rule is never applied however.

[MartinParticipant]

Hello martijn,

I have updated the previous StackBlitz Example with jqx-grid, instead of jqx-scheduler and it is still working in the same way.

Best Regards,
Martin

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

[Author]

Posts