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

July 2011 - Posts

  • ASP.NET GridView Features - Filter All Data And Not Just What Is Displayed

    I just spoke with a new customer today named Jason. Jason is switching from a competitor's ASP.NET GridView to the DevExpress ASPxGridView.

    One of the reasons that Jason switched was because how the ASPxGridView filters data:

    THE ASPXGRIDVIEW FILTERS THE SERVER'S DATA AND NOT JUST WHAT'S DISPLAYED!

    Callbacks FTW!

    filter-control-largeThe DevExpress ASPxGridView runs its operations on the server using AJAX callbacks. This means that anytime you do a sorting, grouping, filtering or other operation then:

    1. a callback is initiated
    2. the operation is processed on the server
    3. and the ASPxGridView is updated seamlessly w/o a full page refresh

    That's it!

    And because these operations are run on the server, the ASPxGridView display results are accurate since the operation is applied to the entire set of data.

    3 Great Ways To Filter

    The ASPxGridView offers you 3 great ways to filter data:

    What do you love about the ASPxGridView's Filtering features? Drop me a line below. Thanks.

    Accept No Limitations - Voted Best Grid by readers of DevProConnections Magazine for 4 straight years

    The ASPxGridView Suite is a feature-complete grid and editors library for ASP.NET. With blazing fast data loading, extensive data shaping options, and lightweight memory footprint, the ASPxGridView allows you to deliver a highly compelling and effective end-user experience with ease.

    Go with the winner - the most decorated ASP.NET Grid Control in the market.

    Check out all the great features now: ASP.NET Data Grid and Data Editors

    Follow MehulHarry on Twitter

  • Now Available - ASP.NET MVC 3 Razor Demos Online!

    DevExpress_MVCGood news for you ASP.NET MVC 3 Razor View Engine fans.

    We've updated all of our online demos to the Razor View Engine code!

    Check our the updated code online at http://mvc.devexpress.com

    Available in v2011 vol 1.6

    A local version of our MVC demos is available now in the DXperience v2011 volume 1.6 minor release.

    Download it here: http://devexpress.com/ClientCenter/Downloads/

    How To Use In MVC 3

    The DevExpress ASP.NET MVC Extensions are fully compatible with ASP.NET MVC 3 Razor view engine now. Check out these resources to learn more about using:

    Here's a preview of the Razor demo code:

    @using System.Text.RegularExpressions
    
    @Html.DevExpress().GridView(
        settings =>
        {
            settings.Name = "gvDataBinding";
            settings.CallbackRouteValues = new { Controller = "GridView", Action = "DataBindingPartial" };
            settings.Width = Unit.Percentage(100);
    
            settings.SettingsText.Title = "DevExpress on Twitter";
            settings.Settings.ShowTitlePanel = true;
            settings.Settings.ShowStatusBar = GridViewStatusBarMode.Visible;
            settings.SettingsPager.Mode = GridViewPagerMode.ShowAllRecords;
            settings.SettingsPager.AllButton.Text = "All";
            settings.SettingsPager.NextPageButton.Text = "Next >";
            settings.SettingsPager.PrevPageButton.Text = "< Prev";
    
            settings.SetStatusBarTemplateContent(c =>
            {
                ViewContext.Writer.Write(
                    "<span id=\"lblLoading\">&nbsp;</span>"
                );
            });
            settings.SetEmptyDataRowTemplateContent(c =>
            {
                ViewContext.Writer.Write(
                    "Sorry, the twitter server is not available this time."
                );
            });
                
                
            settings.CustomColumnDisplayText = (sender, e) => {
                if(e.Column.FieldName != "Text") return;
    
                string displayText = (e.Value != null) ? e.Value.ToString() : "";
                TweetsDemoReplaceItem[] replaceItems = new TweetsDemoReplaceItem[] { 
                    new TweetsDemoReplaceItem{
                        RegEx = new Regex("http://[^\\s()]+"),
                        ReplaceDelegate = (text, match) => { return text.Replace(match.Value, string.Format("<a href=\"{0}\">{0}</a>", 
                            HttpUtility.HtmlEncode(match.Groups[0].Value))); }
                    },
                    new TweetsDemoReplaceItem{
                        RegEx = new Regex("(^|[^\\w])@(\\w+)"), 
                        ReplaceDelegate = (text, match) => { return text.Replace(match.Value, string.Format("{0}<a href=\"http://twitter.com/{1}\">@{1}</a>", 
                            match.Groups[1], HttpUtility.HtmlEncode(match.Groups[2].Value))); }
                    },
                    new TweetsDemoReplaceItem{
                        RegEx = new Regex("(^|[^\\w/&?])(#\\w+)"), 
                        ReplaceDelegate = (text, match) => { return text.Replace(match.Value, string.Format("{0}<a href=\"http://twitter.com/search?q={1}\">{2}</a>", 
                            match.Groups[1], Url.Encode(match.Groups[2].Value), HttpUtility.HtmlEncode(match.Groups[2].Value))); }
                    }
                };
    
                foreach(TweetsDemoReplaceItem replaceItem in replaceItems) {
                    MatchCollection matches = replaceItem.RegEx.Matches(displayText);
                    foreach(Match match in matches)
                        displayText = replaceItem.ReplaceDelegate(displayText, match);
                }
                e.DisplayText = displayText;
            };
                                    
        }).Bind(Model).GetHtml()

    This the razor code for the partial view of our MVC GridView's Twitter Databinding Demo.

    Available Now!

    Our new MVC 3 Razor demos of our ASP.NET MVC Extensions are available now.

    Download the minor release of DXperience v2011 vol 1.6 and see for yourself.

    Are you looking forward to the new MVC 3 Razor demos? Drop me a line below, 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 of DXperience now: http://www.devexpress.com/Downloads/NET/

    Follow MehulHarry on Twitter

  • ASP.NET Webinar: Learn How To Add An ASP.NET Tooltip Using Popup Control

    Update: Watch the webinar video and then download a sample project from the webinar in this post.

    Mehul HarrySign-up for this ASP.NET Webinar on Monday at 10am PST and learn how to display a tooltip using the versatile DevExpress ASP.NET Popup Control:

    Register for this webinar here:

    Overview

    Did you know that you can use the DevExpress ASP.NET Popup control to show just about any type of tooltip?

    Check out this example which shows a helpful tooltip when the end-user enter an input field:

    ASP.NET Tooltip using DevExpress Popup Control

    The tooltip then disappears out of the way when the end-user exits the field.

    In the webinar, we'll explore how to add a tooltip just like this to just about any element in your website.

    Register Now

    Please join me for this webinar by registering here:

    https://www3.gotomeeting.com/register/809076254

    Thanks! And I look forward to seeing you on the webinar online.

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. 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. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

    Follow MehulHarry on Twitter

  • ASP.NET MVC - How To Show A Popup Warning Before Session Timeout - #aspnetmvc

    Learn how to add a friendly 'Session Timeout' warning dialog message to your ASP.NET MVC website using the DevExpress MVC PopupControl extension. This helps you to:

    1. Display a warning message before a user's session times out and
    2. Allow the end-user to continue the session or log them our automatically

    ASP.NET MVC Session Timeout Popup Warning - DevExpress

    This sample is the ASP.NET MVC version of the previous sample I mentioned here.

    Session Timeout

    Session Timeout is a property that you can set in your web.config file to control when a user session should expire.

    Unfortunately, your end-users don't know when their session will expire unless you notify them somehow.

    Popup Warning

    One of the best way to notify your end-users is using a popup warning dialog. You may have seen these types of popups on your bank's website.

    Say you're checking your bank balance online and need to answer a phone call elsewhere. You've just left the browser open at your bank account details which creates a potential security issue. To put it mildly.

    If the ASP.NET Session timeout has been set then it will expire the session but it may not give any useful hints to the end-user. Most banking websites will display a client-side popup dialog to warn and ask the end-users if they would like to continue the session.

    The popup could have a one minute timer and an OK button. If the end-user is still there and wants to continue the session then they'll click the 'Ok' button. But if the timer on the popup runs out then they'll automatically be logged out.

    Solution: MVC PopupControl Extension

    Now you can have this wonderful feature in your websites using the DevExpress ASP.NET MVC PopupControl extension!

    Download the sample ASP.NET MVC solution here:

     Download-button

    File: MVCSessionTimeoutPopup.zip

    Project Details

    Let's break down what's in the project. The slick sample contains 4 key files:

    • TimeoutPartial.cshtml - Partial view that contains the Popup warning dialog
    • TimeOutPage.cshtml - Simple page to redirect to when session has timed out
    • Index.cshtml - Default page that calls the TimeoutPartial view
    • HomeController.cs - Controller containing the action methods for routing to TimeOutPartial view

    All the Java‍Script magic happens in the TimeoutPartial.cshtml view:

    @functions {
    
        public int PopupShowDelay {
            get { return 60000 * (Session.Timeout - 1); }
        }
    
    }
    
    <script type="text/javascript">
        window.SessionTimeout = (function() {
            var _timeLeft, _popupTimer, _countDownTimer;
    
            var stopTimers = function() {
                window.clearTimeout(_popupTimer);
                window.clearTimeout(_countDownTimer);
            };
    
            var updateCountDown = function() {
                var min = Math.floor(_timeLeft / 60);
                var sec = _timeLeft % 60;
                if(sec < 10)
                    sec = "0" + sec;
    
                document.getElementById("CountDownHolder").innerHTML = min + ":" + sec;
    
                if(_timeLeft > 0) {
                    _timeLeft--;
                    _countDownTimer = window.setTimeout(updateCountDown, 1000);
                } else  {
                    window.location = "Home/TimeOutPage";
                }            
            };
    
            var showPopup = function() {
                _timeLeft = 60;
                updateCountDown();
                ClientTimeoutPopup.Show();
            };
    
            var schedulePopup = function() {
                stopTimers();
                _popupTimer = window.setTimeout(showPopup, @PopupShowDelay);
            };
    
            var sendKeepAlive = function() {
                stopTimers();
                ClientTimeoutPopup.Hide();
                SessionTimeout.schedulePopup();
            };
    
            return {
                schedulePopup: schedulePopup,
                sendKeepAlive: sendKeepAlive
            };
    
        })();    
    
    </script>
    
    @using (Html.BeginForm()) {
        <p>
            A timeout warning popup will be shown every @(Session.Timeout - 1) min.
        </p>   
        @Html.Partial("TimeoutPartial")
    }

    Download the sample and integrate into your websites to give your end-users a friendly reminder that their session is expiring soon and would they like to keep it running. Smile

    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 of DXperience now: http://www.devexpress.com/Downloads/NET/

    Follow MehulHarry on Twitter

  • ASP.NET Tip: How To Show A Tooltip Using The ASP.NET Popup Control

    Did you know that you can use the DevExpress ASP.NET Popup control to show just about any type of tooltip?

    Check out this example which shows a helpful tooltip when the end-user enter an input field:

    ASP.NET Tooltip using DevExpress Popup Control

    The tooltip then disappears out of the way when the end-user exits the field.

    To try this sample live now, click here: Popup Control - Client-Side Functionality

    To see the code, click on the 'Code' tab of the demo at the top right. Below I'll show you a modified and simpler version of this sample.

    Versatile Popup Control

    Why use the DevExpress ASP.NET Popup Control? Because it's versatile, customizable and provides great client-side events and functionality.

    You can even use it with the DevExpress ASP.NET GridView:  ASPxGridView Cell Template Popups

    Display A Simple Tooltip

    Let's see how easy it is to add a simple tooltip when we mouse-over a hyperlink:

    image

    Follow these 3 easy steps:

    1. Declare your HTML element that you'd like to attach the popup control to. We'll use the hyperlink element with ID of "idUser1" to attach the Popup Control to:

    <p>
        Mouse over <a id="idUser1" href="#">this link</a> to see the slick tool tip using the DevExpress ASP.NET Popup control!
    </p>

    2. Declare your ASPxPopupControl and set the PopupElementID to the HTML element that it will attach to (idUser1 in our case):

    <dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" 
        PopupAction="MouseOver" PopupElementID="idUser1"
        ShowHeader="False" Width="100px" PopupHorizontalAlign="LeftSides" 
        PopupVerticalAlign="Above" PopupVerticalOffset="-10" 
        PopupHorizontalOffset="-10" CloseAction="MouseOut">
        <ContentStyle CssClass="pcContent"></ContentStyle>
        <ContentCollection>
            <dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server" SupportsDisabledAttribute="True">
                <div>
                    DevExpress FTW!
                </div>
                <div class="pcCalloutBack">
                    <div class="pcCallout"></div>
                </div>
            </dx:PopupControlContentControl>
        </ContentCollection>
    </dx:ASPxPopupControl>

    You can also add just about any content you want within the ContentCollection area of the ASPxPopupControl. Here, we've just added a couple DIV elements to display a simple message and assigned CSS classes for styling. We've also defined the PopupAction to be MouseOver. Set the CloseAction to MouseOut to hide the tooltip after the mouse over.

    3. Style and customize your popup control. Here are a couple of the styles used for the DIV element used within the popup:

    <head runat="server">
        <title>ASP.NET Tooltips using DevExpress ASP.NET Popup Control</title>
        <style type="text/css">
            .pcContent {
                background-color: Yellow;
            }
            .pcCalloutBack {
                position: absolute;
                border-style: solid;
                width: 0px;
                margin-top: 10px;
                margin-left: 0px;
                border-width: 15px 15px 0px 5px;
                border-color: transparent;
                border-top-color: #8B8B8B;
            }
            .pcCallout {
                position: absolute;
                border-style: solid;
                width: 0px;
                margin-top: -17px;
                margin-left: -5px;
                border-width: 15px 15px 0px 5px;
                border-color: transparent;
                border-top-color: Yellow;
            }
        </style>
    </head>

    Now run this sample and mouse over the hyperlink to see the slick tooltip.

    Download a sample version of the above as a simple ASP.NET website:

    bDownloadNow

    Helpful CodeCentral Samples

    Here are 3 other helpful CodeCentral samples that show you how to return values and pass parameters with the ASPxPopupControl:

     

    Summary

    Use the DevExpress ASP.NET Popup Control to display a slick and customized tooltip for your websites. Then drop me a line below with your thoughts, thanks.

    Save time and money...

    Save time and money with high quality pre-built components for ASP.NET, Windows Forms, WPF, Silverlight and VCL as well as IDE Productivity Tools and Business Application Frameworks, all backed by world-class service and support. Our technologies help you build your best, see complex software with greater clarity, increase your productivity and create stunning applications for Windows and Web in the shortest possible time.

    Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

    Follow MehulHarry on Twitter

  • ASP.NET GridView: How-To Add Multiple Check-Box Column Filter

    Watch the "Mastering ASP.NET GridView: Filtering and Multiple Checkboxes" webinar and learn how-to add this easily the ASPxGridView.

    Check out this slick Code Central sample that shows you how to add a multiple selection header filter to the DevExpress ASP.NET GridView:

    ASPxGridView Multiple Selection Header Filter

    Code Central Sample:

    Implementing pivot grid like filtration style

    How to use Code Central

    How-To:

    To get a header filter like our ASPxPivotGrid, here's a short explanation:

    1. Add an <img> tag to the column's CaptionTemplate Container
    2. Then handle its' click event and show the PopupControl containing all required items. It is possible to populate the ASPxPopupControl with items using the ASPxCallback control.
    3. You should send a callback to the server, add all the required items and finally return the rendering result to the client.
    4. When the end-user selects several items and clicks the OK button, send the GridView's callback to the server and filter it as needed.

    You can try this sample online now. Then download the code central sample to your local machine and have fun with the project yourself.

     

    Try this useful filter sample for the ASPxGridView. Then drop me a line below with your thoughts. Thanks.

     

    Accept No Limitations - Voted Best Grid by readers of DevProConnections Magazine for 4 straight years

    The ASPxGridView Suite is a feature-complete grid and editors library for ASP.NET. With blazing fast data loading, extensive data shaping options, and lightweight memory footprint, the ASPxGridView allows you to deliver a highly compelling and effective end-user experience with ease.

    Go with the winner - the most decorated ASP.NET Grid Control in the market.

    Check out all the great features now: ASP.NET Data Grid and Data Editors

    Follow MehulHarry on Twitter

  • Upcoming Webinar: Sailing the Ocean of 1’s and 0’s - Chris Woodruff MVP

    Chris Woodruff WebinarRegister now for Chris 'Woody' Woodruff's upcoming webinar on:

    Sailing the Ocean of 1’s and 0’s

    Webinar Details

    • Subject: Sailing the Ocean of 1’s and 0’s
    • Date: Friday, September 9th, 2011
    • Time: 10am PDT (GMT -07:00)
    • Length: 1 hour (or so)
    • Presenter: Chris Woodruff (Perficient Inc. & Deep Fried Bytes podcast)
    • Level: 200 - Intermediate

    When the development of theory out-paces data, Researchers and Information Workers often find that new ideas cannot be tested for lack of tools or technology. Researchers in active areas of science in addition to corporate Information Workers face a different challenge: Gathering data is so easy and quick that it exceeds our capacity to validate, analyze, visualize, store, and curate the information. This talk addresses this challenge and the opportunity it presents.

    We as technologists, software engineers and database experts need to recognize these new challenges and allow researchers and Information Workers to facilitate what we might call open source innovation, in which advances have a sociotechnical component. Individual labs and projects will routinely reach beyond their walls, and organizations will strive to create and sustain collaborative, distributed networks of investigators. In this talk we will look at what are the challenges and possible paths that can lead to fostering innovation that will be needed as a core organizational value.

    The Fourth Paradigm book which the talk will draw from is dedicated to and reflects the vision of the late Jim Gray of Microsoft Research, who envisioned a world of scholarly resources text, databases, and any other associated materials that were seamlessly navigable and interoperable. Gray loved sailing. Sailors, of course, guide a vessel by reacting to the nearest swell and wave. But the ocean also affords a chance to scan the horizon in anticipation of the future, to see what’s ahead and imagine what’s just out of view. The talk will give attendees a glimpse of the horizon for all technologists and, at their best, a peek at what lies beyond. It’s a journey well worth taking.

    About Chris Woodruff

    Chris Woodruff (or Woody as he is commonly known as) has a degree in Computer Science from Michigan State University’s College of Engineering. Woody has been developing and architecting software solutions for almost 15 years and has worked in many different platforms and tools. He is a community leader, helping such events as Day of .NET Ann Arbor and Day of .NET Grand Rapids. He was also instrumental in bringing the popular Give Camp event to Western Michigan where technology professionals lend their time and development expertise to assist local non-profits. As a speaker and podcaster, Woody has spoken and discussed a variety of topics, including database design and open source. He is a Microsoft MVP in Data Platform Development and was recently recognized as one of the top 20 MVPs world-wide. Woody works at Perficient, Inc. as a Lead Tech Consultant.

    Woody is the co-host of the popular podcast “Deep Fried Bytes” and blogs at www.chriswoodruff.com. He is the President of the West Michigan .NET User Group and also is a co-founder of the software architecture online portal nPlus1.org.

    Woody has worked in many arenas throughout the years, including healthcare, manufacturing, publishing, promotion execution and the automotive industry. He has experience with starting and running new ventures, including past work with technology startups. Woody continues to develop his expertise by learning & developing new technologies to better meet the needs of his clients, while devoting his free time to improving the development community at large, and giving back to the community in which he lives.

    Register Now

    Register now for this informative and interesting webinar. Thanks.

    Save time and money...

    Save time and money with high quality pre-built components for ASP.NET, Windows Forms, WPF, Silverlight and VCL as well as IDE Productivity Tools and Business Application Frameworks, all backed by world-class service and support. Our technologies help you build your best, see complex software with greater clarity, increase your productivity and create stunning applications for Windows and Web in the shortest possible time.

    Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

    Follow MehulHarry on Twitter

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