Mvc devexpress extensi

DEVEXPRESS AND

MVC PROJECT BAHASA INDONESIA

Bagaimana untuk memasukkan Ekstensi DevExpress ke aplikasi ASP.NET MVC? Untuk menggunakan Ekstensi DevExpress di ASP.NET MVC dalam sebuah proyek?

MVC + DEVEXPRESS Create project

Web.Config

Tambahkan reference devexpress seperti yang ada di dalam kotak <?xml version="1.0" encoding="utf-8"?>  <configuration> <configSections>

<sectionGroup name="devExpress"> <section name="compression" type="DevExpress.Web.ASPxClasses.CompressionConfigurationSection, DevExpress.Web.v12.2, Version=12.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" /> <section name="themes" type="DevExpress.Web.ASPxClasses.ThemesConfigurationSection, DevExpress.Web.v12.2, Version=12.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" /> <section name="errors" type="DevExpress.Web.ASPxClasses.ErrorsConfigurationSection, DevExpress.Web.v12.2, Version=12.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" /> </sectionGroup>

 <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" /> </configSections> <connectionStrings> <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-PRS-20130710002417;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-PRS-20130710002417.mdf" /> </connectionStrings> <appSettings> <add key="webpages:Version" value="2.0.0.0" /> <add key="webpages:Enabled" value="false" /> <add key="PreserveLoginUrl" value="true" /> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings> <system.web> <httpRuntime targetFramework="4.5" /> <compilation debug="true" targetFramework="4.5" /> <authentication mode="Forms"> <forms loginUrl="~/Account/Login" timeout="2880" /> </authentication> <pages> <namespaces> <add namespace="System.Web.Helpers" /> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Routing" /> <add namespace="System.Web.WebPages" />

<add namespace="DevExpress.Utils" /> <add namespace="DevExpress.Web.ASPxClasses" /> <add namespace="DevExpress.Web.ASPxGridView" /> <add namespace="DevExpress.Web.ASPxGridView.Export" /> <add namespace="DevExpress.Web.ASPxEditors" /> <add namespace="DevExpress.Web.ASPxCallbackPanel" /> <add namespace="DevExpress.Web.ASPxMenu" /> <add namespace="DevExpress.Web.ASPxNavBar" /> <add namespace="DevExpress.Web.ASPxPopupControl" /> <add namespace="DevExpress.Web.ASPxRoundPanel" /> <add namespace="DevExpress.Web.ASPxSplitter" /> <add namespace="DevExpress.Web.ASPxTabControl" /> <add namespace="DevExpress.Web.ASPxTreeView" /> <add namespace="DevExpress.Web.ASPxUploadControl" /> <add namespace="DevExpress.Web.ASPxHtmlEditor" /> <add namespace="DevExpress.Web.ASPxSpellChecker" /> <add namespace="DevExpress.XtraCharts" />

<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> </handlers> </system.webServer> <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" /> <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="2.0.0.0" /> </dependentAssembly> <dependentAssembly> <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" /> <bindingRedirect oldVersion="1.0.0.0-4.0.0.0" newVersion="4.0.0.0" /> </dependentAssembly> <dependentAssembly> <assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" /> <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="2.0.0.0" /> </dependentAssembly> </assemblyBinding> </runtime> <entityFramework> <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework"> <parameters> <parameter value="v11.0" /> </parameters> </defaultConnectionFactory> </entityFramework> </configuration>

Keterangan :Untuk koneksi ke database sql server. Ini Cuma contoh koneksi ,tidak perlu di tambahkan

<connectionStrings> <add name="NAMADATABASE" connectionString="Server=NAMASERVERATAUIPSERVER;Database=NAMADATABASE;User=sa;Password=PASWORD" providerName="System.Data.SqlClient" /> </connectionStrings>

Download Devexpress dll http://www.4shared.com/rar/4fzaOqUs/devexpress_12260.html Themes http://www.4shared.com/rar/anHvyLJE/theme_DevExpress.html Add folder >APP_Themes Klik kanan project Add> Add Asp.Net Folder > App_Themes Copy folder DevEx dan pastekan di App_Themes

http://www.4shared.com/rar/4fzaOqUs/devexpress_12260.html

http://www.4shared.com/rar/anHvyLJE/theme_DevExpress.html

Download devexpress 12.2.6.0

Extract rar Dan copy kan ke folder bin project

Klik Kanan References dan browse di project folder bin pilih semu extensi Devexpress.dll

Global.asax Klik duakali Global.asax Tambahkan method thema nya

using DevExpress.Web.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Http; using System.Web.Mvc; using System.Web.Optimization; using System.Web.Routing; namespace PRS { // Note: For instructions on enabling IIS6 or IIS7 classic mode, // visit http://go.microsoft.com/?LinkId=9394801 public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(GlobalConfiguration.Configuration); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles);

}

protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) { DevExpressHelper.Theme = "DevEx"; }

} }

Rubah template _Layout, supaya tampilan devexpress berfungsi

_layout.cshtml

Klik dua kali dan rubah seperti di bawah ini @using DevExpress.Web.Mvc; @using DevExpress.Web.Mvc.UI; @using PRS;

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <title>RPS|@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")

@Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, Theme = "DevEx" }, new StyleSheet { ExtensionSuite = ExtensionSuite.Editors, Theme = "DevEx" }, new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor, Theme = "DevEx" }, new StyleSheet { ExtensionSuite = ExtensionSuite.GridView, Theme = "DevEx" }, new StyleSheet { ExtensionSuite = ExtensionSuite.Chart, Theme = "DevEx" }, new StyleSheet { ExtensionSuite = ExtensionSuite.Report, Theme = "DevEx" } ) @Html.DevExpress().GetScripts( new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, new Script { ExtensionSuite = ExtensionSuite.HtmlEditor }, new Script { ExtensionSuite = ExtensionSuite.GridView },

new Script { ExtensionSuite = ExtensionSuite.Editors }, new Script { ExtensionSuite = ExtensionSuite.Chart }, new Script { ExtensionSuite = ExtensionSuite.Report } )

</head> <body> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body> </html>

Tes devexpress pada View. Pertama-tama Create controller Klik kanan Folder Controller> Add> Controller

Maka akan diarahkan ke index.cshtml secara otomatis

Coba contoh berikut:

@using PRS @using DevExpress.Web.Mvc @using DevExpress.Web.Mvc.UI @using DevExpress.Utils @using DevExpress.Web.ASPxEditors @using DevExpress.Web.ASPxGridView @using System.Web.UI.WebControls @using DevExpress.Web.ASPxClasses @using DevExpress.Web.ASPxTabControl @using DevExpress.Web.ASPxPopupControl @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script type="text/javascript"> function OnToolMenuItemClick(s, e) { var id = MyGridView.GetRowKey(MyGridView.GetFocusedRowIndex()); //alert('Selected id = ' + id); //alert(e.item.name + ' - ' + e.item.index); //if (e.item.Text == "Edit") // alert('Edit'); var idx = e.item.index; if (idx == 1) { if (id == null || id < 0) { dlgError.Show(); return; } document.location = '@Url.Action("Edit")/' + id; } else if (idx == 2) { if (id == null || id < 0) { dlgError.Show(); return; } dlgDeleteConfirmation.Show(); } } function OnDeleteConfirmed(s, e) { var id = MyGridView.GetRowKey(MyGridView.GetFocusedRowIndex()); document.location = '@Url.Action("Delete")/' + id; } </script> @using (Html.BeginForm()) { //ini contoh tanggal <label>Tanggal PO</label> <div> @Html.DevExpress().DateEdit( settings =>

{ settings.Name = "po_datetime"; settings.Width = 170; settings.Properties.DisplayFormatString = "dd-MMM-yyyy HH:mm:ss"; settings.Properties.EditFormatString = "dd-MMM-yyyy HH:mm:ss"; settings.Properties.TimeSectionProperties.Visible = true; settings.Properties.TimeSectionProperties.TimeEditProperties.EditFormat = EditFormat.Custom; settings.Properties.TimeSectionProperties.TimeEditProperties.EditFormatString = "HH:mm:ss"; settings.Properties.ClientSideEvents.DateChanged = "function(s,e){DateValidation();}"; }).GetHtml() </div> //ini contoh memo <div> @Html.DevExpress().Memo(settings => { settings.Name = "company_addres"; settings.Width = 400; } ).GetHtml()<span class="f_help">Alamat</span> </div> //ini contoh textbox <div> @Html.DevExpress().TextBox(settings => { settings.Name = "qty"; settings.Width = 100; } ).GetHtml() </div> // ini menampilkan grid dan menunya . //ket: // @Html.Partial("Gridtest") maksudnya memanggil view "Gridtest" //tambahkan <script type="text/javascript"> seprti di atas untuk action menu <div> @Html.DevExpress().Menu( set => { set.Name = "toolMenu"; set.EnableClientSideAPI = true; set.ClientSideEvents.ItemClick = "OnToolMenuItemClick"; // "function(s, e) { alert( 'ItemClick'); }"; set.Items.Add(item => { item.Text = "Add"; item.NavigateUrl = Url.Action("popupControl"); item.ToolTip = "Add New Refuel Data"; item.Image.Url = Url.Content("~/Content/images/add.png"); item.Image.Height = Unit.Pixel(16); //item.SetTextTemplateContent("<div>Add</div>"); //item.ItemStyle.VerticalAlign = VerticalAlign.Middle; //item.ItemStyle.Paddings.PaddingTop = Unit.Pixel(8); //item.ItemStyle.Paddings.PaddingBottom = Unit.Pixel(6); }); set.Items.Add(item => { item.Text = "Edit"; item.NavigateUrl = Url.Action("Edit"); item.ToolTip = "Edit Selected Refuel Data"; item.Image.Url = Url.Content("~/Content/images/pencil.png"); }); set.Items.Add(item => { item.Text = "Delete"; item.NavigateUrl = Url.Action("Delete"); item.ToolTip = "Delete Selected Refuel Data"; item.Image.Url = Url.Content("~/Content/images/delete.png");

item.ClientEnabled = true; }); set.Items.Add(item => { item.Text = "Print"; item.NavigateUrl = Url.Action("Export"); item.ToolTip = "Export to Excel File"; item.Image.Url = Url.Content("~/Content/images/page_white_excel.png"); }); }).GetHtml() @Html.Partial("Grid_Schedule") <span class="f_help">Jadwal pemasangan dan pembuatan laporan</span> </div> } @*//menampilkan error *@ @Html.DevExpress().PopupControl( settings => { settings.Name = "dlgError"; settings.Width = 200; settings.AllowDragging = true; settings.CloseAction = CloseAction.CloseButton; settings.EnableAnimation = false; settings.HeaderText = "Error"; settings.Modal = true; settings.PopupHorizontalAlign = PopupHorizontalAlign.WindowCenter; settings.PopupVerticalAlign = PopupVerticalAlign.WindowCenter; settings.SetContent(() => { ViewContext.Writer.Write("<div class=\"dialog-text\">"); ViewContext.Writer.Write("No data selected."); ViewContext.Writer.Write("</div>"); ViewContext.Writer.Write("<div class=\"dialog-buttons\">"); ViewContext.Writer.Write("<div style=\"width:80px; margin-left:auto; margin-right:auto\">"); Html.DevExpress().Button( buttonSettings => { buttonSettings.Name = "btnErrorOk"; buttonSettings.ControlStyle.CssClass = "button"; buttonSettings.Width = 80; buttonSettings.Text = "OK"; buttonSettings.ClientSideEvents.Click = "function(s, e){ dlgError.Hide(); }"; } ) .Render(); ViewContext.Writer.Write("</div>"); ViewContext.Writer.Write("</div>"); }); }).GetHtml() @Html.DevExpress().PopupControl( settings => { settings.Name = "dlgDeleteConfirmation"; settings.Width = 300; settings.AllowDragging = true; settings.CloseAction = CloseAction.CloseButton; settings.EnableAnimation = false; settings.HeaderText = "Delete"; settings.Modal = true; settings.PopupHorizontalAlign = PopupHorizontalAlign.WindowCenter;

settings.PopupVerticalAlign = PopupVerticalAlign.WindowCenter; settings.SetContent(() => { ViewContext.Writer.Write("<div class=\"dialog-text\">"); ViewContext.Writer.Write("Are you sure want to delete the record?"); ViewContext.Writer.Write("</div>"); ViewContext.Writer.Write("<div class=\"dialog-buttons\">"); ViewContext.Writer.Write("<div style=\"float:right\">"); Html.DevExpress().Button( buttonSettings => { buttonSettings.Name = "btnDeleteOk"; buttonSettings.ControlStyle.CssClass = "button"; buttonSettings.Width = 80; buttonSettings.Text = "OK"; //buttonSettings.UseSubmitBehavior = true; buttonSettings.ClientSideEvents.Click = "OnDeleteConfirmed"; } ) .Render(); Html.DevExpress().Button( buttonSettings => { buttonSettings.Name = "btnDeleteCancel"; buttonSettings.ControlStyle.CssClass = "button"; buttonSettings.Width = 80; buttonSettings.Text = "Cancel"; buttonSettings.ClientSideEvents.Click = "function(s, e){ dlgDeleteConfirmation.Hide(); }"; } ) .Render(); ViewContext.Writer.Write("</div>"); ViewContext.Writer.Write("</div>"); }); }).GetHtml()

Membuat Partial Grid

Pada Folder Home klik kanan add>View> conteng create as apartial view

Tambahkan code seperti dibawah ini

@using DevExpress.Web.Mvc @using DevExpress.Web.Mvc.UI @using DevExpress.Web.ASPxGridView @using DevExpress.Web.ASPxProgressBar @using DevExpress.Web.ASPxEditors @using DevExpress.Utils @using System.Web.UI.WebControls; @Html.DevExpress().GridView( settings => { settings.Name = "grid_instalation"; settings.CallbackRouteValues = new { Controller = "FuelManagement", Action = "Grid" }; //settings.Width = Unit.Pixel(690); // Unit.Percentage(100); settings.Settings.ShowGroupedColumns = true; settings.Columns.Add(col => { col.Caption = "No"; col.FieldName = "instalation_id"; col.Width = 40; col.CellStyle.HorizontalAlign = HorizontalAlign.Center; col.HeaderStyle.HorizontalAlign = HorizontalAlign.Center; col.Settings.AllowAutoFilter = DefaultBoolean.False; col.Settings.AllowHeaderFilter = DefaultBoolean.False; col.Settings.AllowSort = DefaultBoolean.False;

col.SetDataItemTemplateContent(c => { ViewContext.Writer.WriteLine((c.ItemIndex + 1).ToString()); }); }); settings.Columns.Add(col => { col.Caption = "Hari/Tanggal/Jam"; col.FieldName = "datetime"; col.Width = 110; col.PropertiesEdit.DisplayFormatString = "dd-MMM-yyyy HH:mm"; col.HeaderStyle.HorizontalAlign = HorizontalAlign.Center; col.Settings.AllowAutoFilter = DefaultBoolean.True; col.Settings.AllowSort = DefaultBoolean.True; }); settings.Columns.Add(col => { col.Caption = "Terpasang"; col.FieldName = "total_installed"; col.Width = 120; col.HeaderStyle.HorizontalAlign = HorizontalAlign.Center; col.Settings.AllowAutoFilter = DefaultBoolean.True; col.Settings.AllowSort = DefaultBoolean.True; }); settings.Columns.Add(col => { col.Caption = "Sisa"; col.FieldName = "total_uninstalled"; col.Width = 120; col.HeaderStyle.HorizontalAlign = HorizontalAlign.Center; col.Settings.AllowAutoFilter = DefaultBoolean.True; col.Settings.AllowSort = DefaultBoolean.True; }); settings.Columns.Add(col => { col.Caption = "Catatan"; col.FieldName = "notes"; col.Width = 150; col.HeaderStyle.HorizontalAlign = HorizontalAlign.Center; col.Settings.AllowAutoFilter = DefaultBoolean.True; col.Settings.AllowSort = DefaultBoolean.True; }); settings.Styles.AlternatingRow.Enabled = DefaultBoolean.True; //settings.Settings.ShowHorizontalScrollBar = true; settings.SettingsPager.PageSize = 20; settings.SettingsBehavior.AllowFocusedRow = true; settings.KeyFieldName = "schedule_id"; settings.Settings.ShowFilterRow = true; settings.Settings.ShowFilterRowMenu = true; //settings.CommandColumn.Visible = true; //settings.CommandColumn.ClearFilterButton.Visible = true; settings.PreRender = (sender, e) => { ASPxGridView grid = (ASPxGridView)sender; grid.FocusedRowIndex = 0; }; }).Bind(ViewBag.DataList).GetHtml()

Pake IIS

Namai alias > rps(contoh) Pilih application pool > .net visual studio yang di gunakan , jika .net di pc belum ada install dulu Physical path > pilih dimana folder project di buat Klik ok

Coba bulid projectnya CTRL+SHIFT+B

Pada browser masuk kan link http://localhost/rps

ABDUL GANI PUTRA SURATMA

www.mvcku.blogspot.com

Mvc devexpress extensi

Documents

Transcript of Mvc devexpress extensi