Articles and tutorials on ASP.NET MVC, Kendo UI, Windows Phone 8, Windows 8, Orchard

  • 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>

    Series: Kendo UI

  • 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>

    Series: Kendo UI

  • 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.

    Series: Kendo UI

  • 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

    Series: Kendo UI

  • 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.

    Series: Kendo UI

  • 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

  • Maintaining a blog powered by Orchard using WebMatrix

    Orchard is one of the most powerful content management system developed on top the Microsoft stack and is widely used across the globe with the recent being the blogs hosted under weblogs.asp.net is now being powered by Orchard. You can read more about it in John Galloway’s blog here.

    I have also migrated mine from DotNetNuke to Orchard at turn of the year and it’s been good journey so far when compared to DNN, eventhough faced some hiccups here and there. When compared to other CMS like WordPress or Blogger, Orchard is lacking some of the features and needs to do some workarounds for acheiving that. Couple of things I liked most in Orchard is the support for Bootstrap theme and the widgets, it’s really easy and fun playing with it.

    So coming back to our topic, I am not a good fan of the inbuilt editors in the dashboard of many CMS for authoring the posts, so I normally use Windows Live Writer for writing and publish my posts. If you are a blogger and hearing it for the first time, go ahead to download page at Microsoft site to have try. If you are a developer, then certainly you will like to play around with the inner working of various components in Orchard. Even though there are variety of options like Visual Studio itself, I found WebMatrix as a great tool for doing most of the nitty gritty works. It’s free, small download size, light weight and easy to use. To know more about it, go through this link and also has the link for downloading it too.

    The home page will have the options as shown in the image below.

    1 

  • Check out and Check in files hosted in VS online account using VS Community edition

    In the previous post I showed you how to add a newly created file to the  source control and in this post I will be discussing about the check out and check in process from the IDE.

    Checking out files

    To check out the file, you need to right click on the file in the Solution explorer to bring up the context menu where you will find the option for checking out the file.

    1

    34

    When you click on the Check out for Edit menu item, you will be presented with a dialog box which will have two option, the first one will retain an exclusive lock after the check out and prevent others from check in. The second one will allow other users to check out the file but won’t be able to check in their changes until the the one who has the lock check in the file. I am going to select the first one which is also the recommended option.

    Once the operation is completed you will be free to make any changes in the code and save the files locally. When you are done with the editing we can see how the files can be checked in to the source control.

  • How to add Read More link for your post in the summary page in Orchard Blog

    Whenever you create a blog post in Orchard you don't need to show the full content in the home page or in the summary page for posts. By default Orchard will strip all the markups and show only the first 200 characters in the summary.

    First, let's find out how Orchard handles this with the help of Designer Tools. If you are using Orchard 1.7 or higher then this module comes with default and don't try to install it because you may run into compatiblity issues. For those with older version you can install them from the Modules section. You need to enable Shape Tracing which will be disabled by default after installation and can be done from Modules as shown below

  • Adding files to Visual Studio Online using VS 2013 Community edition

    In this post I will show you how to add the newly created files to the repository, in this case Visual Studio online account we had created in the earlier post which you can refer here.

    In the blank solution we had created earlier and I have added one project and some files to it. The newly added files can be identified by the + plus appearing next to the filename in the solution explorer.

    You may wonder that, why are you getting the red lines appearing under the solution/project/file name in your solution explorer. That’s because I have installed an extention know as the productivity tools for Visual Studio , which will show these lines if it contains any sort of build errors during the editing phase itself. One of the main reason that I shifted to the community edition from the express edition is that it supports most the features like these found in the paid versions. If you are interested in these type of tools, you can to the site here and download it.

    image

     

  • To exclude commented code when using Find and Replace in Visual Studio

     

    You can use regex along with the search term as  given below

    ^(?![ \t]*((\/\/)|(\/\*))).*your_search_term

    and don’t forget to check the Use Regular Expression option in the Find dialog box.

     

    vs find and replace

  • Hosting your first project in Visual Studio Online and Getting started with Visual Studio 2013 Communtiy edition

    During last week’s Connect event, Microsoft surprised us with a lot announcements such as moving up more and more things to open source, plans to make ASP.NET cross-platform and a free edition of a Visual Studio named Visual Studio Community 2013. Unlike the express versions for all the flavours such as web, desktop we have till now, the Community edition is a full featured edition of Visual Studio with curbs on use for enterprise development. It supports features like extensions which was sorely missed in the express edition and is perfectly suitable for developers like me and small business houses. Till now we have to use different incarnation of express editions of Visual Studio if you are not using their paid tools, but in community edition we are able to develop application for Web, Windows, Phone, Cloud, iOS, etc.  If you interested then you can go here to read more on this and click here to go to the download page.

    Another great free service from Microsoft is Visual Studio Online, which leverages the capabilities of Team Foundation Server and can be used as the repository for all your development projects. If comes with support for five users in the free tier, supports various editors such as Eclipse, Xcode and of course Visual Studio. Please go through this link to know more about the service.

    In this post I am going to show how can we host and mange a project created in VS 2013 Community edition in Visual Studio Online right from the IDE itself.

    Step 1

    Create an account with Microsoft account at https://app.vssps.visualstudio.com and follow the steps mentioned in the screenshots.

    1

    2

    3

    Step 2 

  • Model First Development Using EF 5.0 – Updating the Model

    In my earlier post, Getting started with Model First development using EF, I have shown you to create a database from the model class and how to persist the data to the database. In the second part of the series, I am going to show how the changes made to the underlying database can be reflected in the model class.

     

    So let’s try to add a column to our user table.

    ALTER TABLE MT_USER
    ADD Gender Varchar(5)

     

  • Creating apps with redesigned App Studio

    Recently Microsoft has updated App Studio with redesigned UI, a rebuilt emulator, image conversion and more templates. Also the site has become more touch friendly which enables you to design and create app from your touch first devices like phone, phablet, tablet etc. With this changes there are some variations made to the workflow from the earlier one and with this post I am going to help you in creating apps using the new interface.

     

    When you login to the refurbished website for the first time, all your apps will be automatically regenerated so that all the apps confronts to the changes made to the website and your new dashboard will be like the image given below.

     

     

     

    For creating a new project, click on the Create New Project link and you will be redirected to the template page, where you will have the option to select a pre-defined template or an empty template using which you can start from the scratch.

     

     

     

  • Getting Strated with Model First Development using Entity Framework.

    What is Model First ?

     

    In Model First approach you will create a model of your domain entity using the EF designer and then generate database schema based on it. It stores the meta data in a EDMX file and model classes that interact with our business objects are automatically created from this EDMX file.

    Let’s create a small console application for demonstrating this approach and name the project as EFModelFirst.

     

    clip_image002

     

    I am using VS 2012 and with EF 5.0.0 which can be downloaded from nugget using the command in your package manager console as shown below.

     

    clip_image004

     

  • Creating WP Apps Using App Studio

    App Studio is a great offering from Microsoft which let you to create a Windows Phone app in quick time and that too without writing a single line of code. It lets you to create create apps using the available templates in the site and also enables you to download the auto generated source code, if you want to take it up further.

  • Connecting SkyDrive with your Windows Phone 8 App

    Continuing with my on going series of posts on Windows Phone app development, I will help you to integrate SkyDrive in your app with this post. I will be explaining the steps using an app of mine which I had released some time ago and now is in the process of updating it with voice commands support and cloud storage. In my earlier two posts I had explained the steps that are needed for implementing voice commands and speech-to-text input.

    To start with you need to create an app with Live Connect Developer Center for connecting SkyDrive with your apps. It acts as a one stop location forall the apps which needs to connect to SkyDrive, Outlook.com and Skype. Go to My Apps section from the dashboard and click on the Create Application link and you will be presented with a page like the one given below.

     

    1

     

  • Adding Speech Input to Your Windows Phone App

    In my earlier post I had guided you in implementing voice commands in your Windows Phone app and if you don’t have a clue about what I am talking,  go through my earlier post here.

    For those who doesn’t have time to go through the entire post, here’s a recap.

    Recap

    You can implement speech support in your own app very easily by following the steps given below.

    1. Create a VCD file(Voice Command Dictionary), which essentially is a XML file containing the commands your app supports

    2. Load created command file at the start up.

    3  Deploy the app to the inbuilt emulator or to your device, hold the windows button until Speech dialog is displayed and speak the command you specified in your VCD file and Windows Phone will open the app for you.

     

    As I mentioned earlier I had deployed a simple note taking application in the marketplace and along with this series of posts I am implementing speech recognition support in it.

    In the last post I had already shown you to implement voice commands and now let’s get started with the coding for in-app speech to text integration.

     


  • How to enable voice commands in your Windows Phone 8 App

    Microsoft has enhanced the speech capabilities in Windows Phone in the Windows Phone 8 SDK and with the Bing team releasing their API for developers I decided to upgrade my first ever app developed for Windows Phone 7. Also I was getting feedback from the users to update as well as add new features in it. So to start with it I am incorporating voice commands to the app and will explain the steps needed for the same for including in your app too.

    Windows phone 8 supports both speech recognition and text-to-speech functionalities for interaction with the users. With the Voice Commands feature, users will be able to instruct the phone to initiate operations that you normally do by touch.

    First you need to make sure that you had added the capabilities for speech recognition and microphone in the WpAppManifest.xml either by checking the boxes in the property editor or by manually adding the following lines in the XML file

    <Capability Name="ID_CAP_SPEECH_RECOGNITION"/>
    <Capability Name="ID_CAP_MICROPHONE"/>

    Microsoft has enhanced the speech capabilities in Windows Phone in the Windows Phone 8 SDK and with the Bing team releasing their API for developers I decided to upgrade my first ever app developed for Windows Phone 7. Also I was getting feedback from the users to update as well as add new features in it. So to start with it I am incorporating voice commands to the app and will explain the steps needed for the same for including in your app too.

  • Part 1 : Installing Windows 8

    Microsoft will be releasing the latest version of their operating system named Windows 8 very soon and infact it's already available for download for MSDN and Technet subscribers.

    For the unlucky ones like me has the option to download a 90 day evaluation of the same from here.

    Before you go for downloading, you have to take a note of couple of points

    1. This evaluation version will expire after 90 days and wont be able to upgrade.
    2. It's better to go for the installation in a virtual environment so that it will be easier for you to upgrade from your existing version. Otherwise you will have to uninstall the evaluation first and then do an upgrade.
    3. Inorder to the get the link for the download, you have to should have a Microsoft Account  and should also activate the product within 10 days of installation.

    You have options for 32-bit and 64-bit versions which is available in ISO format. You can get more details from here.

    So I have chosen the 64-bit version which is around 3.5 GB of size and I will be using Oracle Virtual Box for virtualization. It's a well documented fact that MS is not supporting either Virtual PC or

    VMware as virtual environment tools.

    First you have to either mount the ISO image as a drive or you can burn the image on to a disc and use that as an bootable disk to start the setup process. Upon booting you will be presented

    with a splash screen featuring the much talked about new windows logo as shown below.

    a

     

    In the next screen you will be asked to selected the regional preferences and language settings

     

    1

     

    In the next screen, you will be provided with two options, Install and Repair. Since we are going for a fresh installation,

    will have to click on the Install Now button.

  • 1
  • 2