How to change background of CKeditor from code behind C# - c#

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

Related

How To Show ListView Data Source As Images Slider On ASCX?

I am working on a DotNetNuke project where I have to show some images from the SQL server database on the front end as a slider. I have enclosed the slider markup in asp:ListView control on ASCX page and have assigned a dataset as the data source for the asp:ListView in my code behind file.
The code is working fine but I need the images to be shown as a slider. Currently, the 2nd image is shown right at the bottom of the first image and 3rd image after the 2nd one. I want them like a slider which slides from right to left or vice versa with navigation buttons on the left and right side.
Here is my ASCX code:
<asp:ListView ID="lvFeaturedSlider" runat="server" class="full">
<ItemTemplate>
<div class="home-slide">
<a href="#">
<span class="project-title-large">MARRIOT HOTEL LOUNGE</span>
<img src="http://localhost:52829<%# Eval("Image") %>" alt="">
</a>
</div>
</ItemTemplate>
</asp:ListView>
And here is my code behind code:
private void BindSlider()
{
ProjectsController objController = new ProjectsController();
DataSet ds = new DataSet();
ds = objController.GetFeaturedProjectSlider();
if (ds.Tables[0].Rows.Count > 0)
{
lvFeaturedSlider.DataSource = ds.Tables[0].DefaultView;
lvFeaturedSlider.DataBind();
}
else
{
lvFeaturedSlider.DataSource = null;
lvFeaturedSlider.DataBind();
}
}
The navigation buttons on left and right are appearing when I hard code the markup outside ItemTemplate. But upon binding, they are not appearing and images are also not showing like a slider. I have tried enclosing the code inside ItemTemplate in a foreach statement but I can't figure out the exact format of how the items are located on ASCX page.
I know that stackoverflow frowns on answering questions by changing the subject, but ... I think that's appropriate here.
First question: Are you doing this in your theme(skin) file? If you are that's not the normal way of doing this.
Second question: Are you storing images in the DNN database? Generally that's frowned on, mainly for performance issues.
Now the right way to go about this is to install a module in your DNN installation and use it's UI and tools to configure the slider. All of that should be part of the module. There are some very good slider modules, both commercial and open source. Google, or check the DNN Store.
Now to your question. Your repeater creates a series of divs on your page, one for each image. That is why you see all of the images in a vertical layout. If you want to "slide" them, you need to add some functionality to do that. They way that is done is by adding some javascript or jQuery to turn that set of divs into a slider. Google 'jquery slider' for a lot of choices.
If you use a module that's already been developed, all of this stuff will have been done for you. You only need to supply the images, and perhaps other stuff, too.

C# - How to change value of textbox on focus

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

create label and put this control in href tag based on certain conditions

Can any one tell me how to create a label and put it in href tag using c# code.
this is because, I need to use a single asp label control for both as label and link label.
So I want it to be programatically set based on certain parameter values. and this is ausercontro as well. Note: I cannot change the logic because this is client's requirement
regards,
Sivajih S.
Use asp:HyperLink control !
In your aspx ,
<asp:HyperLink ID="yourHyperLink" runat="server" >
</asp:HyperLink>
In your cs ,
if(....yourCondition...)
{
yourHyperLink.Text = "YourText";
yourHyperLink.NavigateUrl = "YourURL";
}

Adding style to CommandItemSettings RadGrid button

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.

Remove header from telerik grid (RAZOR)

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>

Categories