I am using Kendo MVC in C# project.
I am trying to add k-danger class to kendo button. I don't know why but it's not working where k-primary class works.
This is my buttons code:
<button type='button' id='Button1' onclick='Delete(#=ID#)' class='k-button k-button-icontext k-grid-add k-danger'> // This is just showing the default button
<span class='k-icon k-i-trash'></span>
</button>
<button type='button' id='Button2' onclick='Info(#=ID#)' class='k-button k-button-icontext k-grid-add k-i-pencil'> // This is showing the primary button
<span class='k-icon k-i-pencil'></span>
</button>
The icons works perfectly.
I searched everywhere but I found nothing about this. So I am concluding that there is no k-danger class, I don't know if I am wrong.
If no k-danger is available is there anything else I can use instead of k-danger?
I can provide full code if it's needed.
danger (or actually btn-danger) is a Bootstrap-specific CSS class name and indeed, it does not exist in the Kendo UI stylesheet. There are two options that I would suggest:
Assuming that you have the Bootstrap stylesheet registered, try using the btn-danger CSS class of Bootstrap. The downside is that you will likely stumble upon Kendo UI vs Bootstrap style conflicts and the resulting button appearance will be a mix between the two libraries' styles.
Create your own Kendo UI "danger" button styling. For example, add the following CSS rule to a stylesheet, which is registered after the Kendo UI stylesheet:
.k-button.k-danger,
.k-button.k-danger:active {
background-color: #f00;
color: #fff;
border-color: #f00;
}
k-danger does not have any style in kendo css,
You need to create your custom style to get your result or just add bootstrap css and add "btn btn-danger" class in you Danger Button.
Check this JsBin Demo
Js Bin Example
By default kendo provide you with k-error-colored as shown here.
The other handy classes are :
k-info-colored
k-success-colored
k-warning-colored
You just have to use it with k-button
This jsfiddle shows how it render.
Related
Is there a way i can add below css as inline css using C# from codebehind
CSS
.slide .btn_six::after {
content: " ECHNOLOGY";
}
HTML
<div class="slide">
<a target="_blank" href="#" class="post-badge btn_six">T</a>
</div>
I have to list multiple articles and each article belongs to a category and each category i have to show in an animated manner where only first caharacter of word will be visible and when user hovers over it it then reveal whole category name as shown in template link.
I want to do this using C# from the codebehind file itself as it will be easy
I looked for example but could not find any relevant example
Can't be done.
A hover event is only possible to do from the client side with JavaScript or by using CSS :hover selector. While it could be possible to wire it up to send a request back to the server to write a segment of HTML and then replace the HTML element in JavaScript, this would not be very practical. It is much simpler just to write the class on the client side without making a round trip to the server or better yet, just set a CSS :hover and be done with it.
I have a placeholder whose content (table and buttons) is generated dynamically based on the user choice. And I wanted to make the table vertically scrollable, and while doing so I have faced this unusual CSS behavior for me:
So I have the place holder as follow:
<div id="srollableTableDiv">
<asp:PlaceHolder ID = "roundingProblems_ph" runat="server" />
</div>
and I am applying the following CSS on the div:
#srollableTableDiv { height:500px; overflow:scroll; border:1px solid red; }
Now what happens is that when the table is generated, the CSS seems not to be working at all, but when I change a value in the CSS (for example make the border color to red or blue) the whole CSS would work in the browser without refreshing the page (I am using VS and chrome).. but once I refresh the page the CSS stops working again until I change CSS to another value!
Note: I am using bootstrap.
Could anyone explain what is the issue here?
Thank you very much.
I'm in dire need of assistance.
I need to add a custom button to an HtmlEditorExtender control, but I'm lacking the know-how to actually do that.
I've searched throughout this forum but no information was relevant or whatsoever.
Should someone be so kind to help, I need an example to help me sort this issue out.
Thanks in advance.
One possibility is to add it to the DIV containing the buttons using javascript. I do it using jQuery.
If you inspect the DIV in Firefox, you'll notice that it has a class named 'ajax__html_editor_extender_buttoncontainer'. Knowing this class allows you to select the container and add your own custom button to it.
To do so, add the following jQuery script in the HTML below your HtmlEditorExtender:
<script language="javascript" type="text/javascript">
// retrieve button container div using its class
$btnContainer = $(".ajax__html_editor_extender_buttoncontainer");
if ($btnContainer.length == 1) {
// append your custom button to the collection of elements within the button container div
$btnContainer.append("<input id=\"HtmlEditorExtender_YourButtonName\" class=\"ajax__html_editor_extender_YourButtonName\" type=\"button\" name=\"YourButtonName\" title=\"YourButtonName\" style=\"width: 101px; height: 21px;\" unselectable=\"on\"></input>");
}
</script>
To style the button, create images for it and add the following to your style sheet:
/* custom button */
.ajax__html_editor_extender_YourButtonName {
background: url('/images/YourButtonName_off.png') no-repeat scroll;
cursor: pointer;
display: block;
float: right; /* default is left */
border: medium none;
}
.ajax__html_editor_extender_YourButtonName:hover {
background: url('/images/YourButtonName_on.png') no-repeat scroll;
}
The appearance of your button is of course up to you, but the result may look something like this:
Finally, to add functionality, add a click event to elements that have the class you specified. You can do this in your external .js file.
If you want to access the html of the textbox, inside that click you will want to retrieve the html of the first of two divs that have the attribute contenteditable='true'. This is the design view of the HtmlEditorExtender.
Add the following to your .js file:
// click event for the custom button
$("body").on("click", ".ajax__html_editor_extender_YourButtonName", function (e) {
var $editorDiv = $("div[contenteditable='true']").first();
alert($editorDiv.html());
})
There's probably a more efficient way to get the design view but it'll work.
I am using the jQuery plug in contentcarousel. It is a good plugin and all but I need the ability to dynamically create a certain number divs according to the user.
To achieve this I am using an <asp:panel> and then running a Literal & foreach in C# to populate the panel. The problem comes in when the <asp:panel> is used.
It seems as if the jQuery plugin can only work if the divs occur in a certain order.
ie.
<div id="ca-container" class="ca-container">
<div class="cawrapper">
<div class="ca-item ca-item-2">
<div class="ca-item-main">
When the panel is used, then the order becomes
<div id="ca-container" class="ca-container">
<div class="cawrapper">
<div id="panelinfo">
<div class="ca-item ca-item-2">
<div class="ca-item-main">
And the plugin stops working. At least I am assuming so due to the fact that the arrows dont show up, none of the buttons work, etc.
Does anyone know if there is a way around this? Maybe a way to "hide" the div that the panel becomes?
It sounds like you want to have a control that acts like a Panel in server side code, but instead of being rendered as a div just plops all of whatever would have been inside of it without adding anything "extra". That's pretty much the definition of an asp:Placeholder. Just use that instead of a Panel.
Try moving your JQuery code into window.load. I'm assuming you have your jquery in document.ready which will fire the second the dom is ready.
$(window).load(function(){/*Your code*/}
Ok,
i have a fully rendered dynamic form ( i do not know the content of the form, it is provided to my via a webservice )
i used asp.net RequiredFieldValidator for validation, because i read in this article that we could dynamically switch validators on and off depending if the field is visible or not
with the ValidatorEnable(val, enabled) function.
though now that i got the form rendered, i'm running into a bit of trouble with this javascript, as i don't want to put it in the aspx file itself, (don't have a control there anyway since the form is build up in codebehind from the webservice data...)
so i took a look at the clientId and it turns out the validator's client ID is the id of the span it renders to.
so i tried running this in firebug to test if i could enable / disable one of those validators, but that seems not to be possible, a jQuery span element does not have a property to enable it.
ValidatorEnable($("#ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_reqAnswer_373ac8b7_8da9_467b_b9b4_d586e45a7504"), false);
and the html that goes with this
<div class="question-container question-odd" id="ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_question-373ac8b7-8da9-467b-b9b4-d586e45a7504">
<div class="question-meta">
<h3 class="validation-label">Which club have you visited?</h3>
<span style="display: block; margin-bottom: 10px; margin-top: 5px;" class="error validation" id="ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_reqAnswer_373ac8b7_8da9_467b_b9b4_d586e45a7504">Please fill out this field.</span>
</div>
<input type="text" class="answer-container text" id="ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_answer_373ac8b7_8da9_467b_b9b4_d586e45a7504" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$MasterWithNavContent$Poll_4$answer_373ac8b7_8da9_467b_b9b4_d586e45a7504">
</div>
Does someone know where i'm going wrong here?
maybe I'm to quick to jump from the serverside ClientId to the <span> which the RFV renders into? but they seem exactly the same.
hope someone can point me in the good direction!
Maybe a better approach would be to loop through the client-side array of validators (Page_Validators) and find the validator which you want to disable.
See also this MSDN page and this codeproject article for more information.
Perhaps a more appropriate way to do this would be
ValidatorEnable($("<%= reqAnswer.ClientID %>")[0], false);
Using <%= reqAnswer.ClientID %> avoids having to guess at or hard-code the client-side ID of the validator. Adding [0] after the jQuery $() gets the actual validator DOM element instead of the jQuery wrapper.
Source for [0]