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 CurrentTemplate 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); }