Log in to start a topic

FlexSheet - Styling of Body, Grid, Cells and remove default headers

Posted by: ashrivastav1 on 14 September 2017, 11:57 am EST

  • ashrivastav1

    • Post Options:
    • Link
      Copy

    Posted 14 September 2017, 11:57 am EST

    Hi,

    I am facing issues in styling.

    Can you please suggest on this Styling of Body, Grid, Cells and remove default headers in FlexSheet. Please find the attached screen shot for the reference.

    Thanks,

    Abhishek

  • ashrivastav1

    Posted 14 September 2017, 11:57 am EST

    Hi Manish,

    Sorry, but I am using the Flexsheet with wijmo 5 and angular 2. and the issues/requirement is

    1. Need to remove default headers of flexsheet (‘A’,‘B’,‘C’ … from column header and ‘1’,‘2’,‘3’… from row header)
    2. Apply the filter on the first row (IC_GLOBAL …)as you can see in attached screen shot.
    3. Set the sheet width on full width. Some time there will be 3 columns and some time there may be more than that. So need to fit this in full width automatically.

    Please help me on this. I have seen many online examples but unable to get solution.

    Thanks,

    Abhishek

  • manish-gupta1

    Posted 14 September 2017, 11:57 am EST

    Hi Abhishek,

    Default headers can be removed by setting headersVisibility property to None and columns can be shown in Full FlexSheet by setting columns width to *.

    For applying filter there is no way for accomplishing this. We have escalated this issue to our development team for further investigation. We will let you know as soon as we get any update on this.

    For your reference, please see the attached sample that implements the same.

    Thanks,

    Manish Kumar Gupta

    2017/03/FlexSheet-1.zip

  • ashrivastav1

    Posted 14 September 2017, 11:57 am EST

    Sorry Manish, I am following your suggestion by * is not working for the width. Any suggestion.

    My script is like this …

    constructor(private http: Http) {

    this.http.get(this.thematicAreasUrl)

    .subscribe(response =>

    {

    this.data = new wjCore.CollectionView(response.json().data);

    this.data.trackChanges = true;

    }

    );

    }

    workspaceAreaInit(workspaceArea: wjcGridSheet.FlexSheet, e: wjCore.EventArgs) {

                for (let i = 0; i < workspaceArea.columns.length; i++) {
                workspaceArea.columns[i].width = "*";
            }           
        
    }

  • ashrivastav1

    Posted 14 September 2017, 11:57 am EST

    Hi,

    Is there any update on this.

    Thanks,

    Abhishek

  • manish-gupta1

    Posted 14 September 2017, 11:57 am EST

    Hi Abhishek,

    As per our understanding, you would like to remove FlexSheet default column headers and change color for FlexSheet background.

    For removing, default ColumnHeaders you need to set FlexSheet headersVisibility to Row.

    FlexSheet background can be changed by setting background-color in Style tag.

    ItemFormatter can be used for changing styling for FlexSheet’s cells/headers.

    For reference, please see the attached sample that implements the same.

    If issue persists, please elaborate your requirement so that we can assist you accordingly.

    Thanks,

    Manish Kumar Gupta

    2017/03/FlexSheet.zip

  • ashrivastav1

    Posted 14 September 2017, 11:57 am EST

    It’s working manish. Thanks

  • ashrivastav1

    Posted 14 September 2017, 11:57 am EST

    Hi Manish,

    In this, how can we rename the column headers in sheet that I am getting using my data.

    Like, I am getting “IC_ID” but in the sheet I want to show “MY ID”.

    Thanks,

    Abhishek

  • ashrivastav1

    Posted 14 September 2017, 11:57 am EST

    Hi Manish,

    Is there any update for me.

    Thanks,

    Abhishek

  • manish-gupta1

    Posted 14 September 2017, 11:57 am EST

    Hi Abhishek,

    You need to set header property for changing column header. Please use the following code snippet for the same:

    init(s: wjSheet.FlexSheet, e: wjCore.EventArgs) {
        for (let j = 0; j < s.columns.length; j++) {
            s.columns[j].width = "*";
            if (s.columns[j].header == 'IC_ID') {
                s.columns[j].header = 'MY ID';
            }
        }       
    }

    Thanks,

    Manish Kumar Gupta

  • ashrivastav1

    Posted 14 September 2017, 11:57 am EST

    Thanks Manish. It’working fine. Please let me know if there is a proper document of all the FlexSheet functions and properties.

    I have this http://wijmo.com/5/docs/topic/wijmo.grid.sheet.FlexSheet.Class.html but it’s not much clear for me.

  • manish-gupta1

    Posted 14 September 2017, 11:58 am EST

    Hi Abhishek,

    The link, you have, contains proper documentation for FlexSheet.

    Since you are using Angular2, please refer to the following documentation link for Angular 2 control:

    http://wijmo.com/5/docs/topic/wijmo-wijmo.angular2.grid.sheet.Module.html

    In the documentation, each property, method and event describes its inheritance and required type for setting property and return type for methods.

    Thanks,

    Manish Kumar Gupta

  • kanika-gupta

    Posted 14 September 2017, 11:58 am EST

    Hi Manish,

    I was going through this forum as I need something similar. I also need to disable the default headers and add the filter to the rows. I have been able to disable the headers using HeadersVisibility.None. But I am not able to add the filter.

    Can you please help me with this?

    Thanks,

    Kanika

  • manish-gupta1

    Posted 14 September 2017, 11:58 am EST

    Hi Kanika,

    You need to add the filter using itemFormatter by adding filter class within the span. Please refer to the attached sample that implements the same.

    Thanks,

    Manish Kumar Gupta

    2017/07/FlexSheet_headerFilter.zip

  • ashrivastav1

    Posted 14 September 2017, 11:58 am EST

    Hi Kanika and Manish,

    I also tried the solution and it’s working fine for me(with some modification). I made some changes in the script where we are binding the filter icon with header html, like below

    cell.innerHTML = ‘<div>’+flex.columns[c].header+‘<div style=“width:auto;float:right;”><span class=“wj-glyph-filter”></span></div></div>’;

    cell.firstChild.onclick = () => {

    flex.showColumnFilter();

    }

    Thanks,

    Abhishek

  • kanika-gupta

    Posted 14 September 2017, 11:58 am EST

    Hi Manish and Abhishek,

    Thank you. The above solution worked. Manish just one more thing in this. Is there a way to have only sorting enabled (not filtering) on columns when headersVisibility is set to ‘None’ for flexsheet?

    Thanks,

    Kanika

  • manish-gupta1

    Posted 14 September 2017, 11:58 am EST

    Hello Kanika,

    Could you please let us know if you would like to perform sorting operation on header click or just want to show sorting button in filter dialog?

    Thanks,

    Manish Kumar Gupta

  • kanika-gupta

    Posted 14 September 2017, 11:58 am EST

    Hi Manish,

    I would like to perform sorting on click of header. If possible, the sorting should be refelected by up and down arrows in the column header only so that when I click on the header, the column toggles between ascending and descending sort.

    Please let me know if this is possible and if yes, then how to achieve this.

    Thanks,

    Kanika

  • manish-gupta1

    Posted 14 September 2017, 11:58 am EST

    Hi Kanika,

    For this, you need to handle click event for FlexSheet and need to apply sorting in FlexSheet using sortManager.

    For your reference, please see the attached sample that implements the same.

    Thanks,

    Manish Kumar Gupta

    2017/07/FlexSheet_headerClick_sort_dynamicHeight_customContextMenu_columnDefinition.zip

  • ashrivastav1

    Posted 14 September 2017, 11:58 am EST

    Hi Manish,

    I applied the filter option on the header as per your suggestion and it’s working fine.

    Can you please suggest what should I have to do to highlight the filter icon for the column where filter has been applied.

    With default filter functionality it’s working fine but now I want the same behavior with header.

    Thanks,

    Abhishek

  • manish-gupta1

    Posted 14 September 2017, 11:58 am EST

    Hi Abhishek,

    For this, we need to add wj-filter-off class when adding Filter using itemFormatter and toggle if the filter is applied.

    Please refer to the attached sample that implements the same.

    Thanks,

    Manish Kumar Gupta

    2017/08/FlexSheet_headerFilter_toggle.zip

  • sasmita.swain2014

    Posted 13 December 2017, 7:35 am EST

    Hi Manish,

    I have applied the above thing to have a header filter but there is one issue. I have a flexsheet with some 20 columns , with a horizontal scrollbar.

    If i scroll forward the filter editor also moving forward to some extra pixels and the filter box is not coming below the column from where i have opened.

    can you let me know what is going wrong or give me an example with solution?

    Thanks,

    Sasmita

  • sasmita.swain2014

    Posted 14 December 2017, 3:12 am EST

    Hi Manish,

    I have modified and attached your example recreating the above issue.

    Please look on to the issue.

    Thanks,

    SasmitaFlexSheet_headerFilter_toggle (2).zip

Need extra support?

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

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

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