I want to create an Organisation chart in my ASP MVC application. We have got licence for telerik AJAX controls - which has Organisation chart control.
Does anyone know if we can use Telerik ASP.NET controls in an MVC application?
Thanks
Telerik have an ASP.NET MVC section which shows use of charts:
http://www.telerik.com/products/aspnet-mvc.aspx
However I think you'll have to check with them as to whether this is part of your licence.
In a nutshell, yes.
We've not used the Org Charts but we have used a number of the Telerik asp.net ajax controls (Calendars, Grids and Treeviews for the most recent release) within the views of our MVC project.
You simply need the reference to the Telerik.Web.UI within the view.
Basic code to show the calendar in use:
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
About Us
</asp:Content>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>About</h2>
<p>
Put content here.
</p>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<telerik:RadCalendar ID="RadCalendar1" runat="server" TitleFormat="MMMM yyyy" CultureInfo="English (United States)"
PresentationType="Preview" EnableNavigation="false" EnableMonthYearFastNavigation="false">
</telerik:RadCalendar>
</asp:Content>
Whilst not really answering your question you could not use the Telerik controls but instead use JavaScript libraries offered by Google (for free).
Here is sample code taken from Google's site.
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['orgchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true});
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
Related
I can seem to get client-side binding to work (after 2 days) using Telerik controls. AM I not providing the right kind of fake value/pair data? Not finding the control ID properly?
What needs to be done to properly bind data to Telerik RadListView from the client side?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Admin.WebForm1" %>
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title></title>
<script type="text/javascript">
//
</script>
<script src="scripts/jquery-2.1.1.min.js"></script> </head> <body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="rsm1" runat="server"></telerik:RadScriptManager>
<telerik:RadListView
ItemPlaceholderID="itemPlaceHolder"
ID="listviewHere" runat="server" ClientIDMode="Static">
<ClientSettings>
<DataBinding>
<LayoutTemplate>
<ul id="itemPlaceHolder">
</ul>
</LayoutTemplate>
<AlternatingItemTemplate>
</AlternatingItemTemplate>
<EmptyDataTemplate>
nothing
</EmptyDataTemplate>
<ItemTemplate>
<li>#= id # ----sdfdsfsdsdf</li>
</ItemTemplate>
</DataBinding>
</ClientSettings>
</telerik:RadListView>
</div>
</form>
<script type="text/javascript">
//$("#grid1").hide();
//$("#listviewHere").show();
$(document).ready(function () {
var data = [{ id: 1, name: "name1", value: 12.4 }, { id: 2, name: "name2", value: 12.4 }];
var listView = $find("#listviewHere");
//var listView = listviewHere().get_masterTableView();
//listView.get_masterTableView();
listView.set_dataSource(data);
listView.dataBind();
});
</script>
</body> </html>
You are not finding the listview client object properly - you should use:
var listView = $find('<%= listviewHere.ClientID %>');
Check the Client-side Databinding demos on their site:
http://demos.telerik.com/aspnet-ajax/listview/examples/client/appendingdata/defaultcs.aspx
I am using Telerik along with regular jQuery UI.
I have include files like this,
JQuery:
<script src="<%: Url.Content("~/Scripts/jquery-1.7.2.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.20.custom.min.js") %>" type="text/javascript"></script>
Telerik
I tried,
<%= Html.Telerik().ScriptRegistrar() %>
and
<%= Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false) %>
With jQuery(false).jQueryValidation(false) I am getting error:
Microsoft JScript runtime error: Object doesn't support property or method 'apply'
without jQuery(false).jQueryValidation(false) i.e with <%= Html.Telerik().ScriptRegistrar() %>
The jQuery UI is not working. Error: Microsoft JScript runtime error: Object doesn't support property or method 'button'
<button id="Button1">Button1</button>
<script language="javascript" type="text/javascript">
$(function () {
$("#Button1").button().click(function () {
location.href = '/One/Two';
});
});
</script>
This sounds like the same (or very similar) problem that we had after setting up Telerik. I'm assuming the scripts and telerik code you posted above is all on your master page(or layout)? Try deleting
<%= Html.Telerik().ScriptRegistrar() %>
from the master page and paste it to the bottom of each individual view that actually uses a telerik control. That is what worked for us.
I am trying to load from a SQL Server database the gallery images of the Galleria slideshow control http://galleria.io/. I have placed my Galleria control in an ASPX page.
I am trying the ListView solution recommended in an old post: Using Galleria jQuery plugin with an asp.net ListView
but it's not working. Does anyone know if it is indeed possible to load images to the Galleria control from a database? If so, what data type does the image field need to have? I tried both varbinary (the actual image) and also nvarchar (just the path of the image), none of those work. The page just hungs.
Here is my ASPX code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Aircraftpedia_GalleriaDB.aspx.cs"
Inherits="Library_Aircraftpedia_GalleriaDB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../_js/slider_jQueryUI/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../_js/galleria/galleria-1.2.7.min.js"></script>
</head>
<body>
<asp:SqlDataSource ID="dsSelectAllAircraftpedia" runat="server" ConnectionString="<%$ ConnectionStrings:MYDB%>"
SelectCommand="cda_Aircraftpedia_SelectAll" SelectCommandType="StoredProcedure"
ProviderName="<%$ ConnectionStrings:MYDB.ProviderName %>"></asp:SqlDataSource>
<asp:ListView runat="server" ID="lvw">
<LayoutTemplate>
<div id="gallery">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</LayoutTemplate>
<ItemTemplate>
<img id="photoAlbumPhotos" src='<%# Eval("AcImage") %>' alt="Image Not Found" class="photoAlbumPhotos" />
</ItemTemplate>
</asp:ListView>
<script type="text/javascript">
$(document).ready(function () {
Galleria.loadTheme('../_js/galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 700,
height: 500
});
});
</script>
</body>
</html>
And my C# code:
protected void Page_Load(object sender, EventArgs e)
{
this.lvw.DataSource = this.dsSelectAllAircraftpedia;
this.lvw.DataBind();
}
Please let me know if you have any ideas on how to make this code work or if you have another solution to recommend.
Thank you.
I'm the author, so this is certainly biased, but I think you should check out the http://imageresizing.net/ project. It offers a SQL integration plugin that should let you serve SQL blobs very efficiently with disk caching, and only takes a few minutes to set up.
As a bonus, it will let you easily resize all the images to fit a certain set of constraints, which can be very handy.
I am working just one week with ASP.NET MVC 3. This might be a very basic question or someone might have asked similar question before. I am seeking help to show me right path/method to accomplish the problem I am facing getting the partial view designed.
I have created a partial view login (in side bar) as below. What I would like to achieve here is, when I hit the "login" button, I must be a able update the partial view with information such as
**Welcome [UserName]
Last SuccessFul Login : [DateTime]
Member Since : [Date]**
I am not sure if I need to create another partial view to display this information Or the login partial view can be updated on the fly based on the action.
Login Partial View
#model AlanBeezLab.Models.LoginModel
#using (Ajax.BeginForm("Login","UserLogin", new AjaxOptions { UpdateTargetId =Model.UserName }))
{
<div >User Name
#Html.TextBox(" ")
</div>
<div>Password
#Html.Password(" ")
</div>
<p><input type="submit" value="Let me in!" /></p>
}
Below is the _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<!--link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />-->
<link href="#Url.Content("~/Content/SiteStyle.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="Header" style="background-image: url('/Content/Images/Banner_Final3.png'); background-repeat:no-repeat; width :1500px; height : 150px;" >
</div>
<div id="SideBar">
#Html.Partial("UserControls/UserLogin", new AlanBeezLab.Models.LoginModel())
</div>
<div id="Content">
#RenderBody()
</div>
<div id="Footer">
<p>Copyright © XXXXX</p>
</div>
</body>
</html>
Below is the Login Controller
public class UserLoginController : Controller
{
//
// GET: /UserLogin/
public ActionResult Index()
{
return View();
}
public ActionResult LogIn()
{
return [Not Sure];
}
I am not sure if this is best/right approach to accomplish this. I would appreciate if I am directed to the right path/approach.
Thanks
I've had this discussion with my peers before.
IMO login/logout should not be done via AJAX, it should be a regular HTTP POST.
Why? Well what if your on a page that requires Administrator access, then you logout via AJAX? Your still on the page - when you shouldn't be authorized to do so (unless of course you update the main portion of the page as well, which is kind of silly)
So my advice - make the login button do a regular POST to an action method, then use the PRG pattern to redirect back to the original page.
Of course, if you don't have the concept of administrators/permissions/roles then an AJAX login/logout will be fine.
Regardless, you've done the right thing with the partial view.
Your partial view should figure out if the user is authenticated, then render an appropriate editor/display template based on that.
E.g: _Login.cshtml:
#if(Request.IsAuthenticated) {
#Html.DisplayFor(Context.User.Identity)
} else {
#* editor fields *#
}
I want as well as Client Side Validation as Server Side Validation. I realized this as the following:
Model: ( The model has a DataModel(dbml) which contains the Test class )
namespace MyProject.TestProject
{
[MetadataType(typeof(TestMetaData))]
public partial class Test
{
}
public class TestMetaData
{
[Required(ErrorMessage="Please enter a name.")]
[StringLength(50)]
public string Name { get; set; }
}
}
Controller is nothing special.
The View:
<% Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm("Index", "Test", FormMethod.Post,
new AjaxOptions {}, new { enctype = "multipart/form-data" }))
{%>
<%= Html.AntiForgeryToken()%>
<fieldset>
<legend>Widget Omschrijving</legend>
<div>
<%= Html.LabelFor(Model => Model.Name) %>
<%= Html.TextBoxFor(Model => Model.Name) %>
<%= Html.ValidationMessageFor(Model => Model.Name) %>
</div>
</fieldset>
<div>
<input type="submit" value="Save" />
</div>
<% } %>
To make this all work I added also references to js files:
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
Eventually it has to work, but it doesnt work 100%:
It does validates with no page refresh after pressing the button.
It also does "half" Client Side Validation. Only when you type some text into the textbox and then backspace the typed text. The Client Side Validation appears. But when I try this by tapping between controls there's no Client Side Validation.
Do I miss some reference or something? (I use Asp.Net MVC 2 RTM)
Change the order of the loaded javascript...
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
Had the exact same problem and this cleared it up for me...
I thought I was missing something too, but I do know that the jQuery validation plug in doesn't react to mouseEnter/mouseLeave. According to the documentation for that plug in (at the plug in page - look for the section labeled "A few things to look for when playing around with the demo"):
Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages - he won't get bugged before he had the chance to actually enter a correct value
I assume it's the same rule with MVC 2 client-side validation. I can't be sure of that because the documentation doesn't say anything but "it works on my machine" :).
I went with the jQuery validation route, which is supported in MVC Futures (note that the documentation for that is non-existent). To use it, you just need to replace the script tags for MicrosoftAjax.js, MicrosoftMvcAjax.js and MicrosoftMvcValidation.js files with these two tags:
<script src="/js/jquery.validate.js" type="text/javascript"></script>
<script src="/js/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
replacing the path with yours.
I also found the need to upgrade to the latest version of jquery.validate.js from the developer's page, because we are using a later version of jQuery (1.4) here.
Hope that helps.
hm..., it's late to answer but try this:
<script src="<%= Url.Content("ScriptFile.js") %>" type="text/javascript"></script>