I am trying to add a red asterisk after the 'AddNewRecordText' button with in RadGrid. Here is the code. The red asterisk should show after 'Add Award' text. Could you please let me know if there are any suggestions? Thank you.
<telerik:RadGrid ID="RadGrid1" AutoGenerateColumns="false" Width="99%"
runat="server" MasterTableView-AllowAutomaticInserts="true" GridLines="None" Skin="Default"
ShowFooter="false" ShowStatusBar="false">
<MasterTableView Width="100%" DataKeyNames="c_id" CommandItemDisplay="Top"
CommandItemSettings-ShowAddNewRecordButton="true">
<CommandItemSettings AddNewRecordText="Add Award *" ShowAddNewRecordButton="true" />
RadGrid prerenders AddNewRecordText as a <a> element. and you cannot add different styles to one element.
To change that default behavior, you will have to use CommandItemTemplate.
This demo should be a good start for you.
Another simple approach, is that you always can change any style on your page with jquery.
this should work for you (works for me, probably you will have to change ids):
$('a[id$="InitInsertButton"]') //this means: find all <a> elements that have id ending with "InitInsertButton"
.first() //Get the first element to be sure.
.append('<span style="color:red"> *</span>') //Add text inside a attribute.
You will have to add this code on document.ready().
Here's a small jsfiddle to see it in action: http://jsfiddle.net/rXhnM/
So I'm late to the party again, but you can get a reference to that control on the server side:
protected void HandleGridItemCreated(object sender, GridItemEventArgs e)
{
if(e.Item is GridCommandItem)
{
var button = e.Item.FindControl("SaveChangesIcon") as Button;
var link = e.Item.FindControl("SaveChangesButton") as LinkButton;
button.Text += "<span class='red'>*</span>";
}
}
I needed to add a bit of javascript to run when clicked so this is how I managed to pull it off. I imagine adding * and appending to the text property yield the result you're looking for. We're on the 2016 version of the Telerik control set.
Related
Simple question really. How can I change the background color of the CKeditor from C#?
How do I get an instance of CKeditor in C#? Probably I cannot?
I have a gridview with lots of textareas (asp:textbox) controls all using the CKeditor, via the CSSclass property, and it works great! But now I want to dynamically change one or two, or all of their background colours to something like LightYellow.
I've tried to directly change the background of the asp:textbox, but it doesn't work of course because that's "hidden" from the CKeditor itself.
Any other tips please?
UPDATE
I've downloaded the CKEditor for ASP.net and it too does not work, as it also creates a textarea element in the background automatically - effectively the same as using the CKeditor natively with CSSclass="".
Referencing the control in C#, I can do that now, which is great so I can get the data and use it in my database, but I still cannot change the CKeditor's background. The CKeditor's BODY element (tested via FireBug), is the one I need to change, but how from C#?
Thanks again
First, be sure you have installed both CKEditor and CkeditorForASP.NET packages via Nuget.
Afterwards, create an editor.css file which will contain only editor related styles such as:
.lightYellow {
background-color: lightyellow;
}
On your grid view, bind to OnRowDataBound event and specify base path of CKEditor scripts correctly.
<asp:GridView ID="EditorGridView" runat="server" OnRowDataBound="EditorGridView_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<CKEditor:CKEditorControl ID="Editor" runat="server" BasePath="~/Scripts/ckeditor" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Then you will be able to change the body color as follows:
if (e.Row.RowType == DataControlRowType.DataRow)
{
CKEditorControl editor = (CKEditorControl)e.Row.FindControl("Editor");
editor.BodyClass = "lightYellow";
editor.ContentsCss = ResolveUrl("~/Content/editor.css");
}
I'm writing an application in C#. I would like to replace the value for the TEXT property after the user clicks (focuses) on a textbox. I would like to set the TEXT value to be blank instead of the words "ENTER NAME HERE" when they click to edit the textbox.
Front-end:
<asp:TextBox Text="ENTER NAME HERE" OnClick="MyTextboxID_OnClick" ID="MyTextboxID" runat="server"></asp:TextBox>
Code-behind:
protected void MyTextboxID_OnClick(object sender, EventArgs e)
{
MyTextboxID.Text = "";
}
I tried to find the answer to this question but the answers didn't quite match what I wanted to do.
I was hoping C# had something similar to Javascript's "OnClick" or "OnFocus" events. I added the OnClick event to the textbox for illustration purposes. This OnClick event doesn't work.
Thank you in advance for your help!
Remember that ASP.NET is primarly server-side. Actions that run in C# require a post-back to the server. The impact of this on a page can be mitigated somewhat by using AJAX, but this is why you don't see an "OnClick" event off the ASP control.
However, you can still use the Javascript "OnClick" event. Since Javascript runs on the client, and the interaction in this instance is entirely handled on the client, you should just use that.
If you are not comfortable using Javascript, you might want to look at TextBoxWatermark server side control.
It is available NuGet.
<asp:TextBox OnClick="MyTextboxID_OnClick"
ID="MyTextboxID" runat="server">
</asp:TextBox>
<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
TargetControlID="MyTextboxID"
WatermarkText="ENTER NAME HERE"
WatermarkCssClass="watermarked" />
You should simply use the following Placeholder="Enter text here."
Option One:
<asp:Textbox id="txtName" runat="server" placeholder="Enter name here." />
Option Two:
$("#<%= txtName.ClientId %>").setAttribute('placeholder', 'Enter name here.');
$("#<%= txtName.ClientId %>").attr('placeholder', 'Enter name here.');
For the Javascript implementation, you would simply place that in your View and wrap it in: <script type="text/javascript"></script>. Those are the ideal approaches to display text which clears on focus.
You could also utilize the Tooltip. Hopefully these examples assist you. Important note, I have no issues with compatibility in IE 8 with the Placeholder. Also these approaches won't force a Postback which can occur due to Server-Side. Which would force you to either do a Postback or implement a Update Panel / Ajax to hide the Postback.
Plugin: https://github.com/mathiasbynens/jquery-placeholder
Why don't you use the place holder attribute and not have to worry about replacing the text at all. This would show when the text box is empty but disappear on focus
I have a telerik grid showing 2 levels of details, and for the first level, I want to completely remove the header.
I tried using styles.. i.e.:
column.Bound(x => x.Name)
.ClientTemplate("<#= Name#>")
.HeaderHtmlAttributes( new { style="display:none;"})
But I still get a "gray header thing" over the expand pluse, and it still shows an anoying white layer...
How to completely remove it?
Nevermind that, I found a solution although would have prefered to do it via razor than do it through a jquery/javascript hack, but with Telerik, you got to expect that!
Seems a telerik grid's header is wrapped in a thead element with a t-grid-header css class.
The styles you apply to a column with column.Bound(...).HeaderHtmlAttributes are only applied to the th element of the thead.
I just added this at the end of my .cshtml file and the header was gone.
<script type="text/javascript">
$(".t-grid-header").css('display', 'none');
</script>
<MasterTableView ShowHeader="false">
<Columns>
//etc
</Columns>
</MasterTableView>
In an ajaxified RadGrid I want two buttons to cause a postback (bypass Ajax) and execute some back-end code. Here's what I have so far...
Buttons (just showing one for simplicity):
<telerik:GridTemplateColumn HeaderText="Actions">
<ItemTemplate>
<asp:ImageButton ID="btnEdit" runat="server" OnClientClick="realPostBack();" ImageUrl="~/images/icon_edit.png" style="display: inline-block" ToolTip="Edit" CommandName="fbEdit" />
</ItemTemplate>
</telerik:GridTemplateColumn>
Javascript function I'm using to disable the postback:
<script type="text/javascript">
function realPostBack(eventTarget, eventArgument) {
$find("<%= RadAjaxPanel1.ClientID %>").__doPostBack(eventTarget, eventArgument);
}
Code-behind I want to execute:
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
if (e.CommandName == "fbEdit")
{
//grab variables from row's cells
string userID = e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["UserID"];
string userName= e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["UserName"];
string userEmail = e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["UserEmail"];
//DO SOME PROCESSING STUFF
}
if(e.CommandName == "fbDelete")
{
//delete record
}
}
So the post back does indeed occur, but my code never fires. I'm guessing it's because the event is tied to the grid and not to buttons im "un-ajaxifying", but I went this way because I NEED to capture the values of some of the cells in the row that the button was clicked.
Maybe I can rework this to use the buttons onClick Event, but I would still need to capture those values.
Can anyone help?
From the look of things you are attempting to execute code in the OnItemCommand event of the RadGrid, but it seems like you might be making things a bit over-complicated. Why not use a GridButtonColumn, set the ButtonType to ImageButton and then set the same CommandName as you do above? As long as you're subscribing to the OnItemCommand event this should trigger everything to get called and your conditional check for e.CommandName == "fbEdit" should be hit as well.
For an example of how to use this RadGrid specific column (in a similar manner) you can check out this demo.
In you need to add bellow code in PageLoad Event.
if (!IsPostBack)
{
RadGridName.Rebind();
}
thats it.
Im using aspxPopupControl with AspxGridView in it. Is it possible to set control to fill all popup cause now when I try to resize that popup there is a lot of free space at the top and bottom when I increase width od the popup. Thanks for help
Did you take a look at the new ASPxGridLookup control? I would assume that it is just what you need.
Also, see the online documentation of the ASPxGridLookup control.
Gruber,
Try the approach mentioned in this issue Q253230:
<dx:ASPxHtmlEditor ID="ASPxHtmlEditor1" runat="server" Height="100%" Width="100%" ClientInstanceName="HtmlEditorBody" ResizingMode="Postponed"></dx:ASPxHtmlEditor>
<dx:ASPxPopupControl ...>
<ClientSideEvents
AfterResizing="function(s, e) {
HtmlEditorBody.SetHeight(s.GetHeight() - 25); HtmlEditorBody.SetWidth(s.GetWidth() - 25);
}"
BeforeResizing="function(s, e) {
HtmlEditorBody.SetHeight(MIN_SIZE);
HtmlEditorBody.SetWidth(MIN_SIZE);
}"
/>
While that code is for the ASPxHtmlEditor, you can adapt it for the ASPxGridView.