1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

  2. Anuncie Aqui ! Entre em contato fdantas@4each.com.br

how to supply data from Progress PAS server to Kendo UI for Angular 4 kendo-grid

Discussão em 'StackOverflow' iniciado por fdantas, Setembro 11, 2017.

  1. fdantas

    fdantas Administrator Moderador

    I have a service running on my PAS instance that I am trying to get data from for my kendo-grid. The service is working because I get a result when I type the URL's into the browser. Below is the schema.

    I have a "grid" component (basically empty) which I'm using to learn the kendo-grid. Also added in.

    How do I, using Kendo UI for Angular 4, get the JSDO set up and working to supply data to my kendo-grid? And be able to perform CRUD and Submit operations?

    Also included the app.module.ts if you need to see what's happening there.


    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { ReactiveFormsModule } from '@angular/forms';

    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { ButtonsModule } from '@progress/kendo-angular-buttons';
    import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
    import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
    import { DialogModule } from '@progress/kendo-angular-dialog';

    import { LayoutModule } from '@progress/kendo-angular-layout';

    import { RouterModule, Routes } from '@angular/router';

    import { GridModule } from '@progress/kendo-angular-grid';

    import { HttpModule } from '@angular/http';

    import { AppComponent } from './app.component';
    import { ButtonsComponent } from './buttons/buttons.component';
    import { LayoutComponent } from './layout/layout.component';
    import { PanelBarComponent } from './panel-bar/panel-bar.component';
    import { TabStripComponent } from './tab-strip/tab-strip.component';
    import { FormComponent } from './form/form.component';
    import { DialogueComponent } from './dialogue/dialogue.component';
    import { GridComponent } from './grid/grid.component';
    import { HomeComponent } from './home/home.component';

    /*-------------------------------------------------------------------------------------------*/

    const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'}
    ];

    /*-------------------------------------------------------------------------------------------*/

    @NgModule({
    declarations: [
    AppComponent,
    ButtonsComponent,
    LayoutComponent,
    PanelBarComponent,
    TabStripComponent,
    FormComponent,
    DialogueComponent,
    GridComponent,
    HomeComponent
    ],
    imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonsModule,
    LayoutModule,
    ReactiveFormsModule,
    DropDownsModule,
    DateInputsModule,
    DialogModule,
    GridModule,
    HttpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }


    <h1>Grids</h1>

    <kendo-grid >
    </kendo-grid>


    import { Component, OnInit } from '@angular/core';

    @Component({
    selector: 'grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.scss']
    })
    export class GridComponent implements OnInit {

    ngOnInit() {
    }

    }


    {
    "version": "1.4",
    "lastModified": "Wed Aug 23 08:45:26 CAT 2017",
    "services": [{
    "name": "DepartmentService",
    "address": "\/rest\/DepartmentService",
    "useRequest": true,
    "resources": [{
    "name": "Department",
    "path": "\/Department",
    "autoSave": false,
    "schema": {
    "type": "object",
    "additionalProperties": false,
    "properties": {"dsDepartment": {
    "type": "object",
    "additionalProperties": false,
    "properties": {"ttDepartment": {
    "type": "array",
    "items": {
    "additionalProperties": false,
    "properties": {
    "_id": {
    "type": "string",
    "semanticType": "Internal"
    },
    "_errorString": {
    "type": "string",
    "semanticType": "Internal"
    },
    "kde-dept": {
    "type": "string",
    "ablType": "CHARACTER",
    "default": "",
    "title": "kde-dept"
    },
    "nam-dept": {
    "type": "string",
    "ablType": "CHARACTER",
    "default": "",
    "title": "nam-dept"
    },
    "kde-mpy": {
    "type": "string",
    "ablType": "CHARACTER",
    "default": "",
    "title": "kde-mpy"
    },
    "kde-taal": {
    "type": "string",
    "ablType": "CHARACTER",
    "default": "",
    "title": "kde-taal"
    },
    "ind-bulkstoor": {
    "type": "boolean",
    "ablType": "LOGICAL",
    "default": false,
    "title": "ind-bulkstoor"
    }
    }
    }
    }}
    }}
    },
    "operations": [
    {
    "path": "",
    "useBeforeImage": true,
    "type": "update",
    "verb": "put",
    "params": [
    {
    "name": "dsDepartment",
    "type": "REQUEST_BODY"
    },
    {
    "name": "dsDepartment",
    "type": "RESPONSE_BODY"
    }
    ]
    },
    {
    "path": "?filter={filter}",
    "useBeforeImage": true,
    "type": "read",
    "verb": "get",
    "params": [
    {
    "name": "filter",
    "type": "QUERY"
    },
    {
    "name": "dsDepartment",
    "type": "RESPONSE_BODY"
    }
    ]
    },
    {
    "path": "",
    "useBeforeImage": true,
    "type": "delete",
    "verb": "delete",
    "params": [
    {
    "name": "dsDepartment",
    "type": "REQUEST_BODY"
    },
    {
    "name": "dsDepartment",
    "type": "RESPONSE_BODY"
    }
    ]
    },
    {
    "name": "SubmitDepartment",
    "path": "\/SubmitDepartment",
    "useBeforeImage": true,
    "type": "submit",
    "verb": "put",
    "params": [
    {
    "name": "dsDepartment",
    "type": "REQUEST_BODY"
    },
    {
    "name": "dsDepartment",
    "type": "RESPONSE_BODY"
    }
    ]
    },
    {
    "path": "",
    "useBeforeImage": true,
    "type": "create",
    "verb": "post",
    "params": [
    {
    "name": "dsDepartment",
    "type": "REQUEST_BODY"
    },
    {
    "name": "dsDepartment",
    "type": "RESPONSE_BODY"
    }
    ]
    }
    ]
    }]
    }]
    }

    Continue reading...

Compartilhe esta Página