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>
Related
I am displaying button on jquery page load event but it is not working. After the page is rendered, it is not visible.
It works fine if i set the visibility in code behind Page Load event.
Jquery
function pageLoad() {
$('#btnSwitchDistributor').css({ 'visibility': 'visible', 'display': 'inline-block' });
}
Html
<asp:Button ID="btnSwitchDistributor" runat="server" Text="Switch Distributor" Visible="false" />
According to MSDN, when you set Visible="false" in your server-side code then the element is not rendered to the client at all. Which means your button isn't "invisble" on the resulting page, it doesn't exist on the resulting page. No JavaScript code can interact with an element that isn't present.
It sounds like instead you want to apply a style to the control:
<asp:Button ID="btnSwitchDistributor" runat="server" Text="Switch Distributor" style="display:none;" />
Aside from that, there are two two potential issues here which I can't necessarily confirm from the content of the question, but which you'll want to check...
The ID value you're looking for is the server-side object's ID. This may not necessarily be the client-side id of the resulting HTML element. Examine the page source to see the client-side id. If it's different then you may need to set it explicitly using the ClientID property.
Do you ever call pageLoad() in your JavaScript code? If not then, well, you'd need to do that. I assume in the document.ready event handler? For jQuery that may be as simple as: $(pageLoad)
Just remove the visible html attribute and the JQuery css.
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 have a checkbox in my formview which I want to access in JS to do some enable/disable for textboxes.
This is what I have:
<script type="text/javascript">
$(document).ready(function () {
$('#<%=FormView1.FindControl("chkMap").ClientID%>').change(function () {
if ($(this).is(":checked")) {
}
$('#textbox1').val($(this).is(':checked'));
});
});
With this code, nothing happens and no error is shown in firebug console. Am I doing something wrong? Thanks, Laziale
I have a few guesses. The first one is probably wrong but I had to point it out. The code you posted does not have an end script (</script>) tag. You should check that first.
Second guess is, for some reason <%=FormView1.FindControl("chkMap").ClientID%> this might not be outputting the ID of that control. Have you tried to 'view source' of that page and made sure that the ID is as it should be? Maybe you've changed the ID of that checkbox or something.
Third guess is the way you reference the textbox (#textbox). This is an ASP.NET WebForms page. Your checkbox is a server control (<asp:CheckBox ... />). Are you sure you haven't created the textbox like <asp:TextBox runat="server" ID="textbox1" />? If you have, you would need to write the code like:
$('#<%=FormView1.FindControl("textbox1").ClientID%>').val($(this).is(':checked'));
to reference that textbox control via JavaScript.
I'm suggesting all these because the JS code works fine. I've created a JSFiddle and tested it.
Here's the fiddle. link
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.
I added this in the head section of my page as told in the article..added the following two additional lines to get rid of the background image(RADEditor on my page is inheriting master page's bg image)
.reContentCell
{
background-image:none;
background-color:White;
}
.reDropDown{color:Aqua;}
Why are the changes not taking place?
[EDIT]
added !important to both the properties above...still can't see no change
[EDIT]
I am using RADEditor in like MANY pages soo was wondering if I can do some coding in the Master Pages ..like in Master Page I can detect if there's some radEditor in any of the ContentPlaceholders..then I can add the CSS file to be used for that Editor so it doesn't inherit master page's CSS properties...so how do i go about it ?? How do I search for radEditor in Content pages and then add CSS to it ???
[EDIT]
I have already tried the following :-
ie adding CustomSkin's CSS classes to Editor
<telerik:RadEditor ID="Editor1" EnableEmbeddedBaseStylesheet="true" runat="server">
<CssFiles>
<telerik:EditorCssFile value="Skins/CustomSkin/Editor.CustomSkin.css"/>
<telerik:EditorCssFile value="Skins/CustomSkin/Editor.CustomSkin.css"/>
<telerik:EditorCssFile value="Skins/CustomSkin/Editor.CustomSkin.css"/>
</CssFiles>
</telerik:RadEditor>
In the page's head section :-
I gave reference of CSS files...now its working fine..Editor is not getting screwed up or anything coz of Master page's CSS ...BUT what I want is some way to do this in the master page's code itself like I said above..plz help..thnx
[EDIT]
Master page's code behind :-
if(ContentPlaceHolders.Contains("what to type here??")){}
Intellisense is not showing Telerik RadEditor option in the drop down list
Is there some other way to add Editor's CSS files programmaticaly in master page's code behind??
use
.reContentCell, .reContentCell iframe
{
background-color:#FFFFFF !important;
}
because the original css file is adding a background colour to both the cell and the iframe.