Column Headers Editable

Posted by: deepak.dubey on 17 February 2021, 12:11 am EST

  • Posted 17 February 2021, 12:11 am EST

    Hi Sharad,

    Now I am using vue js and have grid.
    In this grid we add four row on top using below code-
    // create extra header row
    var extraRow2 = new wjGrid.Row();
    extraRow2.allowMerging = true;
    //
    // add extra header row to the grid
    var panel2 = this.theGrid.columnHeaders;
    panel2.rows.splice(0, 0, extraRow2);
    panel2.setCellData(0, 0, "Period Type");
    for (let colIndex = 1; colIndex <= 4; colIndex++) {
    panel2.setCellData(0, 4, "Annual");
    }

    // create extra header row
    var extraRow3 = new wjGrid.Row();
    extraRow3.allowMerging = true;
    //
    // add extra header row to the grid
    var panel3 = this.theGrid.columnHeaders;
    panel3.rows.splice(0, 0, extraRow3);
    panel3.setCellData(0, 0, "Fiscal Year End");
    for (let colIndex = 1; colIndex <= 4; colIndex++) {
    panel3.setCellData(0, 4, "2019.12.31");
    }
    which is working fine. I want to know the way where we can make this user input like date picker or drop down for user perspective.
    Please help me on that.

    Deepak Dubey
  • Replied 17 February 2021, 12:15 am EST

    we want Period end date as date input and Period type as dropdown.

    or any other way to create grid structure like below image.
  • Replied 17 February 2021, 12:17 am EST

    Here is the sample file.
  • Replied 17 February 2021, 12:18 am EST

    grid.zip
  • Marked as Answer

    Replied 17 February 2021, 11:23 pm EST

    Hi Deepak,

    You may handle the formatItem event to add the required controls in the header. Please refer to the following sample which demonstrates the same and let us know if you face any issue:
    https://codesandbox.io/s/wijmo-vue-forked-w8uo0?file=/src/components/HelloWorld.vue

    Regards
    Sharad
  • Replied 22 February 2021, 1:56 am EST

    Thanks Sharad!
    It works.

    Deepak Dubey
Need extra support?

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

Learn More

Forum Channels