How to get the buttons in the Group Header working

[Feroz]

Hi,
I have the below as my Group Header

 groupHeaderTemplate:  "Items:  #=count# +
                                "<button class='floatRightWithMargin' type='button' onclick='approveAll(#=value#)'>Approve</button>" +
                                "<button class='floatRightWithMargin' type='button' onclick='rejectAll(#=value#)'>Reject</button>"

Whatever style I give in the CSS class, I'm not able to get the buttons aligned to the right side of the header. I have tried float right and left, and margins.
Also, the call doesn't happen on click of the button. I keep getting a script error saying that a closing bracket is required. How do we make a function call on click of the button?

Can you please give an example of the buttons aligned to the right and a call to a function working on click.

[Kiril Nikolov]

Hi Feroz,

The buttons that you generating with the groupHeaderTempalate are inserted into a <p> tag that holds the content of the template. As this paragraph does not have specified width, when you use the "float" property for the buttons inside they get misaligned.

In this situation I will suggest you to set the width of the <p> tag that holds the button to 100% (this tag has the class ".k-reset") and then use your .floatRightWithMargin class to float the buttons to the right:

.k-reset{
      width:100%;
    }
.floatRightWithMargin{
      float:right;
    }

Regards,
Kiril Nikolov
Telerik

[Feroz]

Hi Kiril,
Thanks for the reply but modifying the k-reset would result in the grid pagination to go haywire and is having other consequences. Can we apply some style just to the header so that we don't impact other parts of the grid?
Also, what is the right way of passing the grouping value to a javascript function? 
onclick='rejectAll(#=value#)' is giving an error and onclick='#=rejectAll(value)#' causes the function to execute always even before click.

[Kiril Nikolov]

Hello Feroz,

 
If you want to select only the first header and set the width to 100% only for the its ".k-reset"  you can use this jQuery code:

$("tbody .k-grouping-row .k-reset").first().css("width","100%")

And for your second question - I would suggest you to use the jQuery .on() event handler function and attach it to your custom buttons, instead of the html handlers used at the moment. 

More information about ".on" can be found on the following link:


http://api.jquery.com/on/


Regards,
Kiril Nikolov
Telerik