I have a SearchBox with a 'none' display style declared in a holding div.
After a javascript event (example click on a button, without postback) I am dynamically creating a new div, and move the SearchBox to it.
I have to do this, because it seems that it is not possible to dynamically create a SearchBox from javascript.
I based the initial hide/show on the post of Brian Azzi.
Everything works fine, but the magnifying glass appears in on the left of the SearchBox instead of the right side. I attached a screenshot of it.
And that is annoying.
Any solution for that?
I am posting a sample of the xml and javascript I am using.
<
div
id
=
"telerikHolder"
>
<
telerik:RadSearchBox
ID
=
"RdSrchBx"
runat
=
"server"
style
=
"display: none;"
EmptyMessage
=
"Type"
OnClientSearch
=
"AddSimple"
OnClientDataRequesting
=
"AddSimple"
ShowSearchButton
=
"true"
>
<
DropDownSettings
Height
=
"400"
Width
=
"550"
/>
<
WebServiceSettings
Path
=
"Main.aspx"
Method
=
"GetTypeResults"
/>
</
telerik:RadSearchBox
>
</
div
>
var
el_0_1_1_1 = document.createElement(
'div'
);
pParent.appendChild(el_0_1_1_1);
el_0_1_1_1.className =
'popupCellRight'
;
this
._typeSearchBoxInput = $(
"#RdSrchBx"
);
this
._typeSearchBoxInput.show();
//ClearSearchBox(this._typeSearchBoxInput);
this
._typeSearchBox =
null
;
var
telerikHolder = document.getElementById(
'telerikHolder'
);
var
childDivs = telerikHolder.getElementsByTagName(
'div'
);
for
(i = 0; i < childDivs.length; i++) {
var
childDiv = childDivs[i];
if
(childDiv.id ==
"RdSrchBx"
) {
this
._typeSearchBox = childDiv;
break
;
}
}
telerikHolder.removeChild(
this
._typeSearchBox);
el_0_1_1_1.appendChild(
this
._typeSearchBox);
// this._typeSearchBoxInput = this._typeSearchBoxInput.get_inputElement();
The other problem I have is that this._typeSearchBoxInput does not seem to be a proper Telerik control.
Because when I try to use get_inputElement() on it, I get an undefined exception.
<
telerik:RadMaskedTextBox
RenderMode
=
"Lightweight"
ID
=
"RadMaskedTextBox3"
runat
=
"server"
<br>Mask="<
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>-<
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><
br
><
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>-<
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>-<
br
><
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>-<
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><
br
><
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>-<
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F><
0
|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F>"><
br
></
telerik:RadMaskedTextBox
>
I just recently upgraded a project to the latest release (2016.1.113) and am experiencing a change in the appearance of panel headers. Prior to the update the header was highlighted with the reverse/selected when open. After the update only the last panel selected is highlighted. We are using the Metro touch skin (this is a mobile site) and the headers are now difficult to distinguish from the content. Please see the attached screen shot. How do I restore this to have the panel header always highlighted? here is my markup code:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="XPanelBarTest.aspx.vb" Inherits="mobile.autoclick.com.XPanelBarTest" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
style
type
=
"text/css"
>
html .RadPanelBar_MetroTouch .rmRootToggle {
height:25px;
width:24px;
}
html .RadPanelBar_MetroTouch .rmRootToggle:before {
font-size:18px;
}
html .RadPanelBar_MetroTouch .rpTemplate
{
line-height: 18px;
}
html .RadPanelBar_BlackMetroTouch .rpTemplate
{
line-height: 18px;
}
</
style
>
<
script
type
=
"text/javascript"
src
=
"/jquery/jquery-1.9.1.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"/js/plupload.full.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"/js/jquery.plupload.queue/jquery.plupload.queue.js"
></
script
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
telerik:RadPanelBar
ID
=
"RadPanelBar1"
runat
=
"server"
Width
=
"99%"
Skin
=
"MetroTouch"
>
<
Items
>
<
telerik:RadPanelItem
Text
=
"Photos"
>
<
ContentTemplate
>
<
div
style
=
"overflow:hidden"
>
<
div
id
=
"container"
>
<
telerik:RadButton
ID
=
"radbtnAddPhoto"
runat
=
"server"
Text
=
"Add New Photos"
Width
=
"99%"
></
telerik:RadButton
>
</
div
>
<
telerik:RadButton
ID
=
"radbtnVehicleNotSaved"
runat
=
"server"
Text
=
"Please save the vehicle before adding photos."
Width
=
"99%"
Enabled
=
"false"
></
telerik:RadButton
>
</
div
>
</
ContentTemplate
>
</
telerik:RadPanelItem
>
<
telerik:RadPanelItem
Text
=
"Description"
>
<
ContentTemplate
>
<
div
style
=
"overflow:hidden"
>
<
fieldset
>
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel2"
runat
=
"server"
>
<
table
class
=
"fieldsetTable"
>
<
tr
>
<
td
style
=
"padding-top:2px; padding-right:8px; padding-bottom:8px"
colspan
=
"2"
>
<
telerik:RadButton
ID
=
"radbtnScanner"
runat
=
"server"
Text
=
"Scan VIN"
ButtonType
=
"LinkButton"
CssClass
=
"fieldsetTable"
></
telerik:RadButton
>
<
telerik:RadButton
ID
=
"radbtnDecodeVin"
runat
=
"server"
Text
=
"Decode VIN"
></
telerik:RadButton
>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"lablecell_1"
>
VIN:<
span
class
=
"Reqd"
>*</
span
>
</
td
>
<
td
class
=
"tablecell"
>
<
asp:TextBox
runat
=
"server"
ID
=
"txtVin"
Width
=
"200px"
CssClass
=
"tdText"
MaxLength
=
"21"
></
asp:TextBox
>
<
telerik:RadWindow
ID
=
"radwinSelectTrimLevel"
runat
=
"server"
Title
=
"Select Trim Level"
Width
=
"290px"
Behaviors
=
"Move, Close, Resize"
Skin
=
"MetroTouch"
Modal
=
"true"
CenterIfModal
=
"true"
>
<
ContentTemplate
>
<
table
style
=
"margin:10px; width:96%"
>
<
tr
>
<
td
>
<
label
runat
=
"server"
id
=
"lblPopupCommentsLabel"
class
=
"tdText"
>Please Select A Trim Level:</
label
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
asp:RadioButtonList
ID
=
"rblistTrimLevels"
runat
=
"server"
Width
=
"90%"
CssClass
=
"rbtext"
style
=
"line-height:30px"
></
asp:RadioButtonList
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"text-align:center"
>
<
telerik:RadButton
ID
=
"rdbTrimLevelOK"
runat
=
"server"
Text
=
"OK"
Width
=
"90px"
></
telerik:RadButton
>
</
td
>
</
tr
>
</
table
>
</
ContentTemplate
>
</
telerik:RadWindow
>
</
td
>
</
tr
>
</
table
>
</
telerik:RadAjaxPanel
>
</
fieldset
>
</
div
>
</
ContentTemplate
>
</
telerik:RadPanelItem
>
<
telerik:RadPanelItem
Text
=
"Status"
>
<
ContentTemplate
>
<
div
style
=
"overflow:hidden"
>
<
table
style
=
"margin:5px"
>
<
tr
>
<
td
style
=
"width:100%"
>
<
table
class
=
"fieldsetTable"
>
<
tr
>
<
td
class
=
"tablecell"
colspan
=
"2"
>
<
asp:CheckBox
runat
=
"server"
ID
=
"cbShowOnLine"
Text
=
"Show On Line:"
TextAlign
=
"Left"
/>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width:44px"
>
New/Used:<
span
class
=
"Reqd"
>*</
span
>
</
td
>
<
td
class
=
"tablecell"
>
<
asp:DropDownList
runat
=
"server"
ID
=
"ddNewUsed"
CssClass
=
"dropdownText"
>
<
asp:ListItem
Text
=
"-- New/Used --"
Value
=
"2"
></
asp:ListItem
>
<
asp:ListItem
Text
=
"New"
Value
=
"1"
></
asp:ListItem
>
<
asp:ListItem
Text
=
"Used"
Value
=
"0"
></
asp:ListItem
>
</
asp:DropDownList
>
</
td
>
</
tr
>
<
tr
>
<
td
>
Status:<
span
class
=
"Reqd"
>*</
span
>
</
td
>
<
td
class
=
"tablecell"
>
</
td
>
</
tr
>
<
tr
>
<
td
>
Condition:<
span
class
=
"Reqd"
>*</
span
>
</
td
>
<
td
class
=
"tablecell"
>
</
td
>
</
tr
>
</
table
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"text-align:right"
colspan
=
"2"
>
<
span
class
=
"fieldsetTable"
>* Required</
span
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
ContentTemplate
>
</
telerik:RadPanelItem
>
<
telerik:RadPanelItem
Text
=
"Price"
>
<
ContentTemplate
>
<
div
style
=
"overflow:hidden"
>
<
table
class
=
"fieldsetTable"
style
=
"margin:5px"
>
<
tr
>
<
td
valign
=
"top"
style
=
"width: 50%;"
>
<
table
class
=
"fieldsetTable"
style
=
"width:100%"
>
<
tr
>
<
td
class
=
"tablecell"
>
List:<
br
/>
<
asp:TextBox
runat
=
"server"
ID
=
"txtListPrice"
Width
=
"100px"
CssClass
=
"tdText numberTextBox"
></
asp:TextBox
>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"tablecell"
>
Markup (Pack):<
br
/>
<
asp:TextBox
runat
=
"server"
ID
=
"txtMarkup"
Width
=
"100px"
CssClass
=
"tdText numberTextBox"
></
asp:TextBox
>
</
td
>
</
tr
>
</
table
>
</
td
>
<
td
valign
=
"top"
style
=
"width: 50%;"
>
<
table
class
=
"fieldsetTable"
style
=
"width:100%"
>
<
tr
>
<
td
class
=
"tablecell"
>
Cost/ACV:<
br
/>
<
asp:TextBox
runat
=
"server"
ID
=
"txtCostACV"
Width
=
"100px"
CssClass
=
"tdText numberTextBox"
></
asp:TextBox
>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"tablecell"
>
Advertised Price:<
br
/>
<
asp:TextBox
runat
=
"server"
ID
=
"txtAdvertisedPrice"
Width
=
"100px"
CssClass
=
"tdText numberTextBox"
></
asp:TextBox
>
</
td
>
</
tr
>
</
table
>
</
td
>
</
tr
>
<
tr
>
<
td
valign
=
"middle"
colspan
=
"2"
style
=
"padding-top:4px"
>
Custom Price Text - overrides vehicle price (70 characters max):<
br
/>
<
asp:TextBox
runat
=
"server"
ID
=
"txtCustomPriceText"
Width
=
"98%"
CssClass
=
"tdText"
TextMode
=
"MultiLine"
Rows
=
"2"
Height
=
"30px"
></
asp:TextBox
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
ContentTemplate
>
</
telerik:RadPanelItem
>
<
telerik:RadPanelItem
Text
=
"Equipment"
>
<
ContentTemplate
>
<
div
style
=
"overflow:hidden"
>
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel3"
runat
=
"server"
>
<
div
style
=
"margin:5px"
>
<
asp:TextBox
runat
=
"server"
ID
=
"txtEquipment"
Width
=
"99%"
Height
=
"80px"
CssClass
=
"tdText"
TextMode
=
"MultiLine"
></
asp:TextBox
><
br
/>
<
asp:Panel
ID
=
"panelOptions"
runat
=
"server"
Visible
=
"false"
Width
=
"99%"
>
Additional Optional Equipment (check all that apply):<
br
/>
</
asp:Panel
>
</
div
>
</
telerik:RadAjaxPanel
>
</
div
>
</
ContentTemplate
>
</
telerik:RadPanelItem
>
<
telerik:RadPanelItem
Text
=
"Web Description / Video"
>
<
ContentTemplate
>
<
div
style
=
"overflow:hidden"
>
<
div
style
=
"margin:5px"
>
<
span
class
=
"fieldsetTable"
>Description On Web:</
span
><
br
/>
<
asp:TextBox
runat
=
"server"
ID
=
"txtWebDescription"
Width
=
"98%"
Height
=
"106px"
CssClass
=
"tdText"
TextMode
=
"MultiLine"
></
asp:TextBox
> <
br
/>
<
asp:CheckBox
runat
=
"server"
ID
=
"cbUseAutoclickImages"
Text
=
"Use Autoclick Images"
CssClass
=
"fieldsetTable"
/>
<
br
/><
br
/>
<
span
class
=
"fieldsetTable"
>Embeded Video:</
span
><
br
/>
<
asp:Button
ID
=
"btnPasteVideoCode"
runat
=
"server"
CssClass
=
"tdText"
Text
=
"Paste Embedded Code"
Width
=
"164px"
OnClientClick
=
"PasteFromClipboard(); return false;"
/>
<
asp:Button
ID
=
"btnClearVideoCode"
runat
=
"server"
CssClass
=
"tdText"
Text
=
"Clear"
Width
=
"55px"
OnClientClick
=
"ClearVideoCode(); return false;"
/><
br
/>
<
asp:TextBox
runat
=
"server"
ID
=
"txtVideoLink"
Width
=
"98%"
Height
=
"70px"
CssClass
=
"tdText"
ForeColor
=
"DarkGray"
ReadOnly
=
"false"
TextMode
=
"MultiLine"
onchange
=
"javascript:VideoCodeChanged(this);"
ToolTip
=
"Upload your video to Youtube then click the 'Embed' button and copy and paste the code into this field. Your video will appear on the Vehicle Detail page."
></
asp:TextBox
>
</
div
>
</
div
>
</
ContentTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
>
</
form
>
</
body
>
</
html
>
Thanks.
Charles
Hi,
I'm making some progress formatting the header row of my Excel export, but I'd really like to have the columns automatically adjust to fit the width of the content.
Here's my OnInfrastructureExporting event handler:
protected void grdControls_InfrastructureExporting(object sender, GridInfrastructureExportingEventArgs e)
{
var colCount = e.ExportStructure.Tables[0].Columns.Count;
// Set the header style for all columns
ExportStyle headerStyle = new ExportStyle();
headerStyle.ForeColor = Color.White;
headerStyle.BackColor = Color.Blue;
headerStyle.Font.Bold = true;
for (var i = 1; i <= colCount; i++)
{
e.ExportStructure.Tables[0].Cells[i, 1].Style = headerStyle;
e.ExportStructure.Tables[0].Columns[i].Width = 200; // Would like auto-width !!
}
}
I've seen similar threads but they are related to export formats other than Xlsx.
Any idea how I can accomplish auto-fit using the above handler? Or do I need to do that elsewhere?
Thanks for any advice.
Jim
I am having a problem validating the Async File upload control, using a Custom Validator and JavaScript.
The JS I'm using is:
function isAttachmentValid(sender, args) {
var upload = $find("<%= RadUpload1.ClientID %>");
args.IsValid = upload.getUploadedFiles().length != 0;
}
This works perfectly fine if I submit the form right away, but if I save the form and come back to it upload.getUploadedFiles().length always = 0 and validation fails.
I should also note that I don't have access the server-side code so validation must be done on the client.
Hi,
I'm programmatically creating a grid on the server side, and would like to use the HeaderContextMenu to allow filtering (particularly, we're interested in the 2-step filtering provided in the menu). Because the other options are available elsewhere or are not used in our system, we'd like to have the context menu simply show the "filter" submenu. I can remove elements of the context menu using this code:
this.grid.HeaderContextMenu.ItemCreated += (ss, aa) =>
{
if (aa.Item.Value == "FilterMenuParent" || (aa.Item.Parent is RadMenuItem && (aa.Item.Parent as RadMenuItem).Value == "FilterMenuParent"))
{
}
else
{
aa.Item.Remove();
}
};
In the attached image, the red-bordered menu is what we'd like to appear when right-clicking a column title.
Is there a way for me to do this? I've tried hooking into various menu events to replace the menu items with the filter menu, but it seems like it's not possible. The closest I can get so far is the top-level menu simply having the "Filter" option, which opens the Filter Menu. I'd like to skip that first step and just have the filter menu appear.
<
telerik:RadWindow
ID
=
"RadWindow1"
runat
=
"server"
OpenerElementID
=
"RadButton1"
>
<
ContentTemplate
>
<
br
/>
<
br
/>
<
telerik:RadComboBox
ID
=
"RadComboBox1"
runat
=
"server"
OnClientSelectedIndexChanged
=
"OnClientSelectedIndexChanged"
>
<
Items
>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"Item A"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"Item B"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"Item C"
/>
</
Items
>
</
telerik:RadComboBox
>
</
ContentTemplate
>
</
telerik:RadWindow
>
<
telerik:RadButton
ID
=
"RadButton1"
runat
=
"server"
Text
=
"Open RadWindow"
>
</
telerik:RadButton
>
<script type=
"text/javascript"
>
function
OnClientSelectedIndexChanged(sender, args) {
alert(
"OnClientSelectedIndexChanged Fired"
);
}
</script>
Hello,
I would like to change the binding of the ItemTemplate of a GridTemplateColumn in code behind. I am trying to use the click event of a button outside of the grid to change the binding. On the button click, I would like change the Text value of the ItemTemplate to '<%#Eval("Choose")%>'. Please assist.
APSX:
<
telerik:GridTemplateColumn
HeaderText
=
"SSA Decision"
SortExpression
=
"SSA_Decision"
UniqueName
=
"SSA_Decision"
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lblSSADecision"
runat
=
"server"
Text='<%#Eval("SSA_Decision")%>' />
</
ItemTemplate
>
<
EditItemTemplate
>
<
telerik:RadComboBox
runat
=
"server"
ID
=
"cboSSADecision"
Skin
=
"WebBlue"
Width
=
"105px"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"Yes"
Value
=
"True"
/>
<
telerik:RadComboBoxItem
Text
=
"No"
Value
=
"False"
/>
<
telerik:RadComboBoxItem
Text
=
"Please Choose"
Value
=
"Choose"
Selected
=
"true"
/>
</
Items
>
</
telerik:RadComboBox
>
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
Thanks!
Hi,
I am having issues when I click on Enter key to goto the new line and then when I use BackSpace key it does not work.
I see that its working in your demo.
I have the latest Telerik web.ui/design/skin dlls.
Thanks for your help!
==============================
This is my RadEditor control code
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<div class="demo-container size-wide">
<telerik:RadEditor ContentAreaMode="Div" runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" EditModes="Design" ToolTip="XML Editor"
Height="515px" CssClass="centered-editor" Width="99%" Skin="WebBlue" NewLineMode="Br" OnClientPasteHtml="OnClientPasteHtml" StripFormattingOnPaste="NoneSupressCleanMessage" StripFormattingOptions="NoneSupressCleanMessage">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Print" Text="Print" />
<telerik:EditorTool Name="Cut" Text="Cut" />
<telerik:EditorTool Name="Copy" Text="Copy" />
<telerik:EditorTool Name="Zoom" Text="Zoom" />
</telerik:EditorToolGroup>
</Tools>
<ImageManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></ImageManager>
<CssClasses>
<telerik:EditorCssClass Name="Red Text" Value=".redText"></telerik:EditorCssClass>
<telerik:EditorCssClass Name="Table Class" Value=".table"></telerik:EditorCssClass>
<telerik:EditorCssClass Name="Div Class" Value=".div"></telerik:EditorCssClass>
<telerik:EditorCssClass Name="Image Class" Value=".image"></telerik:EditorCssClass>
<telerik:EditorCssClass Name="List Class" Value=".listSquare"></telerik:EditorCssClass>
</CssClasses>
</telerik:RadEditor>
function OnClientPasteHtml(editor, args) {
var commandName = args.get_commandName();
// Paste command is the one that handles plain paste, e.g., when Ctrl+V is used.
if (commandName === "Paste") {
var htmlToBePasted = args.get_value(); // Get the value to be pasted
// Use Regex to strip <strong>, <em> and <span> tags.
htmlToBePasted = htmlToBePasted.replace(/^( )+/, '');
// Set the processed content to the arguments.
args.set_value(htmlToBePasted);
}
}
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below. |
|