Column header template

Posted by: jkainth on 8 May 2018, 12:59 am EST

  • Posted 8 May 2018, 12:59 am EST

    I am trying to get the column header to look like the attachment - essentially the caption and a clickable icon/button to the right of it.

    The button has icons in it which is driven off state of the current sort + filter applied to column.

    I tried used the "HeaderRow" for each column; it got as far as the the button, but no reference to show the caption or how to somehow get a reference to the column definition to evaluate some property off it

    Now sure how to go about it.

    A sample would be great.

  • Replied 8 May 2018, 8:00 am EST

    Nevermind, i think i have it figured out.

    You can use HeaderRow and showColHeader as false.
    HeaderRow take a renderer which can be a function (an obscure reference in the documentation - but no other information to what the function ought to do, params coming in etc; Spread.Views docs need a good overhaul. Lots of information is missing)

    Anyways, with above renderer + some custom properties in the colums definitions + some click handler magic, all tied up in a bow.

  • Replied 8 May 2018, 11:00 pm EST


    This is correct, you can customize the header row using the renderer property as shown here in the example as well:

    Deepak Sharma
  • Replied 14 May 2018, 3:24 am EST

    So one problem with above approach.

    Since the only way to customize a column header is to use the "headerRow" and then hiding the real columnHeader using showColHeader property.

    With the above, we loose both column reordering and resizing.
    You could argue that column reordering is hard since custom templates might have click objects or custom handlers etc etc

    BUT we need resizing to be allowed via the borders on headerRow.

    Any workaround?
  • Replied 14 May 2018, 11:29 pm EST


    You can still have the ColumnHeader while using header row renderer. The resizing of Columns and rows only happens with the ColumnHeader or RowHeader.

    Deepak Sharma
  • Replied 16 May 2018, 1:03 am EST

    If the only way to customize the columnheader is by using the headerRow - then i'd assume you'd want it to behave similar.
    The intention is to customize the header template - so having them both visible is moot.

    Any plans of allowing resizing off the headerRow too?
    Any plans of allowing columnheader templates/renderers?
  • Replied 16 May 2018, 10:36 pm EST

    I have submitted a feature request for allowing column resizing with HeaderRow. The request id for this feature is 258394. It may get added in our future version of Spread.Views.

    Deepak Sharma
  • Replied 17 May 2018, 12:22 am EST

  • Replied 17 May 2018, 8:13 pm EST


    You can use an alternate way to customize Spread.Views column header with 'colHeaderPresenter'. I have created a sample application to demonstrate the use of colHeaderPresenter, please refer to the attachment.

    In case you have further questions please feel free to get back to me.

  • Replied 18 May 2018, 1:11 am EST

    That doesn't help in my case.

    The doT template renderer only gets passed in with the captions for the "it" reference and the colHeaderPresenter string.

    if you see the image above, to be able to draw different icons based on some column definition, i need the doT renderer to be passed in at the very least the full column definition. So i can create conditional doT templates based on more than just caption.

    OR just like the rowHeader, if the colHeaderPresenter also accepted a function which gets passed in the (dataManager, container) we can find the column definition in question.

    with the above suggestion of colHeaderPresenter, instead of headerRow.
    - Any plans of allowing the colHeaderPresenter to accept a function instead of string?
    - Any plans of extending the colHeaderPresenter code to pass the doT renderer the full column definition instead of just the captions? (so instead of doing {{=it.firtName}} we could do {{=it.firstName.caption}}, in which case i could do {{=it.firstName.sortFilterOptions.isSortEnabled }} etc)
  • Replied 20 May 2018, 10:04 pm EST


    This issue is being discussed with the development team, I will let you know as soon we reach a conclusion.

    Deepak Sharma
  • Marked as Answer

    Replied 27 May 2018, 7:45 pm EST


    Our development team has come up with a solution of passing a function to colHeaderPreserner option. For example:

    function getColHeaderPresenter(col) {
    //col will be the column definition.
    //The return value should be a valid HTML in string

    // if( === 'xxx1'){
    // return something
    // } else if( ==='xxx2'){
    // return something else
    // }
    // return other thing
    return '<p class="vertical-middle">' + col.caption + '</p>';

    var columns = [{
    id: 'firstName',
    caption: 'First Name',
    dataField: 'firstName',
    width: '*',
    colHeaderPresenter: getColHeaderPresenter

    Please let us know if this will work for you.
    Once you confirm we will add this to our next biweekly build.

    Deepak Sharma
  • Replied 25 June 2018, 6:21 am EST

    Yes this should do that trick.
    please let me know when this gets added to the release
  • Replied 25 June 2018, 6:21 am EST

    Yes this should do that trick.
    please let me know when this gets added to the release
  • Replied 27 June 2018, 3:28 pm EST


    You can download the fixed build from the link below:

    In case you face any issues, please let me know.

    Deepak Sharma
Need extra support?

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

Learn More

Forum Channels