Hide Grouped Columns

3 posts, 0 answers
  1. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 23 May 2018 Link to this post

    Hi,

    I have a Grid where i group by the Year and Month from a DateTime (see attached Image - Table1), but without defining the columns and using the Title they display like so (see Table2 image):

    • "TimesheetWorkDateMonthYear.Year: 2017" instead of "Year: 2017"
    • "TimesheetWorkDateMonthYear.Month: Jul" instead of "Month: Jul"

    How can i make them display properly without showing the Columns or even adding them?

    columns.Bound(o => o.TimesheetWorkDateMonthYear.Year).Width(100).Title("Year").ClientTemplate("#: kendo.toString(TimesheetWorkDateMonthYear, 'yyyy') #");
    columns.Bound(o => o.TimesheetWorkDateMonthYear.Month).Width(100).Title("Month").ClientTemplate("#: kendo.toString(TimesheetWorkDateMonthYear, 'MMM') #");

     

    I've tried adding '.Visable(false)' to the Columns but this doesn't work also.

     

  2. Georgi
    Admin
    Georgi avatar
    677 posts

    Posted 25 May 2018 Link to this post

    Hello Lee,

    Based on the provided information I assume that the requirement is to group the data by some field but omit binding that field to a column and modify the content of the group header. Please correct me if I am wrong.

    A possible solution to modify the header of the group is to select the element and set the text as required within the DataBound event handler.

    e.g.

    // attach event handler
     
            .Events(x=> x.DataBound("onDataBound"))
     
    // event handler
     
        function onDataBound() {
            this.table.find('.k-grouping-row p').each(function () {
                $(this).contents().each(function () {
                    if (this.nodeType == 3) {
                        var splitted = this.textContent.split('.')
                        this.textContent = splitted[splitted.length-1]
                    }
                })
            })
        }



    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 25 May 2018 in reply to Georgi Link to this post

    Hi Georgi,

    I have to give you many thanks as this is the first time i got a solid answer straight away. Normally i'm replied with incorrect information or just giving me a link to the demo's which we clearly had already gone through. So thank you!

    Whilst this is a hacky way, it works! So thank you.

    Lee.

Back to Top