Mehul Harry's DevExpress Blog

This Blog

News


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)

Archives

December 2013 - Posts

  • How To Customize DevExpress ASP.NET Check Box control for the iOS theme

    The DevExpress ASP.NET controls are customizable. In fact, you can do things like move text from the left side of a control to the right side:

    DevExpress ASP.NET Check Box with iOS Theme

    In the image above, there is a DevExpress ASP.NET CheckBox control and CheckBoxList control. Both of these are displaying the DevExpress iOS theme for our ASP.NET products. The DevExpress ASP.NET iOS theme allows you display DevExpress ASP.NET controls with a native iOS look. However, they are still ASP.NET controls and not native apps. To create native apps using HTML5, check out DevExtreme.

    Still, the iOS theme is very useful in getting reach for your websites and giving your end-users a familiar experience.

    CheckBox & iOS Switch

    On iOS, a check box is displayed as a switch control. This makes it easier for users on mobile devices to touch (select) and get notified of the changed state.

    However, a customer asked if this was possible:

    One thing I’d like to see added is a property when using IOS theme, to have the “switch” be to the left of the text. And possible a column width property when multiple columns are used to correct for the case as shown below, where even a short line of text gets put on 2 lines. -James

    For reference, James has a website created with DevExpress ASP.NET controls. The website is slick in that uses browser detection and automatically displays the iOS theme for mobile devices. James says that this solution has worked out well for them and their users seem to like it too.

    Custom Text Alignment

    To solve James' question, we can do 3 easy things with DevExpress ASP.NET that do not require a new theme or property to be created:

    1. Set the ASPxCheckBox/ASPxCheckBoxList TextAlign property to "Right" to show a label on the right side of a switch.
    2. Set the Web.config -> devExpress -> themes -> styleSheetTheme property (not the "theme" property) to "iOS" to keep the markup style settings (see the http://www.devexpress.com/kbid=KA18643 KB Article for details).
    3. Define a specific CSS selector to avoid text wrapping (see the 
    https://www.devexpress.com/issue=Q464106 KB Article for details):

    Page:

    <style type="text/css">
        .SwitchNoWrap label { white-space: nowrap !important; }
    </style>
    

    ASPxCheckBox:

    <dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server" Text="Switch Demo"
        TextAlign="Right" SkinID="Switch">
    </dx:ASPxCheckBox>
    

    ASPxCheckBoxList:

    <dx:ASPxCheckBoxList ID="ASPxCheckBoxList1" runat="server" CssClass="SwitchNoWrap"
        TextAlign="Right" RepeatDirection="Horizontal" RepeatColumns="2">
        <Items>
            <dx:ListEditItem Text="Item 1" />
            <dx:ListEditItem Text="Item 2" />
            <dx:ListEditItem Text="Item 3" />
            <dx:ListEditItem Text="Item 4" />
        </Items>
    </dx:ASPxCheckBoxList>
    

    Web.config:

    <configuration>
      ...
      <devExpress>
        <themes ... styleSheetTheme="iOS" theme="" />
      </devExpress>
    </configuration>
    

    Download a sample project with the above settings here:
    DevExpressASPCheckBoxiOSDemo.zip

    (Use the DevExpress Project Converter tool if you're using a different version than 13.2.5).

    iOS Guidelines

    In my discussing this approach with one of our DevExpress iOS developers (and overalll fan), he mentioned that putting the caption on the right side of a switch is not standard on iOS. However, because this is a ASP.NET website and not a native app, you will not have to worry too much about Apple's App Store guidelines, with the proviso that you may confuse your end-users if they are used to the standard text alignment.

    You can read the Apple iOS Human Interface Guidelines here.

    Rest assured, though, that when the DevExpress ASP.NET team created the iOS theme we followed these guidelines as much as possible and as much as was feasible.

    When only the best will do.

    From interactive Desktop applications, to immersive Web and Mobile solutions, development tools built to meet your needs today and ensure your continued success tomorrow.

    Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications.

    Download a free and fully-functional version now: http://www.devexpress.com/Downloads/NET/

  • ASP.NET WebForms & MVC: GridView Batch Edit (What's new in 13.2)

    Check out the DevExpress ASP.NET GridView's excellent new editing feature in the latest 13.2 release:

    GridView Batch Editing

    DevExpress ASP.NET GridView Batch Editing

    The DevExpress ASP.NET Grid (ASPxGridView) control allows you to modify a batch of grid data on the client side and send it to the server in one request.

    Benefits

    Batch Edting allows your end-users to work in the DevExpress ASP.NET GridView control with ease. They can edit all the records using the keyboard only without moving their hand to reach for the mouse. And once they're finished, the can review, cancel, or save their changes.

    The DevExpress ASP.NET GridView also gives your end-users a great preview of what records have been changed before they're saved back to the server. And, like many DevExpress controls, you can choose the color that signifies an edited cell.

    Note: If the end-user chooses another action like sorting while they're batch editing, the DevExpress ASP.NET GridView will ask them if they want to lose their changes. So your end-users will get a helpful notification and can choose to continue editing or choose a new action.

    ASP.NET WebForms & MVC

    The GridView Batch Editing feature is available for both ASP.NET WebForms and MVC platforms.

    How To Use

    To enable the batch editing functionality, set the Mode property to 'Batch'. In this mode, the grid data contained in a page can be edited using in-line editors. The modified cells are colored in green. All changes are maintained on the client side until the Save changes link is clicked. You can cancel all changes by clicking the Cancel changes link.

    If a grid contains modified data, it displays a confirm message before a grid callback or postback is performed.

    In this demo, use the Edit mode combo box (“cell” or “row”) to specify the control element used to edit the data. The Start edit action combo box (“click” or “double click”) allows you to specify the action that should be used to begin editing grid data.

    Online Demos

    WebForms: DevExpress ASP.NET GridView Batch Editing Demo

    MVC: DevExpress ASP.NET MVC GridView Batch Edting Demo

    Download the latest version of DevExpress ASP.NET today and try the slick new batch editing feature of the DevExpress ASP.NET GridView.

     

    When only the best will do.

    From interactive Desktop applications, to immersive Web and Mobile solutions, development tools built to meet your needs today and ensure your continued success tomorrow.

    Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications.

    Download a free and fully-functional version now: http://www.devexpress.com/Downloads/NET/

  • ASP.NET WebForms & MVC: Token Box Control (What's new in 13.2)

    Check out the new DevExpress ASP.NET Token Box control that's part of the DevExpress 13.2 release:

    The DevExpress ASP.NET Token Box (ASPxTokenBox) editor provides your end-users the ability to auto-complete values from a predefined list. An end-user can select a value from the dropdown window list or type it manually:

    What's a Token?

    If you look up the definition of Token on google then you'll see many definitions:

    However, in context to the TokenBox control, I prefer to think of a token as a symbol. Therefore, we display the selected item from dropdown with a colored box around it. This box now indicates to the user the choice they've selected from the dropdown. It's become the symbol of the words and numbers that represents the selected item. And the token box also contains an X mark at the right to allow the end-user to easily remove it the selected item. This visual cue is a different way to display selected items but I believe it gives the users a nice user interface when they can easily see their selected items.

    You can see examples of the token box style input on popular websites like Gmail's To field:

    And Facebook's messages:

    And now, you can get this slick functionality and look in your ASP.NET web projects with the DevExpress ASP.NET TokenBox.

    ASP.NET MVC & WebForms

    This new data editor is available for both the ASP.NET WebForms and MVC platforms. These are both part of the DevExpress 13.2 release.

    Features

    The new Token Box control gives you many great features and themes, including:

    • DataBinding - You can databind the Token Box editor easily using a datasource on WebForms or Model Binding on ASP.NET MVC.

    • Themes - All the DevExpress themes are fully supported by this control.

    • AllowCustomTokens - allows you to control whether the end-user can create custom tokens or they must choose tokens from the dropdown list.

    • ShowDropDownOnFocus - controls the dropdown window visibility when the editor gets focus.

    • IncrementalFilteringMode - allows your filter the dropdown as items are typed into the window.

    Getting Started Video

    Watch the short ASP.NET Token Box Getting Started video below to see how easy and powerful this new control is.

    ASP.NET WebForms:

    ASP.NET MVC:

    When only the best will do.

    From interactive Desktop applications, to immersive Web and Mobile solutions, development tools built to meet your needs today and ensure your continued success tomorrow.

    Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications.

    Download a free and fully-functional version now: http://www.devexpress.com/Downloads/NET/

  • ASP.NET: SharePoint 2013 Support (What's new in 13.2)

    Take a look at the new DevExpress SharePoint 2013 Demo site:

    DevExpress ASP.NET and SharePoint 2013

    http://sharepoint.devexpress.com/

    The new demo is great too. It's cleaner and we've improved the navigation. On the left side, you'll find the DevExpress ASP.NET NavBar (ASPxNavBar) control integrated there. Give it a try now.

    SharePoint 2013 supported

    Beginning with the DevExpress 13.1 release, SharePoint 2013 is supported by all the DevExpress ASP.NET controls. Including the two SharePoint specific WebParts (List GridView and HtmlEditor):

    DevExpress ASP.NET SharePoint 2013 Web Parts

    New SharePoint 2013 features in 13.2

    We added support for SharePoint 2013 in the first release of 2013 (13.1). But we wanted to wait to announce it because we've added a lot more features in the 13.2 release:

    1. The new SharePoint 2013 Demo portal! - We completely redesigned this demo and the new site gives you a great example of DevExpress ASP.NET integrated into SharePoint 2013.
    2. Design time support - DevExpress ASP.NET controls fully support design time in SharePoint projects. See also: Visual Web Part Creation
    3. ASPxHtmlEditor and SPxHtmlEditorWebPart:
      1. Improved visual interface in the list pages
      2. Controls are hidden on SharePoint wiki pages
    4. SPxListViewWebPart - DevExpress ASP.NET GridView SharePoint WebPart:
      1. Document Library support - (Document libraries are collections of files that you can share with team members on a Web based on Microsoft Windows SharePoint Services. For example, you can create a library of common documents for a project, and team members can use their Web browsers to find the files, read them, and make comments. Users with Microsoft Office can check out and edit the files as if they resided on a local or network drive)
      2. Support SPFieldLookup - (A lookup field takes its value from a field in another list. The list that provides data for the lookup field is called the lookup list. To get a reference to the lookup list, access the SPFieldLookup object's LookupList property. To determine which field in the lookup list is providing information, access the LookupField property)
      3. Support SPChoiceField and SPFieldMultiChoice - (SPFieldChoice - allows you to select one or more values)
      4. Support SPFieldUser (Similar to SPFieldLookup)
      5. External Field Support (This column lets you combine a column of data from an external data source with other columns in a native list or library. Because an external data column is added to a native list or library, all related list or library features work, including versioning, approvals, check-in and check-out, and file attachments )
      6. New context menu with different access rights
      7. New web part settings panel
      8. Localization

    More Samples

    DevExpress ASP.NET and SharePoint 2013 - Display Form

    We've added even more great samples of DevExpress and SharePoint integration to show you what's possible:

    There's even more samples of DevExpress and SharePoint integration:

    Download Samples - Get any of the samples from the site directly and try it with your SharePoint portal (of course you'll need DevExpress ASP.NET products). And if you have any issues, please let our excellent support team know and they can help you.

    SharePoint 2010, MOSS 2007

    Starting with version 13.1 (v2013 vol 1), DevExpress ASP.NET controls only support SharePoint 2013.

    Why?

    DevExpress base/ASP.NET products migrated to .NET Framework v4+ with version 13.1 (v2013 vol 1). SharePoint versions prior to SharePoint 2013 are no longer supported (as of 13.1), because they require/operate under ASP.NET v2 (.NET v2) runtime.

    If you're using any of the following versions then you'll need to use DevExpress ASP.NET controls that prior versions of 13.1 (v2013 vol 1):

    • WSS 3.0
    • MOSS 2007
    • SharePoint 2010

    What's new in Microsoft SharePoint 2013?

    To learn what's new in Microsoft SharePoint 2013, I recommend the following resources:

    The new SharePoint.devexpress.com site is a fantastic example of how you can integrate any of the 90+ powerful DevExpress ASP.NET controls and SharePoint 2013 to provide a great experience for your end-users.

    When only the best will do.

    From interactive Desktop applications, to immersive Web and Mobile solutions, development tools built to meet your needs today and ensure your continued success tomorrow.

    Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications.

    Download a free and fully-functional version now: http://www.devexpress.com/Downloads/NET/

  • ASP.NET: MVC 5 Support (What's new in 13.2)

    Great news for ASP.NET MVC developers: DevExpress MVC Extensions support ASP.NET MVC 5!

    The Microsoft ASP.NET team recently released the ASP.NET MVC 5 version of the framework. And the over 50 DevExpress MVC extensions are fully supported in ASP.NET MVC 5!

    Versions: 12.2.14, 13.1.9, and 13.2

    ASP.NET MVC 5 support is included with DevExpress versions 12.2.14, 13.1.9, and 13.2. However, the DevExpress MVC Wizard supports MVC 5 only in 13.1.9 and 13.2 versions of our library.

    New MVC 5 Assembly

    There's a new DevExpress.Web.Mvc5.v13.2 assembly. When using DevExpress MVC extensions with ASP.NET MVC 5, this new assembly is required. If you use the DevExpress wizard to generate a new MVC 5 project, it will automatically include this new reference.

    Why the new MVC 5 assembly?

    This is different than previous versions because ASP.NET MVC 5 introduced a breaking change: Currently, MVC 5 requires full trust. The official MVC 5 site specifies the required rule: “Remove any trust levels other than Full”.

    DevExpress MVC Advantages

    The DevExpress ASP.NET MVC Extensions offer you many advantages when working with ASP.NET MVC, including:

    Over 50 extensions - Native MVC extensions that provide you functionality, beauty, and performance.

    File New Wizard - The DevExpress file project templates save you a lot of time when creating a new MVC project that will use DevExpress MVC extensions. Learn more here:

    Insert Extension Wizard - We've integrated a very useful wizard inside of Visual Studio that helps you to create new DevExpress MVC extensions, model bind them, and thus save you time. Check out this video to see it in action:

    And there's a ton of other great advantages like cross-browser support, beautiful themes, localization, and more. Learn more here.

    What's new in ASP.NET MVC 5?

    MVC 5 brings some interesting new features:

    • One ASP.NET
    • ASP.NET Identity
    • Bootstrap
    • Authentication filters
    • Filter overrides
    • Attribute routing

    Learn more about these features here: ASP.NET and Web Tools for Visual Studio 2013 Preview Release Notes

    Helpful links

    Watch the DevExpress ASP.NET MVC Getting Started videos to see how easy and powerful they are:

    To learn more about Microsoft ASP.NET MVC 5:

    Thanks.

    Build Your Best - Without Limits or Compromise

    Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

    Read the latest news about DevExpress ASP.NET MVC Extensions: http://dxpr.es/ov1tQa

    Download a free and fully-functional version now: http://www.devexpress.com/Downloads/NET/

LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners