I want to add a new navigation button in telerik radwizard(reference). Is there any way to do so in ASP.NET, I read all the documents shared by telerik but couldn't find a way to achieve it. Any help would be appreciated.
I also had a similar requirement, but was not able to find a out of the box solution to include a custom navigation button for the Telerik RadWizard.
Please in-cooperate the the below JavaScript, which would to add a custom button to the navigation button area:
<telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
<script type="text/javascript">
/* NOTE: This code block is inserted at this location, but not in the main Script block within RadCodeClock at the begining of this page due to the the below error;
'JavaScript runtime error: '$telerik' is undefined'
In order to avoid such errors, move the script tag below the declaration of the ScriptManager.
*/
var $ = $telerik.$;
var oldInitializeEvents = Telerik.Web.UI.RadWizard.prototype._initializeEvents;
Telerik.Web.UI.RadWizard.prototype._initializeEvents = function () {
/*var myLi = $('<li>', { "class": "rwzLI rwzRight" }).appendTo('.rwzNav'); // Add the button adjacent to Next/ Previous*/
var myLi = $('<li>', { "class": "rwzLI" }).appendTo('.rwzNav'); // Add the button adjacent to Cancel/ Submit
var spanElement = $('<span>').addClass("rwzText").text("Save");
$("<button>", {
"id": "rwCustNavBtn_Save", "class": "rwzButton", "type": "button", click: function myfunction() {
CustNavBtn_Save_OnClick(); // Save the Grant
return false;
}
}).append(spanElement).appendTo(myLi);
oldInitializeEvents.call(this);
}
</script>
Note:
Ensure to include the above JavaScript tag below the declaration of the ScriptManager, to avoid runtime errors.
rwzRight CSS class determine the location of the custom button and make use it based on your requirement (refer the comments within the script tag)
Hope this is what you are after and Mark as Reply if so. Good luck!
Source: RadWziard navigation button templates/control
Related
I want to capture which button is clicked in page load method of code behind file.
Button is user control button and It does not post back. Since it used by many other forms, I don't want to changes that button.
I tried this
Dim ButtonID As String = Request("btnRefresh.ID")
But it doesn't work.
Is it possible to know without touching in user control and using Javascript?
Thank you
As described here How to check whether ASP.NET button is clicked or not on page load:
The method: Request.Params.Get("__EVENTTARGET"); will work for
CheckBoxes, DropDownLists, LinkButtons, etc.. but this does not work
for Button controls such as Buttons and ImageButtons
But you have a workaround, first of all you have to define a hidden field in the Parent Page. In this field you will store which button inside the user control was clicked using javascript/jquery. And then in your Parent Page Page_Load method you just read the hiddenField.Value property:
JQuery
1) Add listener to every input type submit button:
$(document).ready(function () {
$("input[type=\"submit\"]").on("click", function () {
alert(this.name);
$("#hiddenField1").val(this.name);
});
});
2) [Better one] Add listener to some indentificable div inside the user control and delegate the event to child inputs like this:
$(document).ready(function () {
$("#someElementOfUserControl").on("click", "input[type=\"submit\"]", function () {
alert(this.name);
$("#hiddenField1").val(this.name);
});
});
Javascript
Since everything done with JQuery can be done with Javascript you can do the following (i will not write both samples, just one):
function handleClick(event) {
alert(event.target.name);
document.getElementById("hiddenField1").value = event.target.name;
}
var inputsInUC = document.getElementsByTagName('input');
for (i = 0; i < inputsInUC.length; i++) {
inputsInUC[i].addEventListener('click', handleClick, false);
}
Remember to define this javascript after all your html elements.
EDIT:
Also, for the completeness of the answer let me tell you that the proper way in case you can change the user control behaviour is to use events as described here How do i raise an event in a usercontrol and catch it in mainpage?
I've been looking around and have not been quite able to get a clear path to the 'angular' way of accomplishing the following. What I'm trying to achieve is displaying a tooltip with information when hovering over a link within an ng-repeat loop. Based on my research, I understood that this is part of the view, and so I should probably handle this in a directive. So, I created an attribute directive called providertooltip. The html declaration is below:
<table>
<tr id="r1" ng-repeat="doc in providers">
<td>
<a providertooltip href="#{{doc.Id}}" ng-mouseover="mouseOverDoc(doc)" ng-mouseleave="mouseLeave()">{{doc.FirstName}} {{doc.LastName}}</a>
</td>
</tr>
</table
<div id="docViewer" style="display:hidden">
<span>{{currentDoc.FirstName}} {{currentDoc.LastName}}</span>
</div>
In the module, I declare my directive, and declare my mouseOver and mouseLeave functions in the directive scope. I also 'emit' an event since this anchor is a child scope of the controller scope for the page. On the controller function (docTable ) which is passed as a controller to a router, I listen for the event. Partial implementation is seen below:
app.directive("providertooltip", function() {
return {
restrict : 'A',
link: function link(scope, element, attrs) {
//hover handler
scope.mouseOverDoc = function(doc){
scope.currentDoc = doc;
scope.$emit('onCurrentDocChange');
element.attr('title',angular.element('#docViewer').html());
element.tooltipster('show');
//docViewer
};
scope.mouseLeave = function() {
element.tooltipster('hide');
}
}
}});
function docTable(docFactory, $scope, $filter, $routeParams) {
$scope.$on('onCurrentDocChange',function(event){
$scope.currentDoc = event.targetScope.currentDoc;
event.stopPropagation();
});
}
Ok, so here is my question. All of the works as expected; Actually, the tooltip doesn't really work so if someone knows a good tooltip library that easily displays div data, please let me know. But, what I'm really confused about is the binding. I have been able to get the tooltip above to work by setting the title ( default tooltip behavior ), but I can see that the binding has not yet occured the first time I hover of a link. I assume that the onCurrentDocChange is not synchronous, so the binding occurs after the tooltip is displayed. If I hover over another link, I see the previous info because as I mentioned the binding occurs in an asynchronous fashion, i.e., calling scope.$emit('onCurrentDocChange') doesn't mean the the parent scope binds by the time the next line is called which shows the tooltip. I have to imagine that this pattern has to occur often out there. One scope does something which should trigger binding on some other part of the page, not necessarily in the same scope. Can someone validate first that the way I'm sending the data from one scope to the other is a valid? Moreover, how do we wait until something is 'bound' before affecting the view. This would be easier if I let the controller mingle with the view, but that is not correct. So, I need the controller to bind data to the scope, then I need the view to 'display a tooltip' for an element with the data. Comments?
To go the angular way correctly start your directive like:
...
directive('showonhover',function() {
return {
link : function(scope, element, attrs) {
element.parent().bind('mouseenter', function() {
element.show();
});
element.parent().bind('mouseleave', function() {
element.hide();
});
}
...
Or start with http://angular-ui.github.io/ link to go the angular-way UI. Look into the bootstrap-ui module - pure angular bootstrap widgets implemented as directives. You can get a clue how the tooltip binding implemented directly from the source of the module - https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js
Also here is another example - (having jQuery and bootstrap scripts included) - use the ui-utils module Jquery passthrough directive ui-jq'. It allows to bind Jquery plugins ( style of $.fn ) directly as angular directive.
Here is their example for binding twitter bootstrap tooltip.
<a title="Easiest. Binding. Ever!" ui-jq="tooltip">
Hover over me for static Tooltip</a>
<a data-original-title="{{tooltip}}" ui-jq="tooltip">Fill the input for a dynamic Tooltip:</a>
<input type="text" ng-model="tooltip" placeholder="Tooltip Content">
<script>
myModule.value('uiJqConfig', {
// The Tooltip namespace
tooltip: {
// Tooltip options. This object will be used as the defaults
placement: 'right'
}
});
</script>
Also look into the official angular documentation for writing directives examples,
and have a happy coding time with Angular!
I am trying to insert a button into HtmlEditor's ToolBar. Button should get selected text by mouse or keyboard and add '#' character at the start of that selected text for locating it as a url.
As i understand the best solution is creating a plugin for adding buttons into html editor toolbar. I found creation codes but the problem is; how can i get selected text? Ext-js version 2.2
And there is the code that provides to create a plugin for html editor toolbar button:
Ext.ns('Ext.ux.form.HtmlEditor');
Ext.ux.form.HtmlEditor.NewLine = Ext.extend(Ext.util.Observable, {
init:function (cmp) {
this.cmp = cmp;
this.cmp.on('render', this.onRender, this);
},
onRender:function () {
this.cmp.getToolbar().addButton([
{
iconCls:'newline', //your iconCls here
handler:function () {
this.cmp.insertAtCursor('<br> ');
},
scope:this
}
]);
}
});
You can get the selected text like this: window.getSelection()
That gives you a Selection object. If you want to get the text only: window.getSelection().toString()
but if you want to make stuff bold or something, you need to check if the selection is inside the editor. Everything you need for that is inside the selection object.
=> correction: the htmlEditor uses an iframe you can get the iframe window by the getWin function.
Note that this is only for modern browser (not < IE9) judging from the legacy Ext version you use, that might be an issue for you... but there are workarounds for IE.
more info
I'm looking for alternative ways of solving a problem. We're using ElFinder for browsing files, and we want to allow the user to change the access rights to a file element through the right-click context menu ("Change permissions"). The solution I have come up with so far is to load a server side ASP.NET usercontrol in a jQuery modal dialog window. This user control will contain the logic needed to add / remove user access to the selected element.
The jQuery Dialog script looks like this (slightly changed for readability), where DisplayItemAccessConfig() is the method that's called from the context menu:
<!-- access control script -->
<script type="text/javascript" charset="utf-8">
function DisplayItemAccessConfig() {
$.getJSON('AccessRights.ashx', function (data) {
var itemName = data["itemName"];
/* set new title (JUST FOR TESTING) */
$(dialog).dialog('option', 'title', itemName);
/* open modal dialog --> */
$(dialog).dialog('open');
});
}
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
},
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
</script>
Challenge 1: find a way to reload the user control each time the jQuery popup is displayed - this is to retrieve the current access settings for the selected element. Now it loads when the page is first loaded, since it's just a div element containing an update panel with a placeholder for my usercontrol and visibility set to none. Anyone have any tips here?
Challenge 2: While I am trying to figure that one out I thought it could be worth while asking for other opinions. Is there a better way of solving this? Should I use a pure jQuery with HTML and call server side .ashx methods to retrieve data, instead of an ASP.NET usercontrol?
You can do this by creating a hidden button on inside the uploadpanel and then trigger it like this:
__doPostBack('<%= Button.ClientID %>','');
Personally I would drop the UpdatePanel and go for jQuery AJAX calls to update the content of the dialog window, but this depends on the complexity of your user control. Hard to say without seeing more of your code.
I have a JavaScript method that I need to run on one of my pages, in particular, the onresize event.
However, I don't see how I can set that event from my content page. I wish I could just put it on my master page, but I don't have the need for the method to be called on all pages that use that master page.
Any help would be appreciated.
Place the following in your content page:
<script type="text/javascript">
// here is a cross-browser compatible way of connecting
// handlers to events, in case you don't have one
function attachEventHandler(element, eventToHandle, eventHandler) {
if(element.attachEvent) {
element.attachEvent(eventToHandle, eventHandler);
} else if(element.addEventListener) {
element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
} else {
element[eventToHandle] = eventHandler;
}
}
attachEventHandler(window, "onresize", function() {
// the code you want to run when the browser is resized
});
</script>
That code should give you the basic idea of what you need to do. Hopefully you are using a library that already has code to help you write up event handlers and such.
I had the same problem and have come across this post :
IE Resize Bug Revisited
The above code works but IE has a problem where the onresize is triggered when the body tag changes shape. This blog gives an alternate method which works well
How about use code like the following in your Content Page (C#)?
Page.ClientScript.RegisterStartupScript(this.GetType(), "resizeMyPage", "window.onresize=function(){ resizeMyPage();}", true);
Thus, you could have a resizeMyPage function defined somewhere in the Javascript and it would be run whenever the browser is resized!