Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    kylemwhite typescript within ng cli application

    I created an application with

    Code:
    ng new app
    Then I integrated part of KylemWhite's demo into the new application. I only took the grid and put it into my application.

    PROBLEM: the filter component of the grid is not properly rendered. The bottom parts of the filter elements are hidden under the header. Please see picture attachment.

    QUESTION: how do I properly write SmartClient/KylemWhite typescript applications within the Angular CLI framework?

    Here's the setup:

    Code:
    mikes-laptop:app mike$ ng --version
Angular CLI: 1.6.2
Node: 9.2.1
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0
    Here's my index.html:

    Code:
    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Infra</title>
<base href="/">
<SCRIPT>var isomorphicDir = "assets/isomorphic/"; </SCRIPT>
<SCRIPT SRC=assets/isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=assets/isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=assets/isomorphic/system/modules/ISC_Containers.js></SCRIPT>
<SCRIPT SRC=assets/isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=assets/isomorphic/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=assets/isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=assets/isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
</head>
<body>
<app-root></app-root>
</body>
</html>
    Here's the code for app.module.ts:

    Code:
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
    And the app.component.ts:

    Code:
    import { Component, OnInit } from '@angular/core';
/// <reference path="../scripts/typings/isc/isc.index.d.ts" />
@Component({
selector: 'app-root',
template: `<div id="iso" style="width: 100%; height: 50%;"></div>`
})
export class AppComponent implements OnInit {
title = 'app';
ngOnInit() {
let countryDS = (isc.DataSource as any).create({
ID: "countryDS"
, dataFormat: "xml"
, recordXPath: "//country"
, fields: [
{ name: "countryCode", title: "Code", primaryKey: true, canEdit: "false" }
, { name: "countryName", title: "Country" }
, { name: "capital", title: "Capital" }
, { name: "population" }
, { name: "independence" }
]
, operationBindings: [
{
operationType: "fetch",
dataURL: "[ISOMORPHIC]/system/reference/inlineExamples/dataIntegration/xml/responses/country_fetch.xml"
},
{
operationType: "add",
dataURL: "[ISOMORPHIC]/system/reference/inlineExamples/dataIntegration/xml/responses/country_add.xml"
},
{
operationType: "update",
dataURL: "[ISOMORPHIC]/system/reference/inlineExamples/dataIntegration/xml/responses/country_update.xml"
},
{
operationType: "remove",
dataURL: "[ISOMORPHIC]/system/reference/inlineExamples/dataIntegration/xml/responses/country_remove.xml"
}
]
});
let viewState = "({ field: [{ name: 'countryCode' }, { name: 'countryName' }, { name: 'capital' }, { name: 'population' }, { name: 'independence', align:'right', title:'ind' }] })";
let grid = isc.ListGrid.create({
ID: "countryList"
, autoDraw: false
, width: "100%"
, height: "100%"
, viewState: viewState
, alternateRecordStyles: true
, dataSource: countryDS
, autoFetchData: true
, showFilterEditor: true
}) as Isc.ListGrid;
let iso = document.getElementById('iso');
let layout = isc.VLayout.create({
htmlElement: iso as HTMLElement
, height: "100%"
, width: "100%"
, members: [grid]
, padding: 0
, margin: 0
});
}
}
    Attached Files
    Tags: None
    #2
    You haven't mentioned even the major version of SmartClient you are using. Try with the latest and report your full version next time (this is always required).

    If the problem persists, just use the built-in browser tools in any browser to see if there any non-SmartClient CSS styles that are applying the HTML elements that make up the header. If there are such poorly-written styles applying to SmartClient elements instead of Angular elements, those styles would interfere with the rendering of any other framework, and you'll need to figure out how to remove them or turn them off.

    Comment

      #3
      Sorry. I was using kylemwhite's example, so it was 11.1p. I downloaded the latest:

      SmartClient_v111p_2018-03-06_Enterprise

      I checked that the only css file that I'm loading is:

      http://localhost:4200/assets/isomorp....1p_2018-03-06

      From my index.html and my app.component.ts, I'm not using any other style sheet nor am I loading any other JS scripts.

      I still get the same results.

      Comment

        #4
        You may not have manually added CSS styles, but Angular may be injecting them, therefore use the approach we indicated above (that's why we specifically pointed out that approach).

        Comment

        Previous template Next
        Working...
        X