Log in to start a topic

Wijmo Flexsheet Column Configuration Issue

Posted by: abhijit.pingale on 11 March 2021, 12:39 am EST

  • abhijit.pingale

    • Post Options:
    • Link
      Copy

    Posted 11 March 2021, 12:39 am EST

    Hi team I am using Flexsheet Component with angular(Wijmo Version 5.20203.766).

    In this in the itemSource I am passing only rows.

    For columns I am passing columns configuration by pushing 

    var col:any = new wjcGrid.Column();
    (with binding,header, format properties) to the ```

    flex.columns

    But column names are not coming in the column header row instead of that it is appearing in the default header where filter and excel names comes (A,B,C,D...).
Also In the giving example [b]Total baseline price[/b] is my computation column (Volumn * Baseline price per unit). It is giving error [b]#DIV/0![/b].

I am sharing code.zip and screenshot.
[zip filename="wijmo-column-configuration-issue.zip"]https://gccontent.blob.core.windows.net/forum-uploads/file-b571424b-6163-48aa-83f8-6395c2de3988.zip[/zip].
[img]https://gccontent.blob.core.windows.net/forum-uploads/file-cc86ad6d-c8fc-4a83-bdb9-c6ce38524615.png[/img]

  • abhijit.pingale

    Posted 14 March 2021, 4:18 pm EST

    Any Update On this?

  • sharad.tomer

    Posted 14 March 2021, 4:39 pm EST

    Hi,

    I’m inspecting the shared sample files. Will provide you an update soon.

    Regards

    Sharad

  • sharad.tomer

    Posted 14 March 2021, 6:53 pm EST

    I tried recreating the issue you are facing using the sample files provided but was unable to do so. I was unable to replicate the issue that header names are displayed instead of the flexsheet’s default A. B, C column names but was able to replicate the part where header row does not display the header name. This could be easily solved by adding the bound grid by passing a flexgrid’s instance and is the recommended approach where we need to apply different settings related to the grid such as customizing columns, header, width, format etc. You may refer to the following code snippet and the attached sample which demonstrates the same:

    let hostElem = document.createElement('div'),            
            grid = new wjGrid.FlexGrid(hostElem, {
                autoGenerateColumns: false,
                itemsSource: this.data,
                columns: [
                    { binding: 'id', header: 'ID (Custom)' },
                    { binding: 'description', header: 'Description [Custom]',width:'*' },
                    { binding: 'country',width:'*' },
                    { binding: 'sales' },
                    { binding: 'downloads' }
                ]
            });
        s.sheets.push(new wjSheet.Sheet(s, grid, 'Random Data'));

    Regarding the issue related to the formula, the observed error is displayed when we try to divide numbers by 0. Please make sure that it is not the case in your sample. If the issue persists, please share a working sample that replicates the issue so that we could further investigate it.

  • sharad.tomer

    Posted 14 March 2021, 6:55 pm EST

    Attachment:

    FlexGrid.zip

  • abhijit.pingale

    Posted 14 March 2021, 9:50 pm EST

    Hi Sharad,

    Thanks for reply,

    The solution you shared if I want to add some custom properties as below,

    columns: [
                    { binding: 'id', header: 'ID (Custom)', columnModel : colModel, formula : "(C,*E,)" },
                    { binding: 'description', header: 'Description [Custom]',width:'*', columnModel : colModel},
                    { binding: 'country',width:'*' columnModel : colModel},
                    { binding: 'sales' },
                    { binding: 'downloads' }
                ]

    How we can we add ?

    I tried but it is giving exception

    ERROR Error: ** Assertion failed in Wijmo: Unknown property

    Those model and property are required to run some business logic.

  • sharad.tomer

    Posted 15 March 2021, 8:42 pm EST

    You may set custom properties of columns like the following code snippet:

    grid.columns.forEach((c: any, i) => {

    c[‘columnModel’] = “colModel”

    c[‘formula’] = “(C,*E,)”

    })

    You may also refer to the attached sample demonstrating the same.

    FlexGrid.zip

  • abhijit.pingale

    Posted 23 March 2021, 5:05 am EST

    Hi sharad,

    Thanks for solution provided, it worked for me.

    I have another queries

    let hostElem = document.createElement('div'),
                grid = new wjcGrid.FlexGrid(hostElem, {
                    autoGenerateColumns: false,
                    itemsSource: this.data,
                    columns: this.addColumns(this.config.data.columns, flex)
                });

    Instead of using native javascript to add host element to grid is there anyway to provide host element using

    @ViewChild('flexContainer', { static: false }) flexContainer: ElementRef;
```.

2. Also how can we remove the [b]context menu[/b] and [b]formula list[/b] from [b]DOM[/b]

  • sharad.tomer

    Posted 24 March 2021, 4:28 pm EST

    Hi,

    1). Since we are not actually going to attach the flexgrid into the DOM, using document.createElement is a better option to pass hostElement. Could you please let us know if there is any specific reason that you need to pass the host using @viewChild ?

    2). If you wish to disable the formula’s in FlexSheet you may set the enableFormulas property of FlexSheet to false. Otherwise, if you just need to hide the formulas dropdown list, you may remove the element from DOM using the following code:

        var elem = document.querySelector('.wj-flexsheet-formula-list');
    elem.parentNode.removeChild(elem)

    You may also refer to the attached sample demonstrating the same.

    Regards

    FlexGrid.zip

  • abhijit.pingale

    Posted 14 May 2021, 8:18 pm EST - Updated 3 October 2022, 3:15 am EST

    Hi Sharad,

    Thanks for previous solution it worked for me.

    I have another query.

    When I am double clicking on cell the input element is not getting append to the cell html hence cursor is not shown. But as soon as I start typing input element appears and cursor is shown.

    But in demo examples default behavior is as I required (i.e. on double click cursor and input element is appended).

    What might be the cause. Please help me out in this.

    I am sharing the screen shot.

    1339×478 90.5 KB

  • sharad.tomer

    Posted 16 May 2021, 9:23 pm EST

    Hi,

    We are sorry but we are unable to replicate the issue at our end. Please update the following sample to demonstrate the issue so that we could further investigate the issue and assist you accordingly:

    https://codesandbox.io/s/wijmo-angular-forked-uc7z6?file=/src/app/app.component.html

    Thank you

  • abhijit.pingale

    Posted 22 September 2021, 11:15 pm EST

    Hi team,

    I facing problem while solving WCAG issues. If I press tab from any element to grid it directly sending focus to first cell. But as filter button on header row is also interactive, tab should go to filter button first.

    Can you please help me out in this?

    Thanks,

    Abhijit

  • sonu.pandey

    Posted 24 September 2021, 1:43 am EST

    Hello,

    We are working on the issue and will update you on this shortly.

    Regards

  • sonu.pandey

    Posted 26 September 2021, 8:56 pm EST

    Hello,

    We apologize, but in FlexGrid movement between cells using tab key is by design won’t allow it to move between the columnHeaders cells or the FlexGridFilter button.

    Sorry for the incontinence.

    Regards

  • abhijit.pingale

    Posted 4 October 2021, 8:32 pm EST - Updated 3 October 2022, 3:15 am EST

    Hi Sonu,

    Thanks for update, I have another query,

    In drop down type column button and selected text is inside the same div in cell. The text and button is overlapped. How can i apply text overflow?

    I am sharing the screen shot.

    Thanks,

    Abhijit

    1354×717 49.3 KB

  • sonu.pandey

    Posted 5 October 2021, 7:11 pm EST - Updated 3 October 2022, 3:15 am EST

    Hello,

    FlexGrid by default has “text-overflow: ellipsis” CSS applied to the cells to show the overflowed text as ellipses. The issue might be caused because of some other CSS applied, please refer to the following CSS selectors and let us know if that’s works for you:

    
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    I have attached a screenshot of the CSS properties applied to the wijmo FlexGrid’s cell for handling text overlap. Also, if you have set the fixed width to the inner input element or button, then try setting “white-space:normal”. Let us know if that’s works for you.

    Regards

  • abhijit.pingale

    Posted 5 October 2021, 8:41 pm EST - Updated 3 October 2022, 3:15 am EST

    Hi Sonu,

    Again thanks for immediate reply, I am sharing the screen shot.

    The cell text and dropdown button are at same level of .wj-cell Div.

    hence that css is not working for text and button overlapping. I checked CSS you shared is already there.

    How can I overcome this situation?

    1920×1080 399 KB

  • sonu.pandey

    Posted 6 October 2021, 5:45 pm EST

    Hello,

    Sorry, but still we are unable to replicate the issue at our end. Please refer to the sample link below and let us know if you are facing the issue with the shared sample too? If you are facing this issue only in your application but not in the shared sample then it is possible that the issue is arising due to some code specific to your application. Since we are unable to replicate the issue, I would request you to share a sample that demonstrates the issue so that we could further investigate the root cause of the issue and assist you accordingly.

    sample link:https://stackblitz.com/edit/js-5tua7x?file=index.js

    Regards

  • abhijit.pingale

    Posted 12 November 2021, 12:03 am EST

    https://www.grapecity.com/forums/wijmo/wijmo-flexsheet-column-con#hi-teami-facing-problem-wh

    Hi team,

    Can you please provide alternative as for WCAG support it is needed. Also when filter editor is opened the first focus should be Ascending button but by default the first focus is in search text field. Can you please help me out in these issues?

    Thanks,

    Abhijit

  • sonu.pandey

    Posted 14 November 2021, 10:04 pm EST

    Hello,

    We apologize, but due to the design limitations, the tab movement between the columnHeaders cells or the FlexGridFilter button wouldn’t be possible as per your requirement. Sorry for the inconvenience.

    To set the focus on the ascending button after the filter dropDown opens, you may use the filterChanging event of FlexGridFilter and set the focus to the button instead of search input. Please refer to the code snippet below:

    
  filter.filterChanging.addHandler((s, e) => {
    setTimeout(() => {
      document.querySelector('[wj-part="btn-asc"]').focus();
    });
  });

    Regards

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.