HI,
I have a command item template that has several buttons on it. The visibility of the buttons depends on another button in the command item template being clicked. I have a javascript function that works perfectly to set the visibility of the buttons based on which button is clicked. I am using the set_visible property in the javascript to show/hide the button.
My problem is that 2 of the buttons in the command item template should not be visible when the page is first opened. But if I initially set the visible property of these buttons to false then when my javascript function runs, I get an error that the object is null for these buttons.
I tried using a cssClass using display:none !important and this initially hides the buttons but I can't change this property in my javascript function since the radbutton doesn't use the style property.
Any ideas how I can get these buttons to be hidden when the page first loads.
Thank you for you help.
Tracy
Javascript that shows/hides the buttons.
I have a command item template that has several buttons on it. The visibility of the buttons depends on another button in the command item template being clicked. I have a javascript function that works perfectly to set the visibility of the buttons based on which button is clicked. I am using the set_visible property in the javascript to show/hide the button.
My problem is that 2 of the buttons in the command item template should not be visible when the page is first opened. But if I initially set the visible property of these buttons to false then when my javascript function runs, I get an error that the object is null for these buttons.
I tried using a cssClass using display:none !important and this initially hides the buttons but I can't change this property in my javascript function since the radbutton doesn't use the style property.
Any ideas how I can get these buttons to be hidden when the page first loads.
Thank you for you help.
Tracy
<
CommandItemTemplate
>
<
asp:Table
ID
=
"tblCommandTemplate"
runat
=
"server"
Width
=
"1220px"
CellSpacing
=
"0"
CellPadding
=
"0"
>
<
asp:TableRow
ID
=
"trowCommandTemplate1"
Height
=
"25px"
runat
=
"server"
style
=
"display:block;"
>
<
asp:TableCell
ID
=
"tcell1"
runat
=
"server"
>
<
telerik:RadButton
ID
=
"rbtAdd"
runat
=
"server"
CommandName
=
"InitInsert"
Skin
=
"Transparent"
Text
=
"Add"
Icon-PrimaryIconURL="<%$ Resources:Images,AddRecord16%>" style="position:absolute;left:10px;font-size:10px;" ToolTip="Add New Record" Visible='<%# rgvMainGrid.EditIndexes.Count=0 or Not rgvMainGrid.MasterTableView.IsItemInserted %>' />
<
telerik:RadButton
ID
=
"rbtEdit"
runat
=
"server"
CommandName
=
"EditSelected"
Skin
=
"Transparent"
Text
=
"Edit"
Icon-PrimaryIconURL="<%$ Resources:Images,EditRecord16%>" style="position:absolute;left:70px;font-size:12px;" ToolTip="Edit Record" Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>' />
<
telerik:RadButton
ID
=
"rbtDelete"
runat
=
"server"
CommandName
=
"DeleteSelected"
Skin
=
"Transparent"
Text
=
"Delete"
Icon-PrimaryIconURL="<%$ Resources:Images,DeleteRecord16%>" style="position:absolute;left:129px;font-size:12px;" ToolTip="Delete Record" Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>' OnClientClicking="DeleteOnClientClicking" />
<
telerik:RadButton
ID
=
"rbtCancel"
runat
=
"server"
CommandName
=
"CancelAll"
Skin
=
"Transparent"
Text
=
"Cancel"
Icon-PrimaryIconURL="<%$ Resources:Images,CancelRecord16%>" style="position:absolute;left:10px;font-size:12px;" ToolTip="Cancel Add/Edit" Visible='<%# rgvMainGrid.EditIndexes.Count > 0 Or rgvMainGrid.MasterTableView.IsItemInserted %>' />
<
telerik:RadButton
ID
=
"rbtSaveNew"
runat
=
"server"
CommandName
=
"PerformInsert"
Skin
=
"Transparent"
Text
=
"Save"
Icon-PrimaryIconURL="<%$ Resources:Images,SaveRecord16%>" style="position:absolute;left:80px;font-size:12px;" ToolTip="Save New Record" Visible='<%# rgvMainGrid.MasterTableView.IsItemInserted%>' />
<
telerik:RadButton
ID
=
"rbtSave"
runat
=
"server"
CommandName
=
"UpdateEdited"
Skin
=
"Transparent"
Text
=
"Save"
Icon-PrimaryIconURL="<%$ Resources:Images,SaveRecord16%>" style="position:absolute;left:80px;font-size:12px;" ToolTip="Save Edited Record" Visible='<%# rgvMainGrid.EditIndexes.Count > 0 AND Not rgvMainGrid.MasterTableView.IsItemInserted%>'/>
<
telerik:RadButton
ID
=
"rcbClearGrouping"
runat
=
"server"
CommandName
=
"ClearGrouping"
Skin
=
"Transparent"
Text
=
"Clear Grouping"
Icon-PrimaryIconURL="<%$ Resources:Images,Grouping16%>" style="position:absolute;left:840px;font-size:12px;" ToolTip="Clear Grouping"/>
<
telerik:RadButton
ID
=
"rbtFilterFields"
runat
=
"server"
ButtonType
=
"StandardButton"
ToggleType
=
"CustomToggle"
OnClientToggleStateChanged
=
"ShowHideFilterFields"
AutoPostBack
=
"false"
ToolTip
=
"Show/Hide Filter Fields"
Skin
=
"Transparent"
CssClass
=
"css_GRD02_Filter_Button"
Width
=
"20px"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
Text
=
" Hide Filters"
PrimaryIconUrl ="<%$ Resources:Images,FilterRecord16%>" />
<
telerik:RadButtonToggleState
Text
=
" Show Filters"
PrimaryIconUrl="<%$ Resources:Images,FilterRecord16%>" />
</
ToggleStates
>
</
telerik:RadButton
>
<
telerik:RadButton
ID
=
"rcbRefresh"
runat
=
"server"
CommandName
=
"RebindGrid"
Skin
=
"Transparent"
Text
=
"Refresh"
Icon-PrimaryIconURL="<%$ Resources:Images, ReloadBlue16 %>" style="position:absolute;left:1052px;font-size:12px;" ToolTip="Refresh Grid"/>
<
telerik:RadButton
ID
=
"rcbExportToExcel"
runat
=
"server"
CommandName
=
"ExportToExcel"
Skin
=
"Transparent"
Text
=
"Export"
Icon-PrimaryIconURL="<%$ Resources:Images,Excel16%>" style="position:absolute;left:1129px;font-size:12px;" ToolTip="Export To Excel" />
<
telerik:RadButton
ID
=
"rbtGridToolbar"
runat
=
"server"
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
style
=
"position:absolute;left:1206px;font-size:12px;"
width
=
"20px"
Height
=
"16px"
AutoPostBack
=
"false"
Checked
=
"true"
ToolTip
=
"Show/Hide Grid Settings"
OnClientCheckedChanged
=
"ShowHideGridSettings"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
ImageUrl
=
"../../App_Themes/Images/Arrows/Expand Down 16.ico"
Selected
=
"true"
/>
<
telerik:RadButtonToggleState
ImageUrl
=
"../../App_Themes/Images/Arrows/Expand Up 16.ico"
/>
</
ToggleStates
>
</
telerik:RadButton
>
</
asp:TableCell
>
</
asp:TableRow
>
<
asp:TableRow
ID
=
"trowCommandTemplate2"
Height
=
"32px"
runat
=
"server"
>
<
asp:TableCell
>
<
asp:Label
ID
=
"lblSelectTemplate"
runat
=
"server"
CssClass
=
"css_GRD02_SelectTemplate_Label"
Text
=
"Select Template:"
/>
<
telerik:RadComboBox
ID
=
"rcbGridTemplate"
runat
=
"server"
CssClass
=
"css_GRD02_SelectTemplate_RadCombo"
DropDownWidth
=
"200px"
Width
=
"200px"
EnableLoadOnDemand
=
"true"
HighlightTemplatedItems
=
"true"
AutoPostBack
=
"false"
AllowCustomText
=
"false"
OnClientSelectedIndexChanged
=
"GridTemplateOnSelectedIndexChanged"
OnItemsRequested
=
"rcbGridTemplate_OnItemsRequested"
OnItemCreated
=
" rcbGridTemplate_ItemCreated"
EnableViewState
=
"true"
/>
<
asp:Label
ID
=
"lblTemplateType"
runat
=
"server"
CssClass
=
"css_GRD02_TemplateType_Label"
Text
=
"Type:"
/>
<
telerik:RadComboBox
ID
=
"rcbTemplateType"
runat
=
"server"
CssClass
=
"css_GRD02_TemplateType_RadCombo"
DropDownWidth
=
"80px"
Width
=
"80px"
EnableLoadOnDemand
=
"true"
HighlightTemplatedItems
=
"true"
AutoPostBack
=
"false"
AllowCustomText
=
"false"
OnItemsRequested
=
"rcbTemplateType_OnItemsRequested"
Enabled
=
"false"
EnableViewState
=
"true"
OnItemCreated
=
"rcbTemplateType_ItemCreated"
/>
<
telerik:RadButton
ID
=
"rbtApplySettings"
runat
=
"server"
CommandName
=
"ApplySettings"
Skin
=
"Transparent"
CssClass
=
"css_GRD02_GridSettings_Button"
Text
=
"Apply Settings"
Icon-PrimaryIconURL="<%$ Resources:Images,GridSettingsApply16%>" ToolTip="Apply Selected Template Settings To Grid"/>
<
telerik:RadButton
ID
=
"rbtSaveTemplate"
runat
=
"server"
CommandName
=
"SaveTemplate"
Skin
=
"Transparent"
CssClass
=
"css_GRD02_GridSettings_Button"
Text
=
"Save Template"
Icon-PrimaryIconURL="<%$ Resources:Images,GridSettingsSave16%>" ToolTip="Save Current Grid Settings To Selected Template"/>
<
telerik:RadButton
ID
=
"rbtAddTemplate"
runat
=
"server"
CommandName
=
"AddNewTemplate"
Skin
=
"Transparent"
CssClass
=
"css_GRD02_GridSettings_Button"
Text
=
"Save To A New Template"
Icon-PrimaryIconURL="<%$ Resources:Images,GridSettingsAdd16%>" ToolTip="Save Current Grid Settings To A New Template" AutoPostBack="false" OnClientClicked="ShowHideCommandTemplate"/>
<
telerik:RadButton
ID
=
"rbtDeleteTemplate"
runat
=
"server"
CommandName
=
"DeleteTemplate"
Skin
=
"Transparent"
CssClass
=
"css_GRD02_GridSettings_Button"
Text
=
"Delete Template"
Icon-PrimaryIconURL="<%$ Resources:Images,GridSettingsDelete16%>" ToolTip="Delete Selected Template"/>
<
telerik:RadButton
ID
=
"rbtSetDefault"
runat
=
"server"
CommandName
=
"SetDefault"
Skin
=
"Transparent"
CssClass
=
"css_GRD02_GridSettings_Button"
Text
=
"Set As Default"
Icon-PrimaryIconURL="<%$ Resources:Images,GridSettingsDefault16%>" ToolTip="Save Selected Template As Default"/>
<
telerik:RadButton
ID
=
"rbtSettingDetail"
runat
=
"server"
CommandName
=
"GridSettingsDetail"
Skin
=
"Transparent"
CssClass
=
"css_GRD02_GridSettings_Button"
Text
=
"Template Settings"
Icon-PrimaryIconURL="<%$ Resources:Images,GridSettings16%>" Tooltip="Show Template Settings"/>
<
asp:Label
ID
=
"lblTemplateName"
runat
=
"server"
CssClass
=
"css_GRD02_TemplateName_Label"
Text
=
"Name:"
/>
<
asp:TextBox
ID
=
"txtTemplateName"
runat
=
"server"
CssClass
=
"css_GRD02_TemplateName_TextBox"
Text
=
"Enter A New Template Name"
/>
<
telerik:RadButton
ID
=
"rbtSaveNewTemplate"
runat
=
"server"
CommandName
=
"SaveNewTemplate"
Skin
=
"Transparent"
CssClass
=
"css_GRD02_GridSettings_Button_Hide"
Text
=
"Save"
Icon-PrimaryIconURL="<%$ Resources:Images,GridSettingsSave16%>" ToolTip="Save New Template" OnClientClicking="SaveNewTemplate" />
<
telerik:RadButton
ID
=
"rbtCancelNewTemplate"
runat
=
"server"
CommandName
=
"CancelNewTemplate"
Skin
=
"Transparent"
CssClass
=
"css_GRD02_GridSettings_Button_Hide"
Text
=
"Cancel"
Icon-PrimaryIconURL="<%$ Resources:Images,GridSettingsCancel16%>" ToolTip="Cance New Template" AutoPostBack="false" OnClientClicked="ShowHideCommandTemplate" />
</
asp:TableCell
>
</
asp:TableRow
>
</
asp:Table
>
</
CommandItemTemplate
>
Javascript that shows/hides the buttons.
/*Function Is Used To Show/Hide Grid Template Items In The Command Item Template Based On Whether A Current
Template Is Being Displayed Or Add New Template Has Been Selected.
*/
function ShowHideCommandTemplateExternal(sender, args, radGrid) {
var rcbTemplate = $telerik.findControl(radGrid, 'rcbGridTemplate');
var rbtApply = $telerik.findControl(radGrid, 'rbtApplySettings');
var rbtSave = $telerik.findControl(radGrid, 'rbtSaveTemplate');
var rbtDelete = $telerik.findControl(radGrid, 'rbtDeleteTemplate');
var rbtAdd = $telerik.findControl(radGrid, 'rbtAddTemplate');
var rbtDefault = $telerik.findControl(radGrid, 'rbtSetDefault');
var rbtSettings = $telerik.findControl(radGrid, 'rbtSettingDetail');
var rbtCancel = $telerik.findControl(radGrid, 'rbtCancelNewTemplate');
var rbtSaveNew = $telerik.findControl(radGrid, 'rbtSaveNewTemplate');
var rcbType = $telerik.findControl(radGrid, 'rcbTemplateType');
/* Get The Hidden Fields That Hold The Client Id's Of The Controls In The Command Item Template
That Are Not Telerik Controls */
var hdfSelect = document.getElementById('wccGridSettings_hdfSelectTemplate');
var lblSelect = document.getElementById(hdfSelect.value);
var hdfTemplateName = document.getElementById('wccGridSettings_hdfTemplateName');
var txtTemplateName = document.getElementById(hdfTemplateName.value);
var hdfNameLabel = document.getElementById('wccGridSettings_hdfTemplateNameLabel');
var lblTemplateName = document.getElementById(hdfNameLabel.value);
var blnDisplay;
var displayAdd;
var displayCurrent;
var cmdName = sender.get_commandName();
if (cmdName == 'AddNewTemplate') {
blnDisplayAdd = true;
blnDisplayCurrent = false;
displayAdd = 'block';
displayCurrent = 'none';
rcbType.trackChanges();
rcbType.enable();
rcbType.updateClientState();
rcbType.commitChanges();
}
else {
blnDisplayAdd = false;
blnDisplayCurrent = true;
displayAdd = 'none';
displayCurrent = 'block';
/* Disable The Template Type When Add New Template Option Has Been Cancelled Or The New Template Has Been Saved */
rcbType.trackChanges();
rcbType.disable();
rcbType.updateClientState();
rcbType.commitChanges();
}
lblSelect.style.display = displayCurrent;
rcbTemplate.set_visible(blnDisplayCurrent);
rbtApply.set_visible(blnDisplayCurrent);
rbtSave.set_visible(blnDisplayCurrent);
rbtDelete.set_visible(blnDisplayCurrent);
rbtAdd.set_visible(blnDisplayCurrent);
rbtDefault.set_visible(blnDisplayCurrent);
lblTemplateName.style.display = displayAdd;
txtTemplateName.style.display = displayAdd;
rbtSettings.set_visible(blnDisplayCurrent);
rbtSaveNew.set_visible(blnDisplayAdd);
rbtCancel.set_visible(blnDisplayAdd);
}