We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

customize grid group header

Thread ID:

Created:

Updated:

Platform:

Replies:

118089 Jan 30,2015 04:34 PM UTC Feb 2,2015 02:23 PM UTC JavaScript 1
loading
Tags: ejGrid
Aarffy
Asked On January 30, 2015 04:34 PM UTC

Can I use a custom template in a grid group header? For now I just need to remove the column name from the header, like...

instead of Name: John, just John

I also would like to remove the grouping bar where you can drag the column headers. 

Thanks

Balaji Marimuthu [Syncfusion]
Replied On February 2, 2015 02:23 PM UTC

Hi Ellis,

Query: Can I use a custom template in a grid group header?

We considered this requirement “Custom template in a grid group header” as feature and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Query:  For now I just need to remove the column name from the header, like... instead of Name: John, just John. I also would like to remove the grouping bar where you can drag the column headers. 

We have analyzed and achieved your requirement in the Grid client side events. Please find the below code snippet.

$(function () {

            // the datasource "window.gridData" is referred from jsondata.min.js

            var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));

            $("#Grid").ejGrid({

                dataSource: data,

                allowGrouping: true,

                groupSettings: { groupedColumns: ["ShipCity"] },

                actionComplete: "complete",

                create: "create"

            });

        });

        function create(args) {

            if ($(".e-groupcaption").length > 0) {

                for (i = 0; i < $(".e-groupcaption").length ; i++) {

                    var str = $(".e-groupcaption")[i].innerHTML;

                    $(".e-groupcaption")[i].innerHTML = str.split(":")[1];

                }

            }

            $(".e-groupdroparea").remove();

        }

        function complete(args) {

            if (args.requestType == "grouping" || args.requestType == "paging") {

                if ($(".e-groupcaption").length > 0) {

                    for (i = 0; i < $(".e-groupcaption").length ; i++) {

                        var str = $(".e-groupcaption")[i].innerHTML;

                        $(".e-groupcaption")[i].innerHTML = str.split(":")[1];

                    }

                }

            }

        }

    </script>

In the Grid “create” event we have removed the group drop area and also displaying the column name for header in initial rendering by using javascript split. We have used the “actionComplete” event for the Grid to displaying the same for further grid action.

Please find the sample for your reference.

http://www.syncfusion.com/downloads/support/directtrac/general/gridgroup-1093845235.zip

Please let us know if you have any queries.

Regards,

Balaji Marimuthu



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;