[rmk3200Participant]

some times error occurs like
TypeError: o.jqx.dataAdapter.DataExporter is not a constructor

[rmk3200Participant]

When i use exportview method it does not respond at all with any error/response. i tried jqwidgets-ng V18 and v19.

[rmk3200Participant]

Will this splitLayout produce? attributes modified html code when resize events.
The positions of divs and elements?

[rmk3200Participant]

Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PrintDesignRoutingModule } from './print-design-routing.module';
import { PrintDesignComponent } from './print-design.component';
import { jqxSplitLayoutModule } from 'jqwidgets-ng/jqxsplitlayout';
import { jqxTreeModule } from 'jqwidgets-ng/jqxtree';
@NgModule({
  declarations: [
    PrintDesignComponent
  ],
  imports: [
    CommonModule,
    PrintDesignRoutingModule,
    jqxSplitLayoutModule,
    jqxTreeModule
  ]
})
export class PrintDesignModule { }

Component

import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
@Component({
  selector: 'app-print-design',
  templateUrl: './print-design.component.html',
  styleUrls: ['./print-design.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class PrintDesignComponent implements AfterViewInit{
  @ViewChild('myLayout', { static: false }) myLayout: jqxSplitLayoutComponent;

  dataSource = [
     {
       type: 'tabs',
       size: '80%',
       items: [
         {
           label: 'My Milan Notes',
           content: 

<textarea class=”input”>The massive Cathedral of Santa Maria Nascente, which the Milanese call just “Il Duomo” is among the world’s largest (it holds up to 40,000 people) and most magnificent churches, the ultimate example of the Flamboyant Gothic style. It was begun in the 14th century, but its façade was not completed until the early 1800s, under Napoleon. The roof is topped by 135 delicately carved stone pinnacles and the exterior is decorated with 2,245 marble statues. The dim interior, in striking contrast to the brilliant and richly patterned exterior, makes a powerful impression with its 52 gigantic pillars. The stained-glass windows in the nave (mostly 15th-16th centuries) are the largest in the world; the earliest of them are in the south aisle. Highlights include the seven-branched bronze candelabrum by Nicholas of Verdun (c. 1200) in the north transept, the 16th-century tomb of Gian Giacomo Medici, and the jeweled gold reliquary of San Carlo Borromeo in the octagonal Borromeo Chapel leading off the crypt. Behind the high altar, the choir has deeply carved panels, and misericords under the seats.
In the south sacristy is the treasury with gold and silver work dating from the fourth to the 17th century. A walk on the roof of the cathedral is an impressive experience, offering views across the city and extending on clear days to the snow-covered Alps. (An elevator ascends all but the last 73 steps to the platform of the dome). At the front of the Duomo, near the central doorway, you can descend under Piazza del Duomo into the foundations of the Basilica di Santa Tecla (fourth-fifth and seventh century) and the fourth-century baptistery, Battistero di San Giovanni alle Fonti, which were discovered during the construction of the Milan Metro system.
</textarea>`
},
{
label: “Milan City Map”,
content: <div id="map"></div>
}
]
},
{
type: ‘tabs’,
position: “right”,
items: [
{
label: “Explorer”,
content: <div id="tree"></div>
},
{
label: “About Milan”,
content: ` <p>
Milan, a metropolis in Italy’s northern Lombardy region, is a global capital of fashion and design.
Home to the national stock exchange, it’s a financial hub also known for its high-end restaurants
and shops. The Gothic Duomo di Milano cathedral and the Santa Maria delle Grazie convent, housing
Leonardo da Vinci’s mural “The Last Supper,” testify to centuries of art and culture.
</p>`
}
]
}
]

treeSource = [
{
icon: “https://www.jqwidgets.com/angular/images/mailIcon.png”, label: “Mail”, expanded: true, items: [
{ icon: “https://www.jqwidgets.com/angular/images/calendarIcon.png”, label: “Calendar” },
{ icon: “https://www.jqwidgets.com/angular/images/contactsIcon.png”, label: “Contacts”, selected: true }
]
},
{
icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Inbox”, expanded: true, items: [
{ icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Admin” },
{ icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Corporate” },
{ icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Finance” },
{ icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Other” }
]
},
{ icon: “https://www.jqwidgets.com/angular/images/recycle.png”, label: “Deleted Items” },
{ icon: “https://www.jqwidgets.com/angular/images/notesIcon.png”, label: “Notes” },
{ iconsize: 14, icon: “https://www.jqwidgets.com/angular/images/settings.png”, label: “Settings” },
{ icon: “https://www.jqwidgets.com/angular/images/favorites.png”, label: “Favorites” }
];

setup(): void {
const that = this;

jqwidgets.createInstance(#tree, ‘jqxTree’, {
source: that.treeSource
});

window[“initializeMaps”] = function () {
new window[“google”].maps.Map(document.getElementById(‘map’), {
center: new window[“google”].maps.LatLng(45.4642, 9.1900),
zoom: 8,
mapTypeId: window[“google”].maps.MapTypeId.ROADMAP
});
}

const script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = ‘https://maps.googleapis.com/maps/api/js?key=AIzaSyDLNo8WFhrz_4zuLdl423WX9h5Kh0SedHQ&callback=initializeMaps’;
document.body.appendChild(script);
}

ngAfterViewInit(): void {
const that = this;

if (document.readyState === “complete”) {
that.setup();
}
else {
window.onload = function() {
that.setup();
}
}
}
}
`
Html

<p>print-design works!</p>
<jqxSplitLayout id=”layout” [dataSource]=”dataSource” #myLayout>
</jqxSplitLayout>

[rmk3200Participant]

How can we declare each component has each module?
We have module and its components. 1 module and many components.

[rmk3200Participant]

Is there any limitations of using widgets? Because in my project many modules are replaced with jqxDatetime and every where fine working. And there is a issue with one module. Even I tried to test with another temp module to check module issue. But there is no issue with module.
When I tap date input icon the issue is occurring like post id #133283.

[rmk3200Participant]

https://www.dropbox.com/sh/dx9ymyvtt9plv7h/AAAhyrgL1YmiVKFwIgQyBbaGa?dl=0

You can install the test project that uses jqDateWidgets.

https://www.dropbox.com/s/p086tqpzki0naq8/Screenshot%20%2812%29.png?dl=0
This image will show that issue on tapping jqDate field in real project.

[rmk3200Participant]

https://easyupload.io/m/ntatat

You can find a test project. There is also some UI issue for date.
Same code used in our project. Still we have issue like #133283

[rmk3200Participant]

When stalkblitz example its working fine. Where as local server I am getting issue

ERROR TypeError: m.stop is not a function
at c.<computed>.navigateTo (jqxcalendar.js:8:50135)
at c.<computed>.setDate (jqxcalendar.js:8:50380)
at c.<computed>.showCalendar (jqxdatetimeinput.js:8:56735)
at HTMLDivElement.<anonymous> (jqxdatetimeinput.js:8:27434)
at HTMLDivElement.dispatch (jquery-3.3.1.slim.min.js:2:41964)
at v.handle (jquery-3.3.1.slim.min.js:2:39983)
at ZoneDelegate.invokeTask (zone.js:421:35)
at Object.onInvokeTask (core.js:28499:33)
at ZoneDelegate.invokeTask (zone.js:420:40)
at Zone.runTask (zone.js:188:51)

[rmk3200Participant]

          <my-date-picker id="toDateId" [options]="myDatePickerOptions" [(ngModel)]="toDate" [formControl]="toDateControl"
            name="toDate"></my-date-picker>

I would like to upgrade above code as

                <jqxDateTimeInput [theme]="'material'" [width]="460" [height]="30" style="margin-bottom: 20px" 
                    [formatString]="dateFormat" [(ngModel)]="toDate" [formControl]="toDateControl"
                  name="toDate"></jqxDateTimeInput>

here custom date format with 12 hour time AM/PM method on forms is unable to show. //Related to first thread

[rmk3200Participant]

my source is one dimensional string array is fetching from server. why work around with data adaptor? can’t show combo box that what i have?
By this i need to change actual source and edit_source as per your reference. and selectIndex is not worked for me.
Can you give me another example of 1D array with strings to preselect the array values on ngOnInIt?

[rmk3200Participant]

no loader will not useful for waiting for data. Because only once ngAfterInIt will called whether you have data or not, Loader true or false whatever available values it will get excuted.
You have to make your implementation to suits for ngOnInIt as well, until combo box pre select feature is worthless.

[rmk3200Participant]

You didn’t get my requirement. the source has actual or all values as well. I would like to present as pre selected values which are already saved to my data. This call is an editing info of a record which is already saved with some data. I exactly needed like demo of your pre selected values combo box. But it is not happening because of data is not available when ngAfterInIt called. After ngAfterInIt called data getting triggered and received in ngOnInIt. So we cannot stop ng life cycle until data response in ngOnInIt.

The previous response from you has a example is not suits for ng life cycle. Whatever source/ Set combo will show. But data availability on server call is fully dependent on ngOnInIt. ngAfterInIt never wait until ngOnInIt completely has resolved data. We cannot implement pre selected combo box without data.
When i use same combo box with all source in new record selection will work proper.
Find the image to get understand better.

[Author]

Posts