Log in to start a topic

Documentation

Posted by: frettarenan on 14 September 2017, 3:16 am EST

  • frettarenan

    Posted 14 September 2017, 3:16 am EST

    I am having difficulty with wijmo documentation with Angular 2.

    Most of the examples I need to understand are in other tools and some do not have the source code.

    Initially I need to make this feature always editable ON with Angular 2+:

    http://demos.wijmo.com/5/angular2/explorer/explorer/#/grid/editing

    I have a grid:

    <wj-flex-grid [itemsSource]=“data”>



    <wj-flex-grid-column [header]=“‘Número’” [binding]=“‘numeroProduto’” [width]=“120” [isReadOnly]=“true”>

    <wj-flex-grid-column [header]=“‘Produto’” [binding]=“‘nomeProduto’” [width]=“‘‘" [isReadOnly]=“true”>

    <wj-flex-grid-column [header]=“‘Almoxarifado’” [binding]=“‘nomeAlmoxarifado’” [width]="’    ’” [isReadOnly]=“true”>

    <wj-flex-grid-column [header]=“‘Solicitar’” [binding]=“‘quantidadePedido’”>

    and I need to always enable editing for the editable column.

    Please, send me some links with useful codes to angular 2.

  • frettarenan

    Posted 14 September 2017, 3:35 am EST

    I would like to see the typescript and HTML source-code of the page “Wijmo 5 Explorer for Angular 2”: http://demos.wijmo.com/5/angular2/explorer/explorer/#/grid/editing

    Can someone send me?

  • manish.gupta

    Posted 14 September 2017, 9:44 pm EST

    Hi,

    Please find the attached sample for the same. And let me know you have further queries.

    Thanks,

    Manish Kumar Gupta

    GridEditing.zipExplorer.zip

  • frettarenan

    Posted 15 September 2017, 8:17 am EST

    Thank you so much,

    I am already able to code some logic with the grid component.

    But, I did not get an example of validators for angular 2+.

    I saw that you have an example of Angular JS 1 validators in this link: http://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Search

    You can send me this example for Angular 2?

  • manish.gupta

    Posted 18 September 2017, 5:14 pm EST

    Hi,

    The required sample has been migrated to the Angular 2+. You can get the sample code from the latest nightly build inside Samples folder. You can get more Angular2 samples in this build.

    You can download it from the following link:

    http://prerelease.componentone.com/wijmo5/Nightly_C1Wijmo_5.20172.354_2017.09.18.zip

    Thanks,

    Manish Kumar Gupta

  • frettarenan

    Posted 18 September 2017, 10:42 pm EST

    Thank you again. You are too kind.

  • frettarenan

    Posted 18 September 2017, 10:55 pm EST

    I’m testing wijmo components and checking for accessibility.

    I got a lot of attention from this page: https://www.grapecity.com/en/blogs/flexgrid-accessibility

    I have other doubts:

    1) Which shortcut key expands the tree when the cell is selected? (attached image: )

    2) What would be the recommendation to use buttons on the grid? In my example, I realized that keyboard navigation was impaired. The TAB key pushes button by button and the direction keys do not activate the buttons. This for me was bad. Can you help me with some accessibility suggestions?

    Sorry for my English, I’m Brazilian and I do not write well in your language.

  • frettarenan

    Posted 18 September 2017, 11:06 pm EST

    Doubt on grouping:

    3) I would like to group by product code but show product name. In the adobe flex tool we call this ‘labelfunction’ feature. It is possible?

    I used the following code in my example, however the grid is grouping by product description.

    constructor() {

    this.collectionView = new wjcCore.CollectionView(new Array(), { getError: this.getError });

    var pgd = new wjcCore.PropertyGroupDescription(‘Produto’,

    function (item: RetiradaPedidoDto, propName: string) {

    return item.descricaoProduto;

    });

    this.collectionView.groupDescriptions.push(pgd);

    }

  • manish.gupta

    Posted 19 September 2017, 9:04 pm EST

    Hi,

    Thank you :slight_smile: for the complement.

    The arrow keys can be used to expand and collapse the Groups. Left arrow key is used for collapsing and right for Expanding.

    The Button can be activated using Enter key once it gets focused. We have forwarded this to the concerned team for further investigation with internal tracking id #286909. We will let you know as soon as we get any update on this.

    Your last requirement is that Grouping should be done based on product id and GroupHeader name should be Product Name?

    Please confirm your requirement.

    Thanks,

    Manish Kumar Gupta

  • frettarenan

    Posted 19 September 2017, 11:47 pm EST

    Hi,

    Your question:

    “Your last requirement is that Grouping should be done based on product id and GroupHeader name should be Product Name? Please confirm your requirement.”

    My answer:

    Yes, explaining better, for example:

    “Product Code”: 1 “Product Name”: Pen - “Product lot”: 48784

    “Product Code”: 1 “Product Name”: Pen - “Product lot”: no lot

    “Product Code”: 2 “Product Name”: Pen - “Product lot”: 9845

    “Product Code”: 2 “Product Name”: Pen - “Product lot”: no lot

    “Product Code”: 3 “Product Name”: Pencil- “Product lot”: no lot

    “Product Code”: 4 “Product Name”: Eraser- “Product lot”: no lot

    Note: Product Code 1 and 2 are duplicated in the database. Because: the customer registered wrong.

    However, the report will display the sum of the totalizers correctly, as distinct products.

    For example:

    • Product: 1 - Pen (2 itens) [Note: use groupby “product code” and display: “in this case: code + ‘-’ + product name”]

      lot: 48784

      lot: no lot

    • Product: 2 - Pen (2 itens)

      lot: 9845

      lot: no lot

    Note: if I group by product name, the system would display wrong totals for my client. Because the products’ names would be the same in the database.

  • frettarenan

    Posted 20 September 2017, 12:07 am EST

    Hi,



    thanks again for the support.



    I tested the shortcut keys to expand and retract the tree and it worked correctly.

    The documentation could be more precise, for example: on the page: https://www.grapecity.com/en/blogs/flexgrid-accessibility





    where it reads:

    Left/Right - Select the cell to the left/right of the selection



    could be explaining by groups or something of the type, for example:



    Left/Right

    simple grid: select the cell to the left/right of the selection



    tree node group: The arrow keys can be used to expand and collapse the Groups. Left arrow key is used for collapsing and right for Expanding.



    The arrow keys can be used to expand and collapse the Groups. Left arrow key is used for collapsing and right for Expanding.



    ---------------------------------------------------------------------



    I did not understand how to check the status of the internal tracking id #286909.



    ---------------------------------------------------------------------



    About: “The Button can be activated using Enter key once it gets focused.”



    I understand that the grid cell, when receiving focus, should pass the focus to the button. Thus the system user will be able to press ENTER to activate the button.



    However, when the button is in focus, the arrow keys no longer respect grid shortcuts. For me this is somewhat embarrassing for accessibility and somewhat cumbersome for the programmer.

  • frettarenan

    Posted 20 September 2017, 12:12 am EST

    note the above post: the post edit feature is not working properly, it opens in a text editor with HTML tags. And the result was as text.

    Hi,

    thanks again for the support.

    I tested the shortcut keys to expand and retract the tree and it worked correctly.

    The documentation could be more precise, for example: on the page: https://www.grapecity.com/en/blogs/flexgrid-accessibility

    where it reads:

    Left/Right - Select the cell to the left/right of the selection

    could be explaining by groups or something of the type, for example:

    Left/Right:

    simple grid: select the cell to the left/right of the selection

    tree node group: The arrow keys can be used to expand and collapse the Groups. Left arrow key is used for collapsing and right for Expanding. The arrow keys can be used to expand and collapse the Groups. Left arrow key is used for collapsing and right for Expanding.

    I did not understand how to check the status of the internal tracking id #286909.

    About: “The Button can be activated using Enter key once it gets focused.”

    I understand that the grid cell, when receiving focus, should pass the focus to the button. Thus the system user will be able to press ENTER to activate the button.

    However, when the button is in focus, the arrow keys no longer respect grid shortcuts. For me this is somewhat embarrassing for accessibility and somewhat cumbersome for the programmer.

  • manish.gupta

    Posted 22 September 2017, 1:28 am EST

    Hi,

    We are investigating. We will update you soon.

    Thanks,

    Manish Kumar Gupta

  • manish.gupta

    Posted 24 September 2017, 4:30 pm EST

    Hi,

    You need to use itemFormatter for customizing your groupHeader. Please refer to the attached sample for the same.

    We have requested to improvement documentation with internal tracking id: 288712.

    This id is used by the team for getting status for the escalated case in future.

    By default, FlexGrid can be navigated using Enter and Arrow Keys. When a cell contains Button, tab key is used to switch between them. Tab to next and Shift+Tab to the previous button.

    Hope it clears!

    Thanks,

    Manish Kumar Gupta

  • manish.gupta

    Posted 24 September 2017, 4:38 pm EST

    Hi,

    Sorry for the attachment. Please find here.

    Thanks,

    Manish Kumar Gupta

    FlexGrid_groupDescriptionwithdeifferent.zip

  • frettarenan

    Posted 25 September 2017, 1:14 am EST

    Thanks, it’s works perfect!

  • manish.gupta

    Posted 4 January 2018, 11:27 pm EST

    HI,

    Issue #286909

    If you set keyActionTab to “Cycle”, that means you want the tab key to cycle through the cells. If you don’t do that, then you can tab through button elements in the cells.

    These two options are exclusive. Either you want to tab through cells or through elements, but not both.

    If want you want to do is cycle through cells and if the cell contains a button, handle the keydown event and call the button’s click method as needed.

    For example:

    http://jsfiddle.net/Wijmo5/nz0qb8xg/

    ~Manish

  • manish.gupta

    Posted 4 January 2018, 11:29 pm EST

    Hi,

    Issue #288712

    Documentation has been improved.

    Please go through documentation:

    http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html

    ~Manish

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.