Hi,
I have a grid with group headers, i need to do expand all/collapse all as well as ensure the normal expand/collapse works too. I achieved expand all/collapse all via the below js:
var EXPAND_CSS_CLASS = "<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>";//rgExpand
var COLLAPSE_CSS_CLASS = "<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>";//rgCollapse
//Expands or collapses all group headers based on expandCollapseClass
function ExpandCollapseAllGroups(isExpand) {
var sourceClass = (isExpand) ? EXPAND_CSS_CLASS : COLLAPSE_CSS_CLASS;
var destinationClass = (isExpand) ? COLLAPSE_CSS_CLASS : EXPAND_CSS_CLASS;
var toolTip = "<%=Tokens.CandidateExpandGroupToolTipText %>";
if (isExpand) {
toolTip = "<%=Tokens.CandidateCollapseGroupToolTipText %>";
}
// change the +/- states
$("." + sourceClass).each(function(button) {
$(this).removeClass(sourceClass).addClass(destinationClass);
//change the tool tip for expand/collapse buttons
$(this).attr("title", toolTip);
});
// hide/show the rows
$("#<%=m_UIExperienceGrid.ClientID %> .<%=CSSConstants.GRID_ROW_CSS %>, #<%=m_UIExperienceGrid.ClientID %> .<%=CSSConstants.GRID_ALT_ROW_CSS %>").each(
function(button) {
if (isExpand) {
$(this).show();
} else {
$(this).hide();
}
});
//return false to prevent postbacks
return false;
}
The issue is, i am unable to do an individual expand/collapse due to the mark up for grid being tampered by some highlight javascript functionality built in our application which will merely add span tags around the keywords i search to highlight in my application. The keywords i search corresponds to words displayed in the header item of the grid. Once the markup is tampered, the telerik grid individual expand/collapse breaks. Hence i need to somehow remove the telerik generated expand/collapse js associated with the input tags that bear the class "rgExpand" or "rgCollapse" and add custom js to expand/collapse the groups individually. I tried the below js, it is not working
$(".<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>, .<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>").attr('onclick', '');
$(".<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>, .<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>").each(
function() {
$(this)[0].onclick = function() {
//TODO: if you need to know if the element is expanded, use the next line of code... otherwise remove it
//var isExpanded = $(this).attr("class") == "rgCollapse";
$(this).parents("TR.<%=CSSConstants.GRID_ROW_GROUP_HEADER_CSS %>").next("TR").toggle();
}
});
Please suggest me a solution as i have pretty much exhausted all the options.
Thanks and regards,
Damodar
I have a grid with group headers, i need to do expand all/collapse all as well as ensure the normal expand/collapse works too. I achieved expand all/collapse all via the below js:
var EXPAND_CSS_CLASS = "<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>";//rgExpand
var COLLAPSE_CSS_CLASS = "<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>";//rgCollapse
//Expands or collapses all group headers based on expandCollapseClass
function ExpandCollapseAllGroups(isExpand) {
var sourceClass = (isExpand) ? EXPAND_CSS_CLASS : COLLAPSE_CSS_CLASS;
var destinationClass = (isExpand) ? COLLAPSE_CSS_CLASS : EXPAND_CSS_CLASS;
var toolTip = "<%=Tokens.CandidateExpandGroupToolTipText %>";
if (isExpand) {
toolTip = "<%=Tokens.CandidateCollapseGroupToolTipText %>";
}
// change the +/- states
$("." + sourceClass).each(function(button) {
$(this).removeClass(sourceClass).addClass(destinationClass);
//change the tool tip for expand/collapse buttons
$(this).attr("title", toolTip);
});
// hide/show the rows
$("#<%=m_UIExperienceGrid.ClientID %> .<%=CSSConstants.GRID_ROW_CSS %>, #<%=m_UIExperienceGrid.ClientID %> .<%=CSSConstants.GRID_ALT_ROW_CSS %>").each(
function(button) {
if (isExpand) {
$(this).show();
} else {
$(this).hide();
}
});
//return false to prevent postbacks
return false;
}
The issue is, i am unable to do an individual expand/collapse due to the mark up for grid being tampered by some highlight javascript functionality built in our application which will merely add span tags around the keywords i search to highlight in my application. The keywords i search corresponds to words displayed in the header item of the grid. Once the markup is tampered, the telerik grid individual expand/collapse breaks. Hence i need to somehow remove the telerik generated expand/collapse js associated with the input tags that bear the class "rgExpand" or "rgCollapse" and add custom js to expand/collapse the groups individually. I tried the below js, it is not working
$(".<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>, .<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>").attr('onclick', '');
$(".<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>, .<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>").each(
function() {
$(this)[0].onclick = function() {
//TODO: if you need to know if the element is expanded, use the next line of code... otherwise remove it
//var isExpanded = $(this).attr("class") == "rgCollapse";
$(this).parents("TR.<%=CSSConstants.GRID_ROW_GROUP_HEADER_CSS %>").next("TR").toggle();
}
});
Please suggest me a solution as i have pretty much exhausted all the options.
Thanks and regards,
Damodar