Showing posts with label DevExpress. Show all posts
Showing posts with label DevExpress. Show all posts

Wednesday, April 24, 2024

Dive Deep: Unveiling DevExpress Splash Screen in Your WinForms App

 Introduction:

In today's fast-paced digital world, user experience plays a pivotal role in the success of any application. One aspect that significantly contributes to a positive user experience is the loading screen or splash screen. A well-designed splash screen enhances the aesthetic appeal of your application and provides users with visual feedback during the loading process, reducing perceived wait times.

In this tutorial, we'll explore implementing a splash screen in a Winforms application using DevExpress, a powerful suite of UI controls and components. By the end of this tutorial, you'll have a sleek and professional-looking splash screen integrated into your Winforms application, enhancing its overall user experience.

Step 1: Setting Up Your Winforms Project

Before implementing the DevExpress splash screen, let's set up a basic Winforms project in Visual Studio.

  1. Open Visual Studio and create a new Winforms project.
  2. Name your project and choose a location to save it.
  3. Once the project is created, you'll see the default form in the designer view.

Step 2: Installing DevExpress

You must install the DevExpress NuGet package to use the DevExpress controls and components in your Winforms project.

  1. Right-click on your project in the Solution Explorer.
  2. Select "Manage NuGet Packages" from the context menu.
  3. In the NuGet Package Manager, search for "DevExpress" and install the appropriate package for your project.

Step 3: Adding a Splash Screen Form

Now, let's create a new form for our splash screen.

  1. Right-click on your project in the Solution Explorer.
  2. Select "Add DevExpress Item" from the context menu.
  3. Select "Splash Screen" from the DevExpres Template Gallery.
  4. Name the form "SplashScreenForm" and click "Add Item"
  5. Design your splash screen form using DevExpress controls to customize its appearance according to your preferences. You can add images, animations, and progress indicators to make it visually appealing.

Step 4: Configuring Application Startup

Next, we must configure our application to display the splash screen during startup.

  1. Open the Program.cs file in your project.

  2. Locate the Application.Run method, typically found within the Main method.

  3. Before calling Application.Run, create and display an instance of your splash screen form.

     static void Main()
     {
         Application.EnableVisualStyles();
         Application.SetCompatibleTextRenderingDefault(false);
     
         //Application.Run(new MainFormWithSplashScreenManager());
         var form = new MainForm();
         DevExpress.XtraSplashScreen.SplashScreenManager.ShowForm(form, typeof(SkinnedSplashScreen));
         //...
         //Authentication and other activities here
         Bootstrap.Initialize();                        
     
         DevExpress.XtraSplashScreen.SplashScreenManager.CloseForm();                      
         Application.Run(form);
     }
    
     internal class Bootstrap
     {
         internal static void Initialize()
         {
             // Add initialization logic here
             //Authentication and other activities here
             LoadResources();            
             
         }
         private static void LoadResources()
         {
             // Perform resource loading tasks
             // Example: Load configuration settings, connect to a database, etc.
    
             Thread.Sleep(1000);//For testing
         }
     }

Step 5: Adding Splash Screen Logic

Now that our splash screen is displayed during application startup let's add some logic to control its behaviour.

  1. Open the SplashScreenForm.cs file.

  2. Add any initialization logic or tasks that must be performed while the splash screen is displayed. For example, you can load resources, perform database connections, or initialize application settings.

     public partial class SkinnedSplashScreen : SplashScreen
     {
         public SkinnedSplashScreen()
         {
             InitializeComponent();
             this.labelCopyright.Text = "Copyright © 1998-" + DateTime.Now.Year.ToString();
         }
    
         #region Overrides
    
         public override void ProcessCommand(Enum cmd, object arg)
         {
             base.ProcessCommand(cmd, arg);
         }
    
         #endregion
    
         public enum SplashScreenCommand
         {
         }
    
         private void SkinnedSplashScreen_Load(object sender, EventArgs e)
         {
             
         }
     }

Step 6: Testing Your Application

With the splash screen implemented, it's time to test your Winforms application.

  1. Build your project to ensure there are no compilation errors.
  2. Run the application and observe the splash screen displayed during startup.
  3. Verify that the application functions correctly after the splash screen closes.

See the following topic for information on how to execute code when your application starts: How to: Perform Actions On Application Startup.

Conclusion:

In this tutorial, we've learned how to implement a splash screen in a Winforms application using DevExpress. By following these steps, you can enhance the user experience of your application by providing visual feedback during the loading process. You can customize the splash screen further to match the branding and style of your application and experiment with different animations and effects to create a memorable first impression for your users.

References
Splash Screen
Splash Screen Manager

Source Code

Tuesday, December 5, 2017

How to include DevExpress references in ASP.NET projects using NuGet?

Introduction:

DevExpress introduced NuGet packages for some subscriptions and it been a long time that I have not yet tried rather installing full package of DevExpress controls. Now it is much easy to include references through NuGet Package Manager.

Using DevExpress NuGet packages for DevExpress Controls

The brief information about the DevExpress NuGet Packages is described on Mehual Harry’s blog post - DevExpress NuGet Packages - Now Available

An excellent step-by-step guide to setup Visual Studio for DevExpress NuGet packages available in below QA thread:
DevExpress NuGet Packages: T466415

Setup DevExpress NuGet Feed to Visual Studio

  1. In Visual Studio, select Tools | Options. Under NuGet Package Manager, locate the Package Sources item.
  2. Add new package source using a string in the following format: “https://nuget.devexpress.com/{feed-authorization-key}/api”. This feed-authorization-key is available in your DevExpress account's Download Manager and just replace the copied authorization key in the source url.

    IncludeDevExpressNuGetPackages

Using NuGet Packages in Projects

Right-click a solution and select Manage NuGet Packages for Solution and then Select the newly added package source:

Using DevExpress NuGet Packages

Select the package you want to add to your project and all linked references will be added automatically.

Intall DevExpress Packages to Projects

updated references after adding DevExpress Packages to Projects

Now time to test the project after updating references.

Note: If you face problem with editor controls then follow the documentation of ASP.NET MVC Extensions for Integration into an ASP.NET MVC Project and we are doing Manual Integration into an Existing Project.

Conclusion:

We have added DevExpress references to the projects from Using DevExpress NuGet packages and after that you will be able to configure your project to run the ASP.NET controls.

Wednesday, September 28, 2016

CodeRush for Roslyn is now available RTM Version

 

CodeRush helps the developers to write, refactor, navigate and debug C# and VB source code faster and more efficiently. Along this CodeRush includes the world's fastest .NET test runner which helps developers to complete software development tasks with less effort (both physical and cognitive), and in less time.

What makes this CR for Roslyn better than Classic version?

This newer version of CodeRush for Roslyn uses significantly less memory, works faster, and lets the Visual Studio to start faster the CodeRush Classic. It leverages Visual Studio's solution-parsing data and automatically supports new C# and VB language features as they become available in Visual Studio.

Features provided by CR for Roslyn:

  1. Visualize Code and Intuitively Debug
  2. Move at Warp Speed
    It helps to find symbols and files quickly in your solution and easily navigate to code constructions related to the current context. CodeRush includes the Quick Navigation and Quick File Navigation features, which make it fast and easy to find symbols and open files.
  3. Navigation features are available via the Navigation menu, which can be invoked using the Ctrl+Alt+N shortcut.

  4. Validate Quality Faster
    CodeRush lets you create new test cases or new test suites in a single keystroke. CodeRush for Roslyn automatically detects unit tests for NUnit, xUnit, MSpec and MSTest frameworks, and can optionally run tests located across multiple assemblies concurrently. The Test Runner also runs CoreCLR test cases in the DNX environment. The Sessions support makes it very easy to organize tests and run only those that are required.
  5. Code Refactoring
  6. Code Analysis
  7. Code Formatting and Cleanup
  8. many more…

Complete feature comparison matrix between CodeRush editions is available at Download Classic or Roslyn Version.

Tuesday, January 12, 2016

How to export XtraGrid to excel with cell and row styles?

Scenario:

In current implementation, I have applied custom style using the GridView_RowCellStyle event e.g. text formatting and background color. Then I was trying to export the grid to excel file but all of the applied styles lost.

Solution:

To solve this problem which was looking huge by doing a small correction in implementation in never version of DevExpress controls. I set the DevExpress.Export.ExportSettings.DefaultExportType property to WYSIWYG and tried to export it again. Now I found all the changes as I have applied through customization.

Thursday, December 3, 2015

DevExpress v15.2 Released – What’s is new this version?

 

I have attended DevExpress Webinars consecutively in last few days and there was lots of features they included in the newer version v15.1. All the technology persons Mehul, Don, Julian and Bukcnall described all these features with much clearly and I found that they are much valuable to increase the productivity of the developers. Here are list of webinars related to DevExpress v15.2 build:

Mehul Harry
Don Wibier

v15.2: What's New for DevExtreme & HTML5

03-Dec-2015

Julian M Bucknall
Paul Usher

v15.2: What's New for Reporting and Dashboards

02-Dec-2015

Julian M Bucknall
Paul Usher

v15.2: What's New for Windows Developers

01-Dec-2015

Mehul Harry
Don Wibier

v15.2: What's New for ASP.NET Developers

30-Nov-2015

The amazing thing that I liked most is “Grid-Based Report Generation”. This release ships with a new WinForms Grid-based report generation option. With only a few lines of code, you can invoke the DevExpress WinForms Report Designer from the Grid Control and create reports based on its data.

clip_image002 

Currently I am working with WinForms controls so I found few new control in the WinForms control suite:

  • Diagram Control
  • Date Editor & Calendar Control
  • Excel Data Source
  • Ring/Line Animations
  • Tabbed Form
  • Tabbed Pane Control
  • Toolbox Control
  • Clipboard Management

    the amazing thing they have included is Clipboard management. It was the desired functionality for us because every time we need to write custom code to implement this functionality. Before that it was not easy to copy the Grid Control content to another program including the formatting rules e.g. cell colors. Check this out.
    clip_image003

More interesting controls also included in the ASP.NET WebForms suite also:

Card View Control:

 It is packed with new features like Batch Editing, Conditional Formatting, Export to PDF, XLS, XLSX and RTF Formats, Selected Records Export, Conditional Formatting Export, Header Panel, Total Summary, Endless Paging, Date Range Header Filter, Ellipsis with tooltips in cell texts, Design-Time Card Layout Editor allows you to build a Microsoft Outlook inspired Contacts View with integrated data shaping and editing capabilities.

clip_image005

ASP.NET QueryBuilder Control

Right now this control is available in CTP, but this DevExpress ASP.NET Query Builder allows you to visually construct SQL queries and return a string containing a SELECT statement. It is enriched with cool features.

clip_image007

This control can automatically obtain and display database schema within the QueryBuilder's UI. It has ability to visually edit 'WHERE', 'ORDER BY' and 'GROUP BY' query clauses. Relationship management is required feature for a query builder and they have availed and relationships between tables are automatically resolved based on foreign keys in the control. Along this we can see the Query results preview also.

There are many more features included in ASPxGridView – Responsive Layout, Adaptive layout, export with Format Conditions, Scheduler Control and others. XAF, DevExtreme & HTML5, Reporting, WPF, CodeRush.

The main improvement what DevExpress bring to the Developer community is that they have improved the performance of the control on each platform. Performance is main concern while using the third party controls and within this release they have focused on it also.

Enjoy new Office 2016 style themes also. Smile

The complete features details are available about the DevExpress v15.2 here. Hope this will help you explorer amazing fast DevExpress controls.

Wednesday, December 2, 2015

How to use ValueConverter (Decimal Converter) during data binding with control?

Scenario:

While using DevExpress WPF control, sometimes it requires to convert the binding value according to the control’s property. In that case we need use the Value Converters in this case.
Let we require to bind the SpinEdit WPF control edit value property with some object property which require to be converted to decimal value. To do that we need to follow below steps:

  1. Create a custom converter class which implements IValueConverter to convert the value to the decimal.
    namespace DevExWpfApp
    {
    public class DecimalConverter : IValueConverter
    {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
    return System.Convert.ToDecimal(value);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
    throw new NotImplementedException();
    }
    }
    }

  2. Now use it in the XAML by declare it as resources and then call it as below:

    <UserControl.Resources>
    <local:DecimalConverter x:Key="DecimalConverter"/>
    </UserControl.Resources>

    <dxe:SpinEdit EditValue="{Binding Entity.MaxValue, Converter={StaticResource DecimalConverter}" />

Tuesday, July 7, 2015

How to iterate through TileView items in XtraGrid?

This is related to DevExpress question - How to loop through tiles in TileView, which help me to achieve the required functionality in the XtraGrid using the TileView. I require to implement the selection process for TileView similar to GridView in XtraGrid, but I require to iterate through all the TileView items. TileView actually use TileViewControl internally so it require to access under laying  tileview control items to access more information about the TileViewItems. See the below code snippet:

private void HandleTileItemSelection(TileViewItem tileViewItem)
{
if ((ModifierKeys & Keys.Control) != Keys.Control)
{
Dictionary visibleTiles = ((tileView1.GetViewInfo() as ITileControl).ViewInfo as TileViewInfoCore).VisibleItems;
int alternateCheckedItemsCount = 0;
foreach (KeyValuePair item in visibleTiles)
{
if (item.Value != tileViewItem && item.Value.Checked)
{
alternateCheckedItemsCount++;
item.Value.Checked = false;
tileView1.SetRowCellValue(item.Value.RowHandle, "CheckedStatus", false);
}
}
}
}

Thursday, November 17, 2011

Validate Edit Form Template Container

Use Validation Group for custom added controls.. and validate using javascript.

 

<script type="text/javascript">
function OnUpdateClick(editor) {
if(ASPxClientEdit.ValidateGroup("EditForm"))
treeList.UpdateEdit();
}
</script>
<dxwtl:ASPxTreeList ID="ASPxTreeList2" runat="server" AutoGenerateColumns="False"
DataSourceID="AccessDataSource1" KeyFieldName="ID"
ParentFieldName="ParentID" ClientInstanceName="treeList">
<Templates>
<EditForm>
<table style="width: 100%">
<tr>
<td>Department:</td>
<td><dxe:ASPxTextBox ID="ASPxTextBox1" runat="server"
Value='<%# Bind("Department") %>'
Width="170px">
<ValidationSettings ValidationGroup="EditForm">
</ValidationSettings>
</dxe:ASPxTextBox></td>
</tr>
<tr>
<td>Location:</td>
<td><dxe:ASPxTextBox ID="ASPxTextBox2" runat="server"
Value='<%# Bind("Location") %>'
Width="170px">
<ValidationSettings ValidationGroup="EditForm">
</ValidationSettings>
</dxe:ASPxTextBox></td>
</tr>
<tr>
<td>Budget:</td>
<td><dxe:ASPxSpinEdit ID="ASPxSpinEdit1" runat="server" Height="21px" Number="0"
Value='<%# Bind("Budget") %>'>
<ValidationSettings ValidationGroup="EditForm">
</ValidationSettings>
</dxe:ASPxSpinEdit></td>
</tr>
<tr>
<td>Phone:</td>
<td><dxe:ASPxTextBox ID="ASPxTextBox3" runat="server"
Value='<%# Bind("Phone") %>' Width="170px">
<ValidationSettings ValidationGroup="EditForm">
<RegularExpression ErrorText="Wrong phone number"
ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" />
</ValidationSettings>
</dxe:ASPxTextBox></td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:void(0);" onclick="OnUpdateClick(this)">Update</a>
<dxwtl:ASPxTreeListEditFormTemplateReplacement runat="server"
Type="CancelButton"/>
</td>
</tr>
</table>
</EditForm>
</Templates>
<Columns>
<dxwtl:TreeListTextColumn FieldName="Department" VisibleIndex="0">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Budget" VisibleIndex="1">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Location" VisibleIndex="2">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Phone" VisibleIndex="3">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListCommandColumn VisibleIndex="4">
<EditButton Visible="True">
</EditButton>
</dxwtl:TreeListCommandColumn>
</Columns>
<SettingsEditing Mode="EditForm" />
</dxwtl:ASPxTreeList>


To invoke client-side validation for custom editors placed within the Edit Form's template, make use of a template container's ValidationGroup property.You can assign this property value to the ValidationSettings.ValidationGroup property of custom editors to be validated. The code below demonstrates how this can be done when defining an Edit Form's template.




<dx:ASPxGridView ... >
...
<Templates>
<EditForm>
...
<dx:ASPxTextBox ID="ASPxTextBox2" runat="server" Width="170px" ValidationSettings-ValidationGroup="<%# Container.ValidationGroup %>">
<ValidationSettings>
<RequiredField IsRequired="true" />
</ValidationSettings>
</dx:ASPxTextBox>

<dx:ASPxGridViewTemplateReplacement ReplacementType="EditFormUpdateButton" runat="server" />
...
</EditForm>
</Templates>
...
</dx:ASPxGridView>


in Dynamic Templates that inherits ITemplate interface..  use the following way to specify these.



ASPxTextBox tb = new ASPxTextBox();
tb.ID = "txtName";
tb.Width = 200;
tb.ValidationSettings.CausesValidation = true;
tb.ValidationSettings.RequiredField.IsRequired = true;
tb.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithTooltip;
tb.ValidationSettings.ValidationGroup = editContainer.ValidationGroup;
//tb.CssFilePath = @"~/App_Themes/Soft Orange/{0}/styles.css";
//tb.CssPostfix = "Soft_Orange";
tb.Value = DataBinder.Eval(editContainer.DataItem, "Name");
table.Rows[0].Cells[1].Controls.Add(tb);

Wednesday, November 9, 2011

Find controls in the DataItem template of ASPxGridView column

Add DataItemTemplate to Grid Column to access at server side code. In case of DataRowTemplate, we create template for whole row, but if we want to create template for a single column then we use DataItemTemplate and on the place of DataRowTemplate’s
((sender as ASPxGridView).FindRowTemplateControl(..) method; here we use FindRowCellTempleteControl(..) method on HtmlRowCreated event of ASPxGridView.

Grid Markup:
  <dx:ASPxGridView ID="grvTest" AutoGenerateColumns="False" runat="server" DataSourceID="SqlDataSource1"
OnHtmlRowPrepared="grvTest_HtmlRowPrepared" OnHtmlRowCreated="grvTest_HtmlRowCreated">
<Columns>
<dx:GridViewDataTextColumn Caption="RowID" Name="colRowID" VisibleIndex="0" Width="20px">
<DataItemTemplate>
<dx:ASPxLabel ID="lblRowID" runat="server" Text='Label'>
</dx:ASPxLabel>
</DataItemTemplate>
</dx:GridViewDataTextColumn>


C#


protected void grvTest_HtmlRowCreated(object sender, ASPxGridViewTableRowEventArgs e)
{
if (e.RowType != GridViewRowType.Data) return;

ASPxLabel label = grvTest.FindRowCellTemplateControl(e.VisibleIndex, null,
"lblRowID") as ASPxLabel;
label.Text = (e.VisibleIndex + 1).ToString();
}



Thursday, November 3, 2011

ASPxGridView Hyperlink NavigateUrl at Runtime

In the ASPxHyperLink.Init handler, you can use the ASPxGridView.GetDetailRowKeyValue method with ASPxHyperLink.NamingContainer property as a parameter, to get the main grid row key value.

[C#]

protected void ASPxHyperLink1_Init(object sender, EventArgs e) {
ASPxHyperLink myLink =(ASPxHyperLink)sender;
int key = Convert.ToInt32(ASPxGridView.GetDetailRowKeyValue(myLink.NamingContainer));
}


It would be better to use a binding-expression for the ASPxHyperLink.NavigateUrl property in the .ASPX file.



[ASPx]



<EmptyDataRow>
<dx:ASPxHyperLink ID="ASPxHyperLink1" runat="server" Text="ASPxHyperLink"
NavigateUrl="<%# ASPxGridView.GetDetailRowKeyValue(Container) %>" />
</EmptyDataRow>

ASPxGridView DataRow Template Example

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication164._Default" %>

<%@ Register Assembly="DevExpress.Web.ASPxEditors.v8.3, Version=8.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>

<%@ Register Assembly="DevExpress.Web.ASPxGridView.v8.3, Version=8.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dxwgv" %>

<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dxwgv:ASPxGridView ID="ASPxGridView1" runat="server" DataSourceID="AccessDataSource1" AutoGenerateColumns="False"
KeyFieldName="ID" ClientInstanceName="grid">
<Columns>
<dxwgv:GridViewDataTextColumn FieldName="ID" VisibleIndex="0">
</dxwgv:GridViewDataTextColumn>
<dxwgv:GridViewDataTextColumn FieldName="FirstName" VisibleIndex="1">
</dxwgv:GridViewDataTextColumn>
<dxwgv:GridViewDataTextColumn FieldName="LastName" VisibleIndex="2">
</dxwgv:GridViewDataTextColumn>
<dxwgv:GridViewDataTextColumn FieldName="Company" VisibleIndex="3">
</dxwgv:GridViewDataTextColumn>
<dxwgv:GridViewDataTextColumn FieldName="Address" VisibleIndex="4">
</dxwgv:GridViewDataTextColumn>
<dxwgv:GridViewDataTextColumn FieldName="City" VisibleIndex="5">
</dxwgv:GridViewDataTextColumn>
<dxwgv:GridViewDataTextColumn FieldName="State" VisibleIndex="6">
</dxwgv:GridViewDataTextColumn>
<dxwgv:GridViewDataTextColumn FieldName="ZipCode" VisibleIndex="7">
</dxwgv:GridViewDataTextColumn>
<dxwgv:GridViewDataTextColumn FieldName="HomePhone" VisibleIndex="8">
</dxwgv:GridViewDataTextColumn>
</Columns>
<Templates>
<DataRow>
<div style="padding:5px">
<table width="100%" style="background-color:Silver">
<tr><td>First Name:&nbsp;<%# Eval("FirstName") %>
</td><td>Last Name:&nbsp;<%# Eval("LastName") %>
</td></tr><tr><td colspan="2">
<table width="100%">
<tr><td>State:&nbsp;<%# Eval("State") %>
</td><td>City:&nbsp;<%# Eval("City") %>
</td><td>Address:&nbsp;<%# Eval("Address") %>
</td></tr></table>
</td></tr>
<tr><td colspan="2">Company:&nbsp;<%# Eval("Company") %>
</td></tr></table>
<dxe:ASPxButton ID="ASPxButton2" runat="server" Text="Edit" AutoPostBack="False"
ClientSideEvents-Click='<%# "function(s, e) { grid.StartEditRow(" + Container.VisibleIndex + "); }" %>'>
</dxe:ASPxButton>
</div>
</DataRow>
<StatusBar>
<dxe:ASPxButton ID="ASPxButton1" runat="server" Text="New" AutoPostBack="False"
ClientSideEvents-Click="function(s, e) { grid.AddNewRow(); }">
</dxe:ASPxButton>
</StatusBar>
<EditForm>
<div>
<table width="100%"
style="background-color:Silver"><tr><td>First Name:
<dxe:ASPxTextBox ID="ASPxTextBox1"
runat="server" Value='<%# Bind("FirstName") %>' Width="100%">
</dxe:ASPxTextBox>
</td><td>Last Name:
<dxe:ASPxTextBox ID="ASPxTextBox2" runat="server"
Value='<%# Bind("LastName") %>' Width="100%">
</dxe:ASPxTextBox>
</td></tr><tr><td colspan="2">
<table width="100%"><tr><td>State:
<dxe:ASPxTextBox
ID="ASPxTextBox3" runat="server" Value='<%# Bind("State") %>' Width="100%">
</dxe:ASPxTextBox>
</td><td>City:
<dxe:ASPxTextBox ID="ASPxTextBox4" runat="server"
Value='<%# Bind("City") %>' Width="100%">
</dxe:ASPxTextBox>
</td><td>Address:
<dxe:ASPxTextBox ID="ASPxTextBox5"
runat="server" Value='<%# Bind("Address") %>' Width="100%">
</dxe:ASPxTextBox>
</td></tr></table>
</td></tr><tr><td colspan="2">Company:
<dxe:ASPxTextBox
ID="ASPxTextBox6" runat="server" Value='<%# Bind("Company") %>' Width="100%">
</dxe:ASPxTextBox>
</td></tr></table>
</div>
<dxwgv:ASPxGridViewTemplateReplacement runat="server" ReplacementType="EditFormUpdateButton" />
<dxwgv:ASPxGridViewTemplateReplacement runat="server" ReplacementType="EditFormCancelButton" />
</EditForm>
</Templates>
<Settings ShowColumnHeaders="False" ShowStatusBar="Visible" />
<SettingsEditing Mode="EditForm" />
</dxwgv:ASPxGridView>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Contacts.mdb"
SelectCommand="SELECT * FROM [Customers]"></asp:AccessDataSource>

</div>
</form>
</body>
</html>



To provide editing capabilities you can add the ASPxButton into the DataRow template. Set its AutoPostBack property to False, and attach a script to the client-side Click event. In the script, call the ASPxClientGridView.StartEditRow method, and pass the current row visible index in argument. Use the Container.VisibleIndex property from inline code to get the index.

To add new rows, add a similar button to the StatusBar template, and call the ASPxClientGridView.AddNewRow method in its Click event.





You can get some functionality using the Container object like  Container.KeyValue, Container.VisibleIndex.


Along this formatting in the text is also possible through sever side code calling e.g. String.Format




<dx:ASPxLabel ID="BirthDateLabel" runat="server" Text='<%# String.Format("{0:d}",
Eval("BirthDate")) %>' />



Another example of DataRow Template :




<div>

<dxwgv:ASPxGridView ID="ASPxGridView1" runat="server"

AutoGenerateColumns="False" DataSourceID="AccessDataSource1"

KeyFieldName="CustomerID" ClientInstanceName="grid">

<SettingsEditing Mode="Inline" />

<Columns>

<dxwgv:GridViewCommandColumn VisibleIndex="0">

<EditButton Visible="True">

</EditButton>

</dxwgv:GridViewCommandColumn>

<dxwgv:GridViewDataTextColumn FieldName="CustomerID" ReadOnly="True"

VisibleIndex="1">

</dxwgv:GridViewDataTextColumn>

<dxwgv:GridViewDataTextColumn FieldName="CompanyName" VisibleIndex="2">

</dxwgv:GridViewDataTextColumn>

<dxwgv:GridViewDataTextColumn FieldName="City" VisibleIndex="3">

</dxwgv:GridViewDataTextColumn>

<dxwgv:GridViewDataTextColumn FieldName="Country" VisibleIndex="4">

</dxwgv:GridViewDataTextColumn>

</Columns>

<SettingsPager PageSize="5" />

<Templates>

<DataRow>

<div style="padding:5px">

<table border="1" cellpadding="2" cellspacing="1" width="100%">

<tr>

<td width="150px" rowspan="4"><a href="#" onclick="grid.AddNewRow();">New</a>

<a href="##" onclick="grid.StartEditRow(<%# Container.VisibleIndex %>);">Edit</a>

<a href="###" onclick="grid.DeleteRow(<%# Container.VisibleIndex %>);">Delete</a></td>

<td width="300px"></td>

<td></td>

</tr>

<tr>

<td>CompanyName</td>

<td><%# Eval("CompanyName")%></td>

</tr>

<tr>

<td>City</td>

<td><%# Eval("City")%></td>

</tr>

<tr>

<td>Country</td>

<td ><%# Eval("Country")%></td>

</tr>

</table>

</div>

</DataRow>

</Templates>

</dxwgv:ASPxGridView>

<asp:AccessDataSource ID="AccessDataSource1" runat="server"

DataFile="~/App_Data/nwind.mdb"

DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = ?"

InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [City], [Country]) VALUES (?, ?, ?, ?)"

SelectCommand="SELECT [CustomerID], [CompanyName], [City], [Country] FROM [Customers]"

UpdateCommand="UPDATE [Customers] SET [CompanyName] = ?, [City] = ?, [Country] = ? WHERE [CustomerID] = ?">

<DeleteParameters>

<asp:Parameter Name="CustomerID" Type="String" />

</DeleteParameters>

<UpdateParameters>

<asp:Parameter Name="CompanyName" Type="String" />

<asp:Parameter Name="City" Type="String" />

<asp:Parameter Name="Country" Type="String" />

<asp:Parameter Name="CustomerID" Type="String" />

</UpdateParameters>

<InsertParameters>

<asp:Parameter Name="CustomerID" Type="String" />

<asp:Parameter Name="CompanyName" Type="String" />

<asp:Parameter Name="City" Type="String" />

<asp:Parameter Name="Country" Type="String" />

</InsertParameters>

</asp:AccessDataSource>

</div>

Wednesday, November 2, 2011

How to refresh a ASPxGridView summary value on the client side

The ASPxGridView is a server side control, so it renders on the server side.

If you know how the summary value should be changed using the client side code, you need to do the following:

1) add the ASPxLabel to the column's FooterTemplate container and set its ClientInstanceName to a some value, for example, lblFooter;
2) use the lblFooter.SetText('some text') to change the displayed summary value.

Here is some sample code:

[ASPx]

<dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="1">
<EditFormSettings Visible="False" />
<FooterTemplate>
<dx:ASPxLabel ID="ASPxLabel1" ClientInstanceName ="lblFooter" runat="server"
Text="<%# GetSummaryValue(Container)%>">
</dx:ASPxLabel>
</FooterTemplate>
</dx:GridViewDataTextColumn>
....


[C#]



protected string GetSummaryValue(GridViewFooterCellTemplateContainer container) {
ASPxGridView gridView = container.Grid;
GridViewDataColumn column = container.Column as GridViewDataColumn;
if(column == null)
return string.Empty;
for(int i = 0; i < gridView.TotalSummary.Count; i ++)
if(gridView.TotalSummary[i].FieldName == column.FieldName) {
return gridView.GetTotalSummaryValue(gridView.TotalSummary[i]).ToString();
}
return string.Empty;
}

Thursday, October 20, 2011

Client side Validation on submit with javascript and aspxtextbox

DevExpress controls own validation mechanism. Specify textbox validation group property under validationsettings to string value that you want to use and specify in the ValidationGroup method as parameter.

you can raise validation check from client side event of any button using devepress client side framework as:

OnClientClick="return ASPxClientEdit.ValidateGroup('validationgroupname');

Here is the code snippet to explain:

User Name:
<dxe:ASPxTextBox ID="tbUserName" runat="server" Width="170px">
<ValidationSettings SetFocusOnError="True">
<RequiredField IsRequired="True" ErrorText="User name can't be empty" />
</ValidationSettings>
</dxe:ASPxTextBox>
Password:
<dxe:ASPxTextBox ID="tbPassword" runat="server" Width="170px" Password="True">
<ValidationSettings SetFocusOnError="True">
<RequiredField IsRequired="True" ErrorText="Password can't be empty"
ValidationGroup="MYGroup"/>
</ValidationSettings>
</dxe:ASPxTextBox>
Last Name:
<dxe:ASPxTextBox ID="tbLastName" runat="server" Width="170px">
<ValidationSettings SetFocusOnError="True">
<RequiredField IsRequired="True" ErrorText="Last name can't be empty" />
</ValidationSettings>
</dxe:ASPxTextBox>
First Name:
<dxe:ASPxTextBox ID="tbFirstName" runat="server" Width="170px">
<ValidationSettings SetFocusOnError="True">
<RequiredField IsRequired="True" ErrorText="First name can't be empty" />
</ValidationSettings>
</dxe:ASPxTextBox>
<br />
<asp:Button ID="btnSumbit" runat="server" Text="Submit" OnClientClick="return
ASPxClientEdit.ValidateGroup('MYGroup');" />

Now it will validate on tbPassword. no others because they do not match validationgroup.

Get JavaScript IntelliSense With DevExpress Client-Side Objects

Add IntelliSense Support

Follow these 3 easy steps to add IntelliSense support to your project:

1. Install the latest DXperience v2010.1 release. (Currently, the DXperience v2010.1 beta is available to DXperience subscription license holders).

2. Click the ‘Add Existing Item’ in your project menu. Then add the ASPxScriptIntelliSense.js file to your project which should be located in the following folder:

%DevExpress Install Folder %\DevExpress 2011.1\ Components\ Sources\ DevExpress.Web.ASPxScriptIntellisense\ASPxScriptIntelliSense.js

For example, on my local machine the ASPxScriptIntelliSense.js file is located here:

C:\Program Files\DevExpress 2011.1\ Components\ Sources\ DevExpress.Web.ASPxScriptIntellisense\ASPxScriptIntellisense.js

3. Type the following code in the page <body> section in the page when using MVC that you want to enable JavaScript IntelliSense:
<% if (DesignMode){ %>
<script src="../ASPxScriptIntelliSense.js" type="text/javascript"></script>
<% } %>


Note: It's important to check the “if(DesignMode)” statement because it helps to avoid additional round trips to the server for the ASPxScriptIntelliSense.js file. It also helps to prevent mixing up the IntelliSense schema classes and production scripts classes.

On simple aspx pages just add this js using src attribute of <script> tag as:

<script src="/js/ASPxScriptIntelliSense.js" type="text/javascript"></script>

That's it - you now have full IntelliSense support for DevExpress client controls in BLOCKED SCRIPT



New Cast Methods

We’ve also added special static Cast methods which enable you to cast the DevExpress control's client object and then get the client object’s properties, methods and events via IntelliSense.

(e.g. ASPxClientButton.Cast(obj), ASPxClientTreeList.Cast(obj), etc.). You can use these methods with event arguments:

<script type="text/javascript">
function OnGridRowDblClick(s, e) {

var gridInstance = ASPxClientGridView.Cast(s);

gridInstance.StartEditRow(gridInstance.GetFocusedRowIndex());
}
</script>

These new cast methods also accept the ClientInstanceName of the client object. Therefore, to get a client object with IntelliSense support, simply pass the ClientInstanceName as a string to the Cast method:

<form id="form1" runat="server">

<script type="text/javascript">
function OnGridRowClick(s, e) {
var gridInstance = ASPxClientGridView.Cast("grid");
}
</script>

<div>
<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="grid">
<ClientSideEvents Init="OnGridRowClick" />
</dx:ASPxGridView>
</div>
</form>
Cast Sender Object
You also get JavaScript IntelliSense for the gridInstance variable. For example, this method shows how you can cast the sender object and get JavaScript IntelliSense:

Fig.1:



Fig.2:



there is great article by Mehul at DevExpress Blog….
Happy Coding.

Monday, October 17, 2011

ASPxGridView GridViewCommandColumn delete button image at runtime with delete confirmation

 Scenario:
I have aspxGridView with list of items and i want to confirm from user before deletion
of a row/ record.

Solution:
There are two approach to achieve this target. one is
Using the in-built Delete button:  
GridViewCommandColumn.DeleteButton


and another is:
Custom Button that you will create from scratch