Memory dumps of a developer

Articles and tutorials on .NET Core, ASP.NET MVC, Kendo UI, Windows 10, Windows Mobile, Orchard

  • D-18 : Bye Bye Internet Explorer, Hello Edge

    Microsoft is making a major change with the browser in Windows 10, it's been a major pain point for them since the modern web era which in turn conceded the ground to players like Firefox and Chrome. So they decided to replace IE with a modern browser in Windows 10. First announced in January with code name Spartan, it was built from the scratch and was based on Edge, the rendering engine of IE but devoid of all the old stuff that was their for compatibility with older technologies. Later they branded the browser as Edge and with a slight tweak to the existing logo, introduced it the world during the Build 2015 developer conference. I feel they should have given a new logo to get rid of the negativity surrounding IE.

    1. Design

    The browser is lighter, faster and does have a minimalist flat design in accordance with Microsoft's modern design principles. It has got very little chrome and simple icons won't distract users from the content of the websites and it won't take long for the users to get in love with it.


  • D-19 : The All New Start Menu

       The Start menu which was introduced with Windows 95 is making a comeback in Windows 10. Microsoft was in line of fire for replacing the Start menu with the Start Screen in Windows 8. It was good for a touch screen device but not for a device attached to a keyboard and mouse. Microsoft did tried to lessen the damage by introducting the option to boot to desktop in Windows 8.1, users were not all intereseted in the Start Screen. It soon became an abandoned area in the OS as time went on.

    In Windows 10, Microsoft went through a lot of iterations to the Start menu in various builds and as we move closer to the launch we are seeing the one which will be released to manufacturing. The familar icon reclaims it's position in the task bar and the shortcut key also remains the same.

    1. Bigger, Wider Start Menu

    The menu will have mainly two sections, the left section may appear similar to the one in Windows 7 but it has got much more and second sections contains live tiles of various universal apps in the system. The context menu is retained from Windows 8.1 and can be accessed by right clicking on the Start button. The top left portion will display a picture of the logged in user with their name, followed by a list of most recetly used apps. It's followed by the links for File Explorer, Settings, Power and lastly the All Apps link. On the right side will have the default store apps likw Music, Edge, Search whose size can be resized.

    v


  • D-20 : What's new in Windows 10

     As you all know Windows 10 is going to be released worldwide on July 29 and through this series of posts, I will be posting about a number of features and changes coming to the new OS.

    And the much talked about features are..

    1. Start Menu makes a comeback !!!

    This was one of the most requested features in the uservoice forums since the launch of Windows 8 and finally Microsoft has responded to the criticisms by bringing it back. They haven't gone back to experience that we had in Windows 7, but introduced a new user interface with the modern UI and managed to include both the apps and old program list in one place.

    v


  • Upgrading Orchard to v1.9

    The blokes at Orchard has released a new version of their popular content management system bumping it to 1.9. You can read more about it here detailing the features added and bug fixes. If you are using Orchard as your CMS, the following steps will help you to migrate to the latest version.

    First of all to check the version of your Orchard instance, log on to your admin dashboard and scroll down to bottom  right of the page.

    1_thumb11

    There are multiple options for upgrading the instance which is detailed in this blog post and I will be using the approach. In this approach I will be using a copy of the site in my local machine which acts as a staging site and will upgrade the Orchard in this instance and if every thing is fine then will upload the files back to the production site.

    Step 1 : Backup

    It is very important to take the back up of the production site and the database so that we will be able to restore it back to the original state as a last resort if something catastrophic happens. Also if you are using the SqlCe database make sure that the sdf file inside App_Data folder is also backed up.

    Step 2 : Download the latest version

    You can download the package from the Download section in the Orchard website, but for my case I will be cloning the full source code from the GitHub Repository which is detailed in this blog post. Once the cloning is completed the folder structure will look like as given in the figure below.

    2_thumb9


  • Part 5 – Applying Styles and Themes to Kendo UI Widgets

    In today’s post I will help you to apply styles and themes provided by Kendo UI to the elements in your page. These styles and themes can be applied to not only the widgets but also to the native elements in the page too.

    Kendo UI comes with a number of predefined themes that can be applied to your page and to incorporate it in your page, you needs to include two css files in the head section.

    kendo.common.css – contains all the styles for positioning and widget dimensions

    kendo.{theme name}.css – contains the theme specific styles

    Note : The common.css file is mandatory, if you want your widgets to appear and function correctly.

    Let’s build a page with two text boxes, one hyperlink and a button and then we can apply the styles and themes in it.

        <div >
            <div >
                <div ><span><h3>Applying Styles and Themes for Kendo Widgets</h3></span></div>
            </div>
            <div >
                <div >
                    <div >Name</div>
                    <div><input type="text" id="txtName" /></div>
                </div>
            </div>
            <div >
                <div >
                    <div >Address</div>
                    <div ><input type="text"  id="txtAddress" /></div>
                </div>
            </div>
            <div >
                <div >
                    <div >&nbsp;</div>
                    <div >
                        <a href="#" >Clear</a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="button"  id="btnSubmit" value="Search" />
                    </div>
                </div>
            </div>
        </div>

  • Part 4 – Binding Events to Kendo UI Widgets

    Each widget available in Kendo UI exposes different events depending on the features available for each one of them. For example the DatePicker widget exposes events like open, change, close etc. Like in widget configuration, Kendo UI provides the ability to bind the events during the initialization phase itself as well as after the widget creation too.

    Binding Events

    First, we will see how we can bind events during the initialization phase.

    <div class="col-md-4"><input type="date" id="jQDatePicker" /></div>
    
    <div class="col-md-8"><span id="spResult"></span></div>
    <script type="text/javascript">
    
        $(document).ready(function () {
            $("#jQDatePicker").kendoDatePicker({
                start: "decade",
                format: "dd-MMM-yyyy",
                change: DatePickerOnChange
    
            });
        });
        function DatePickerOnChange() {
            var resSpan = $("#spResult");
            resSpan.append("Changed date<br>");
        }
        
    </script>

  • Part 3 – Setting Widget Properties

    So far in the series we have already seen how to incorporate Kendo UI in web pages and also how to initialize it. Please visit my last post to if you needs to recollect it. In this post I will be explaining how to set various options available for a widget.

    First, let’s see how we can set values for options while initializing the widget itself. I am going to use the DatePicker widget itself and will set the values for the start and format options of the widget. The start option specifies the start view when we click on the calendar icon in the textbox for the first time. Available options for the same is given below.


  • Part 2 - Getting started with Kendo UI

    In the last post I gave an introduction to Kendo UI about it’s features and advantages and also about the various bundles offered by them. In this post I will help you to get started with development using Kendo UI in your web applications.

    As I said in my earlier post, Kendo UI is built on top of jQuery, so it’s a pre-requisite to have jQuery in your application. The latest version of Kendo UI requires jQuery version 1.9.1 or higher and you can download it from their site or can use any of the CDN’s  which hosts jQuery. Please visit the link here to know more about the prerequisites.

    I will be using Kendo UI Core bundle which is a free offering from Telerik and can be downloaded from their site. To download you need to register an account with them and will be able to download the archive once you signed in to their site. The downloaded archive will contain folders as shown below.

    1

    Pic Courtesy – Telerik


  • Part 1 - Introduction to Kendo UI

    Kendo UI is a HTML 5 and JavaScript based framework from Telerik which helps you to create modern web applications for the web as well as for mobile devices. Built on top of jQuery, Kendo UI uses the power of HTML5 and CSS3 for rendering various types of widgets that can be used in our web pages as well as mobile applications for delivering rich, responsive content with minimum amount of development activity.

    It includes a lot of UI widgets, data visualization framework, mobile framework and tools such as MVVM Framework, data source templates, drag and drop components, themes etc. It supports most of the browsers available today and there by providing cross platform/cross browser support for your application. Gone are the days when you put in browser specific codes in your pages to make it browser compatible, with Kendo UI you need to concentrate on your functionality of the application and all tricky situations like this will be handled automatically by Kendo itself.


  • Exposing Database using a WCF Restful Data Service

    Last month I was preparing for a training session on Kendo UI using JavaScript which included some advanced topics using Kendo Grid. I was on the lookout for a sample service to show the CRUD operations in Kendo Grid and did find couple of services hosted by Telerik itself and by OData community. Since they were mainly read only services, I was unable to do any update or delete operations using the methods exposed by them. So I was thinking about creating a new service for my purpose and then I stumbled on this piece in MSDN which helped to save a lot of precious time that may be needed for creating a new one from the scratch.

    I will be using the Northwind database for this purpose and if you don’t have a copy of the same with you, you can go here and download it. Once you are ready with database, we can proceed to create the service. Again I will be using the VS 2013 Community which is a subset of the Ultimate version and is offered free of cost by Microsoft.

    Create New Project