Telerik RadOrgChart Node click event - asp.net

I am working with Telerik Ajax control RadOrgChart
I want to capture when a node was clicked (in fact right clicked) in an OrgChart. I want the event to pass the ID of the node clicked.
I cannot find any such event in OrgChart.
Can anyone please suggest how to do it.
Thanks

Reading the documentation i see that RadOrgChart doesnt have a event handler for node click, so i think you could make your own ItemTemplate and handle the click of the items of the template, something like this.
<telerik:RadOrgChart ID="RadOrgChartDirectReports1" EnableViewState="true" Skin="Office2010Silver"
runat="server">
<ItemTemplate>
<asp:Button CausesValidation = "false" OnClick="LinkButton_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "EmployeeId")%>'
runat="server" Text = "Click" ID="LinkButtonNode"></asp:Button>
</ItemTemplate>
</telerik:RadOrgChart>
in this example you put a button inside a item, so, you can handle the button click.

Thanks Ewerton.
I found a better way to do it on client side instead.
Each of the telerik orgchart nodes have default css class, so something like this work:
$telerik.$(".rocItem").click(function (e) {
var orgChart = $find("<%= RadOrgChart1.ClientID %>");
var index = orgChart._extractGroupItemFromDomElement(e.target).get_index();
var hierarchicalIndex = orgChart._extractNodeFromDomElement(e.target)._getHierarchicalIndex();
hierarchicalIndex = orgChart._getRealHierarchicalIndex(hierarchicalIndex);
alert("Clicked " + hierarchicalIndex);
})

Related

Control in UpdatePanel not found using $find

I have a complicated page but I created a simple ASP.NET page with the issue. I have telerik RadAsyncUpload control and a button inside an UpdatePanel as shown:
<asp:UpdatePanel ID="_updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
...
<telerik:RadAsyncUpload ID="fileUpload" runat="server" MaxFileInputsCount="1" OnClientFilesSelected="fileUpload_ClientFilesSelected" /><br />
<asp:Button ID="_saveNewFileButton" runat="server" OnClick="_saveNewFileButton_Click"
Text="Save"/>
</ContentTemplate>
</asp:UpdatePanel>
When a file is selected I want to disable the _saveNewFileButton and change the text to "Please Wait for Attachment Upload..." but I can't seem to get hold of the button reference in javascript:
var FilesUpdateInterval = null;
//Handles client side FilesSelected event for _newFileUploadButton.
function fileUpload_ClientFilesSelected(sender, args) {
//disable the click event for submit button during upload
var submitButton = $find('<%= _saveNewFileButton.ClientID %>');
submitButton.set_text('Please Wait for Attachment Upload...')
submitButton.set_readOnly(true);
if (FilesUpdateInterval == null) {
FilesUpdateInterval = setInterval(function () { FileCheckForUploadCompletion(); }, 500);
}
}
I am getting submitButton is null error. I tried putting this javascript code outside the updatepanel and inside ContentTemplate with same result. Obviously whatever I am doing is wrong. How do I get hold of the control that is in updatepanel in javascript?
EDIT: I find out that $find works with only telerik controls. So, I have to either use document.getElementById function or JQuery with something like Steve specified. Also, I have to use RegisterClientScriptBlock. I will test with Steve suggestion and then accept the answer.
short version - use $get() or document.getElementById(), as regular HTML elements are not IScriptControls, so $find() will not give you anything, and they don't have the rich client API you are trying to use.
For example
var submitButton = $get('<%= _saveNewFileButton.ClientID %>');
submitButton.setAttribute("value", "Please Wait for Attachment Upload...");
Option 2 - use RadButton.
Using jQuery and vb with ASP.Net, I've done something similar to this, which has worked well, even if it isn't that pretty. The [Whatever] I have was a FormView that didn't always have the control. Also, I didn't use it with a button, but I think that's the syntax for changing the button text. Either way, it might give you some ideas:
$('#<%=GetButtonClientID("_saveNewFileButton")%>').attr('value', 'Please Wait for Attachment Upload...');
And then I have a function like this:
Public Function GetButtonClientID(ByVal argFieldName As String) As String
Dim tmpID As String = "0"
Dim tmpButton As Button = [Whatever].FindControl(argFieldName)
If Not tmpButton Is Nothing Then Return tmpButton.ClientID.ToString Else Return "0"
End Function

Adding an edit button to Gridview

I have written a method that retrieves data from the database and returns a datatable comprising of three columns.
This datatable I am binding to a gridview control after hiding the ID field.
DataTable dt = _qbObj.getAllTags();
dvTags.DataSource = dt;
BoundField bfName = new BoundField();
bfName.DataField = dt.Columns["Name"].ToString();
bfName.HeaderText = "Name";
BoundField bfId = new BoundField();
bfId.DataField = dt.Columns["ID"].ToString();
bfId.Visible = false;
BoundField bfDesc = new BoundField();
bfDesc.DataField = dt.Columns["Description"].ToString();
bfDesc.HeaderText = "Description";
dvTags.Columns.Add(bfId);
dvTags.Columns.Add(bfName);
dvTags.Columns.Add(bfDesc);
dvTags.DataBind();
To this gridview control, I want to add an edit button, which should pop-up a jquery modal dialog box where I can enter the updated details.
I realize that I can go with a , but the problem is that I need to pop that modal dialog box without refreshing the page, and the doesn't exactly have great support for scripting.
So inside my gridview I inserted this, an Item Template.
<asp:GridView ID="dvTags" runat="server" CssClass="labs-grid-view"
AutoGenerateColumns="False" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnEdit" runat="server" Text="Edit" OnClick="dvTagEdit" CommandName="UpdateRecord"
CommandArgument='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now after I am done editing the gridview doesn't update automatically, and hence I have a dedicated refresh grid button which deletes the existing "dynamically inserted columns" using this code :-
int noOfRows = dvTags.Columns.Count;
if (noOfRows > 1)
{
dvTags.Columns.RemoveAt(noOfRows - 1);
dvTags.Columns.RemoveAt(noOfRows - 2);
dvTags.Columns.RemoveAt(noOfRows - 3);
// THERE ARE A TOTAL OF **THREE** COLUMNS
}
But the problem is that after refreshing the page a couple of times, my button inside the ItemTemplate disappears and in the html is replaced with an " "
Please help me find the error. I'm thinking there is a better and easier way to achieve this. If so I'm open to them.
Thanks for reading,
Abijeet.
A few things to consider:
First, can you post your code behind for your ItemCommand event, which is rendering the modal popup and which is performing the update? It could be that your refresh after edit is not processing properly.
Second, instead of doing your databinding "inline" on your GridView, consider using the RowDataBound event within the Gridview. You can detect which row is being generated (header, data, footer) and you can properly create your edit button in there. Better yet, you can access your button from within this method and simply set the CommandArgument to your Id.
Third, when using the asp button in your GridView, it will trigger the "ItemCommand" event when clicked, which will cause a postback.
I'd recommend having a simple link in your template column, or something that you can use to trigger a jQuery modal, and you can setup a static naming convention for your items that will properly retrieve the data to put into your modal popup for editing. Then from there you should be able to process your update as normal.
I hope something in here helps.

Before deleting a row in repeater , i want to do validation asking that, are sure you want to delete..?How can i do this?

i want to do validation asking that, are sure you want to delete..?
<asp:LinkButton ID="lnkDelete" runat="server"
CommandName='<%# DataBinder.Eval(Container.DataItem, "ImageId") %>' OnCommand="Calling_Delete">Delete</asp:LinkButton>
The easiest way to do it is to use Confirm Button extender. Just drag this control next to the linkbutton and set the Confirmbutton externders TargetControlID to the Id of the Linkbutton. Everything else will be taken care of by the control.
More info- http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ConfirmButton/ConfirmButton.aspx
Use OnClientClick property to attach the java-script that will do the prompting. For example,
<asp:LinkButton ID="lnkDelete" runat="server"
CommandName='<%# DataBinder.Eval(Container.DataItem, "ImageId") %>'
OnClientClick="return confirm('Are sure you want to delete..?');"
OnCommand="Calling_Delete">Delete</asp:LinkButton>
This answer has one way to do it, using jQuery and a jQuery UI dialog
One advantage of using a javascript dialog such as that provided by jQuery UI is that the popup dialog is modal only for the web page on which it is displayed. You can still access other tabs within your browser while the popup is displayed.
Other solutions that use the javascript confirm function will force the user to dismiss the confirmation dialog before switching to another browser tab.
if u'd like to use custom confirmation ( like jquery dialog,bootboxjs etc.. ) then you have to generate button's "postback string" or get it somehow. asp.net gives such as postback name after rendering the page; __doPostBack('ctl00$ContentPlaceHolder1$btnDeleteSelected',''). after realizing this i wrote a js function which is generates button's postback str;
function PostBackBtnMake(id) { // id : ContentPlaceHolder1_btnDeleteSelected
var result;
var temp = id.split('_');
result = 'ctl00$' + temp[0] + '$' + temp[1];
return result;
}
then i be able to use in custom confirmation box (in this case i used bootboxjs);
function PostBackBtn(e) {
var _result = false;
bootbox.confirm("Are you sure?", function (result) {
if (result) {
__doPostBack(PostBackBtnMake(e.id), '')
}
});
return _result;
}
it's worked for me, i hope it helps you too.

How to hide ajaxtoolkit calendarextender when lost focus?

Hi,
I want to hide first calendar when a second is open or when the calendar field lost focus. The issue is that if the user doesn't select any date from calendar and go to other control in page the calendar doesn't hide, only when user select any date from calendar the popup hides. This capture show the problem.
I see that in ajaxtoolkit calendarextender sample page the calendar control works fine, when out from one to another calendar prior popup hides but I don't find the sample code of this page. I think this page manage in javascript the event when the focus is lost, but I had found any sample code or project ...
Thank you in advance!
As Yuri mentions, using an ImageButton fixes this... or...
You need to handle the onmouseout event. You can do it this way:
http://forums.asp.net/p/1182269/4708411.aspx/1?Re+Calendarextender+and+Lose+Focus+Or+Mouse+Out
Or you could add some javascript (via jQuery) and inject an onmouseout event:
Adding extra functions to an image's onmouseout attribute
This is also shown in the forums.asp.net link, but basically, on the onmouseout event you can just set the visibility of the calendar extender to hidden or none.
As an option in addition to solutions provided by dash, you may use following decision if you don't want to use ImageButton instead of Image for PopupButton: set OnClientShowing properties on extenders to "hideAnotherOpenedPoups" and add onto a page script below.
// Array of BehaviorIds of each extender for those you use Image as PopupButton
var behaviorIds = ["CalendarExtender1", "CalendarExtender2"];
function hideAnotherOpenedPoups(sender) {
for (var index = 0; index < behaviorIds.length; index++) {
if (behaviorIds[index] !== sender.get_id()) {
var extender = $find(behaviorIds[index]);
if (extender.get_isOpen()) {
extender.hide.call(extender);
}
}
}
}
Try the following line of code to show the calendar on both Textbox and Image click.
<asp:TextBox runat="server" onclick="showCalendar();" onfocusout="showCalendar();" ID="txtDate" />
<asp:ImageButton runat="Server" ID="imgPopup" AlternateText="Click to show calendar" />
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" CssClass="MyCalendar" Format="MMMM d, yyyy" PopupButtonID="imgPopup" />
and add a javascript function like this
<script type="text/javascript">
function showCalendar() {
$( "#<%=imgPopup.ClientID %>" ).trigger( "click" ); //I've used .ClientID here just in case your page is inherited from a Master page
}
</script>
That should display the calendar when you click on the Textbox, and the calendar will be hidden once you click anywhere else on the form

How can I pull ID from a form control in a datagrid / repeater (vb)

I have the following repeater
<asp:Repeater id="weatherFeed" Runat="server"><ItemTemplate>
<asp:LinkButton runat="server" id="PickInfo" onClick="Selection_PickInfo">
<img src="images/mapPin.png" title="<%#Container.DataItem("city")%>" />
</asp:LinkButton>
</ItemTemplate></asp:Repeater>
I'd like to call my function "Selection_PickInfo" using the Link buttons created, but I'm having the issue of not being able to actually pull information from these links.
you have a link button in the repeater that's why you are not able to use the link button functionality.you have to find the link button in the weatherFeed_ItemDataBound event then attach your
Selection_PickInfo then it will work fine.Try this .....
LinkButton pickInfo = (LinkButton)weatherFeed.FindControl("PickInfo");
pickInfo.Attributes["onclick"] = "Selection_PickInfo();";
I figured it out. In your function just do Sender.ID

Resources