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.
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.
3 Answers, 1 is accepted
0
Hi Feroz,
Regards,
Kiril Nikolov
Telerik
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Feroz
Top achievements
Rank 1
Rank 1
answered on 26 Jun 2013, 07:37 PM
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.
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.
0
Hello Feroz,
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!