clip_image006.jpg

How to configure Identification or Find Logic of Element in Test Studio

In this post we will take a look on how to configure Find Logic of an element in Test Studio…

Being a Test Professional while automating test there is one common question all of us are worried about and question is,

Will Test fail if id of element being changed in development? Or what will happen if Element id is changed?

Yes Test will fail but there is a way you can change configuration and Find Logic

Test Studio allows you to change Find Logic at the project level. By Default Test Studio search an element on

  • Id of element
  • Name of element

You can browse to find logic setting of Test project by clicking on

Project -> Show Setting

clip_image002

In Project Setting dialog box click on identification logic option. Here you can find identification logic and change it as per requirement to your project.

clip_image004

As you can clearly see that by default Test Studio find an element on its Id. If you believe that ID of elements are very much likely to be changed with each development cycle then you may opt to find an element on its other property. If you believe that Name of the elements are not expected to change frequently then you can consider to change project setting to find an element on its Name attribute.

To change Find Logic select any attribute then click on up/down arrow to change its position. For example Name is at second from top. To make it first attribute on which Test Studio will find element select Name and then click on up arrow button to bring it at the top in the list.

clip_image006

In this way you can configure Find Logic. You may notice that if required you can add new Tag to list as well. So we just witnessed that Test Studio as automated testing tool is very flexible and allows us to configure Find Logic as our own requirement.

I hope you find this post useful. To speedup automated testing do not forget to download trail of Test Studio from here

image

image.png

Resources for Webinar “Cloud Based Enterprise Apps using Everlive”

On Jun 20th we conducted a webinar titled “Cloud Based Enterprise Apps using Everlive”. This is part of an ongoing webinar series we here at Telerik India are doing targeting APAC region. We call this the Telerik .NET Ninja Developer Webinar Series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/

To get started with Icenium Everlive visit its Everlive portal here

clip_image001

Icenium Everlive is “Backend as a Service” and it provides following as service,

  • Backend Data
  • Large Files.
  • Users
  • Email
  • Notifications
  • Cloud Code

image

All the services can be accessed via REST API, JavaScript SDK or .NET SDK.

Slide Deck:

Here is the slide deck which I used for the webinar:

 

NET Ninja T-Shirt Giveaway:

We select 2 person from the webinar attendees and give away our .NET Ninja T-Shirt in each of our webinars. We have picked up 2 lucky persons in this webinar too. They are:

Soumya R

HC Suraj

Congratulations to the winners. We will be contacting you shortly and we will ship your t-shirts. Rest of the folks don’t worry – we still have loads of webinars lined up for this year. So do attend our future webinars without fail and try your luck to be the .NET Ninja.

To get started with Icenium Everlive visit its Everlive portal here

RadControls for Silverlight

Silverlight RadCartesianChart: Reading data from WCF Service

Overview:

As part of evangelism job I speak to a lot of customer and try to tell them how they can use our controls. Couple of days back I was speaking one customer who was evaluating our RadControls for Silverlight suite and in particular was working with RadCartesianChart control. He saw all our demos of RadCartesianChart we ship and said that they all provide data from the code behind and are static in nature. They were looking for examples which tell them how to consume data from a WCF service and provide it to RadCartesianChart. So this blog post is all about how do we provide data to ChartView from a WCF Service. So lets get started.

Create RadControls Silverlight Application:

First thing to do, is to create a new project of type RadControls Silverlight Application. I am using Visual Studio 2012 for the rest of this blog post. You can do this in VS2010 too. Open Visual Studio IDE and select File > New Project. In the New Project dialog select Telerik > Silverlight > C# RadControls Silverlight Application. Give a name for the project and click ok.

SNAGHTMLf99013 Fig 1. New Project Dialog

Next, Visual Studio will ask you whether to host the SL app in a new web site and what should be the SL version. I am opting SL Version 5 for the sake of the demo. Here is the screenshot of the dialog:

SNAGHTMLfc02a3

Fig 2. Silverlight Application Settings Dialog

Since we have selected RadControls Silverlight Application, next you will get a “Project Configuration Wizard” where you will select the Components you require in your project. Since I am only interested in Charting, I will select only Telerik.Windows.Controls.Charting and the wizard automatically selects the dependent components for me. Here is the screenshot of the dialog:

SNAGHTML100ba2f

Fig 3: Telerik Project Configuration Wizard – Silverlight Settings Dialog

Clicking next will take you to theme settings. I am selecting Windows8 theme that comes out of the box. Click finish to let Visual Studio create the project.

SNAGHTML1023d24

Fig 4: Telerik Project Configuration Wizard – Theme Settings Dialog

Once Visual Studio finishes creating the project, here is how the solution will look like:

image

Fig 5: Solution Explorer

You can see that we have 2 projects in the solution. One is the actual Silverlight app and another is the Web app which will host the Silverlight XAP. Next we look at how to create a WCF service.

Create WCF Service:

For the sake of the demo, I will be creating a WCF service which does the following things:

  • Create a ProductModel which will act as a DataContract. It will have ProductID, Name and Price as properties
  • Create a WCF Service which will connect to Northwind Database.
  • Have one Operation called GetTop10ProductsByPrice.  This will execute a simple query to fetch top 10 products price wise and convert that into list of ProductModel and return it to client

Product Model Class:

We will create the WCF service in Web App project. We App will host our service too. Create a new folder called “Model” and create the ProductModel class. Here is the code for the ProductModel class:

[DataContract]
public class ProductModel
{
private int productID;
[DataMember]
public int ProductID
{
get { return productID; }
set { productID = value; }
}

private string productName;
[DataMember]
public string ProductName
{
get { return productName; }
set { productName = value; }
}

private decimal price;
[DataMember]
public decimal Price
{
get { return price; }
set { price = value; }
}
}

Chart Data WCF Service:

First create a folder and name it as Services. Right click on Services folder and select Add > New Item. In Add New Item dialog, select Silverlight from installed templates and then Silverlight-enabled WCF Service. Lets name the service as ChartDataService.svc. Click Add to create the service.

SNAGHTML185ec2a
Fig 6: Add New Item dialog

Next, since we need to connect to Northwind database, add a connection string to Web.config in the Web project. I have named my connection string as “NorthwindConnection”.

Next, in the ChartDataService, remove the generated operation contact with name “DoWork”. Instead add a new Operation and lets call it “GetTop10ProductsByPrice”. In this function we will connect to Northwind Database using SQL Connection and execute a simple query. We will loop through the data reader and generate a list of ProductModel and return the list. Here is the code for GetTop10ProductsByPrice operation:

[OperationContract]
        public IList GetTop10Products()
        {
            string nwConn = ConfigurationManager.ConnectionStrings["NorthwindConnection"].ConnectionString;
            var prodList = new List();
            using (SqlConnection conn = new SqlConnection(nwConn))
            {
                const string sql = @"SELECT TOP 10 ProductID, ProductName, UnitPrice
                                     FROM Products
                                     ORDER BY UnitPrice DESC";
                conn.Open();
                using (SqlCommand cmd = new SqlCommand(sql, conn))
                {
                    SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                    if (dr != null)
                        while (dr.Read())
                        {
                            var cust = new ProductModel
                            {
                                ProductID = dr.GetInt32(0),
                                ProductName = dr.GetString(1),
                                Price = dr.GetDecimal(2)
                            };
                            prodList.Add(cust);
                        }
                    return prodList;
                }
            }
        }

Consuming WCF Service from Silverlight App:

Now that we have a service, next thing to do is to reference that service in our Silverlight application. Right click on Silverlight application and select “Add Service Reference”. In the Add Service Reference window, click on Discover button. The WCF Service we created in the previous section will be automatically discovered and will list down the operation it supports.

SNAGHTML125209f

Fig 7: Add Service Reference Dialog

Now click on the Advanced button located in the bottom left side of the dialog to open the service reference settings dialog. In the Service Reference Settings dialog, under Reuse types in referenced assemblies, select the System related assemblies and not the Telerik ones. Here is a screenshot of the dialog:

SNAGHTML1290d1f
Fig 8: Service Reference Settings Dialog

Clicking Ok will add a service reference in Silverlight app which can be invoked at runtime to fetch the data required for the chart.

Add RadCartesianChart Control:

Next we need to add the ChartView control on the screen. In order to do this, Open MainPage.xaml, identify the ChartView control from the toolbox, drag and drop it on to the MainPage.XAML. Give the chart a name. Here is the code to CartesianChart markup:

<telerik:RadCartesianChart Grid.Row="1" 
                            x:Name="chartView" 
                            Palette="Metro">
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Title="Price (USD)"/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis Title="Products"/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries x:Name="barSeries1" 
                            ItemsSource="{Binding}" 
                            ValueBinding="Price" 
                            CategoryBinding="ProductName" 
                            ShowLabels="True" />
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

Lets take a closer look at the code. I first define the vertical axis and tell the chart that it’s a linear axis. I also set title to the vertical axis and call it “Price (USD)” because my vertical axis will hold the price of products. Next, I define horizontal axis and and tell the chart that it’s a Categorical axis. My horizontal axis will be used to represent the product itself, so setting the title of horizontal axis as “Products”. Now that we have finished setting the axis only thing left now is to create a series. So I define Series and create a BarSeries. I have given a name for the bar series and will use this name in code behind to perform data binding. We need to provide the data to the series – so lets set the ItemsSource to the Binding it will get at runtime. Now we need to tell what fields corresponds to the value of the series and what corresponds to the category axis of the series. Set ValueBinding to “Price” field and CategoryBining to “ProductName”.

Data Binding:

We defined the UI part of the chart. Now to provide data to the chart. We had add a service reference to our WCF service earlier. So we will have a client class created in the Silverlight project and will be known as ChartServiceClient. So we will use this client class to invoke the “GetTop10Products” operation. Here is the code to invoke the service and bind the data received to the chart view:

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
            ChartServiceClient client = new ChartServiceClient();
            client.GetTop10ProductsCompleted += client_GetTop10ProductsCompleted;
            client.GetTop10ProductsAsync();
}

void client_GetTop10ProductsCompleted(object sender, GetTop10ProductsCompletedEventArgs e)
{
            var data = e.Result;
            this.chartView.DataContext = data;
}

As you can see we invoke the operation asynchronously. When the operation completes we get the data and set it as the DataContext of the Chart. Run the application and when the page loads we should get the Chart as below:

image

As you can see we get our bar series graph which will show the price (in USD) on the vertical axis and products in the horizontal axis. We see the top 10 products by price.

Conclusion:

In this blog post, what I attempted was a very specific scenario which is most common on real world. As I said in the beginning, the customer I was talking to wanted to see an example of how to connect to a WCF Service, get data from the service and bind that data to Chart. So this blog posts outlines the steps required to make the chart work with WCF Service, Hope this is useful to many of you who may be having the same scenario. Do let me know your feedback if any.

Till next time – Happy Coding!

image.png

Resources for Webinar “Reporting Solution for ASP.NET Application using Telerik Reporting”

On Jun 13th we conducted a webinar titled “Reporting Solution for ASP.NET Applications using Telerik Reporting”. This is part of an ongoing webinar series we here at Telerik India are doing targeting APAC region. We call this the Telerik .NET Ninja Developer Webinar Series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/

image

Telerik Reporting is a lightweight reporting solution for all .NET cloud, web, and desktop platforms (Azure, Silverlight, WPF, ASP.NET and Windows Forms) which targets developers and end-users alike. Rich interactive and reusable reports can be created by developers in Visual Studio, and by end users in the desktop-based Report Designer. With the help of Telerik Reporting users can examine and probe data, export reports to Microsoft Office Word and Excel for further analysis, and even present them as PowerPoint documents.

Slide Deck:

Here is the slide deck which I used for the webinar:

Webinar Video:

As usual we have this webinar recorded. So if you missed attending the webinar live, you still have a chance to catch up and that too at your own time. Here is the video recording:

Question & Answers:

During the webinar may questions were asked by the audience. We tried our best to answer as many as we can. We will try to address each and every questions from the webinar in this section.

Q: How to save report data in cache?
A: Data is provided to a Telerik Report using the DataSource property. So you can actually make use of the ASP.NET Caching mechanisms and store your report data. Then at runtime read the data from cache and provide it to the report data source.

Q: Can Telerik Reporting be used in SharePoint?
A: Yes you can. Here is the documentation – http://www.telerik.com/help/reporting/asp-net-report-viewer-deploying-web-reportviewer-in-moss.html

Q: Can I use Telerik Reporting in ASP.NET MVC?
A: Yes you can. Take a look at the following blog post: http://blogs.telerik.com/telerikreportingteam/posts/13-03-26/telerik-reporting-in-mvc-sure-it-takes-8-quick-steps-

Q: Does report have any source code?
A: Yes. The Report is a POCO class inhering from Telerik.Reporting base class. So although you design the report using the designer, it is basically a C# class file under the hood.

Q: Is it building the app while we see the preview?
A: When you preview, yes the class library project in which the report is hosted is built.

Q: Difference between Preview and Html Preview?
A: Preview uses Windows Host and it is as if you are hosting the report in a Windows Application. Html Preview uses IE as the host and it is as if you are hosting the report in a Web Application.

Q: Can i use SSAS as data source here?
A: Yes. You can. Take a look at this: http://www.telerik.com/products/reporting/managing-data.aspx#populating-data

Q: How to create report from WCF service?
A: You can always feed the report with a data coming from WCF Service. Telerik Reporting support Business Objects as a valid data source.

Q: Can we export the report using report viewer?
A: Yes, absolutely. Export to PDF, Excel and other formats.

Q: Can we style and individual cells? and copy the style from one to other?
A: Yes each individual cells can be styled. You can copy one style to another in the designer.

Q: Can’t we add this thumbnail Image in during report creation through wizard ?
A: Yes you can. The demo was to showcase our Data Explorer window feature which makes it easy for your to drag and drop data fields on to the designer.

Q: Does it can have navigation from one report to other report like drill down?
A: Yes you can do that. Here is a short video which showcases how to do that: http://tv.telerik.com/watch/reporting/creating-drilldown-reports-with-telerik-reporting

Q: will the Telerik menu come if we install Telerik Reporting in our machine
A: Yes. when you install Telerik Reporting you will see the Menu Item inside your VS.

Q: Can we give parameter at run time?
A: You normally define the report parameters at design time itself and use the report parameters in your queries to filter. You can always set value of a parameter at run time.

Q: What is the difference between Telerik Reports and RDLC reports?
A: Here is a interesting discussion on this subject on Stack Overflow – http://stackoverflow.com/questions/1444144/telerik-reporting-over-ssrs

Q: Can we create a drop down list instead of textbox to pass a parameter?
A: Yes you can. In fact you do not have to do anything except to say that the report parameter supports MultiValues. You do this by setting the MultiValue=true in the report parameter properties.

Q: Can we convert Crystal Report and SSRS Report into Telerik reports?
A: Yes. At the moment we support Crystal/Active/Xtra report conversion but not SSRS. Take a look at this: http://www.telerik.com/support/kb/reporting/general/converting-reports-from-various-versions-of-crystalreports.aspx

Q: Where we can get those trial downloads?
A: You can get the trial downloads from the following URL: http://www.telerik.com/products/reporting.aspx

Q: If any changes is done to Report Library as in this case today, will it get auto refresh?
A: You will need to redeploy the report library DLL to you Web Application Bin folder and you will have the refreshed report.

Q: Can we schedule the report subscriptions like SSRS?
A: Nope. Telerik Reporting is not a side reporting solution. So out of the box we do not have this feature. But having said that – its easy to build it. The reports are nothing but C# classes under the hood so you can build a scheduling agent which programmatically creates the report, export it to a format of your choice and send it through email.

Q: We have similar functionalities available with SSRS, Just wanted to know what additional features we have with Telerik reporting ?
A: A great comparison is found here: http://stackoverflow.com/questions/1444144/telerik-reporting-over-ssrs

Q: Should we use Dataset in place of giving the physical database connection in Telerik report ?
A: The ObjectDataSource will let you bind to any objects that you might have in BLL. Take a look here for step to step: http://blogs.telerik.com/blogs/13-06-06/reporting-or-control-suites-what-to-use-when-part-2

Q: Can we call this report from c# code without report viewer and get result in the PDF file?
A: Yes you can. The report is basically a C# class file. You can instantiate this at runtime and export to any format of your choice.

Q: Can we edit any grid row/column as in other grid?
A: No. This is reporting so no editing feature.

Q: Can we use any of web control as input parameter for report viewer?
A: You do not need to use any web control. Report Viewer itself is a control as part of our RadControls for ASP.NET AJAX suite.

Q: Do you have loading window when you click on Print Preview?
A: Yes we have. When you click on Print Preview, we will show a “Generating  Report” loading animation.

Q: Can we expand/collapse a particular group as a bunch of values?
A: Yes you can. The Expand/Collapse feature is supported.

Q: How can we display the Telerik reports using viewer in Winforms?
A: WinForms suite also contains Report Viewer control. So the same report can be displayed on WinForms too.

Q: Can we create charts – like pie, bar charts?
A; Yes you can. Check out our demos to take a look at the charting capabilities.

Q: Can we use Telerik reporting for Analytical data source? i.e. SSAS – cube n all
A: Yes. Take a look here: http://www.telerik.com/help/reporting/cubedatasource-configuring-project.html

Q: Can we have dependency of parameters, ex: first parameter is Countries, when country is selected, States should be displayed in second parameter
A: Yes you can. The cascading of parameters is possible.

Q: Can we directly print reports without print preview?
A: Yes. The report viewer has a print report button which will invoke the OS print dialog.

Q: Export functionality is inbuilt or we need to do some coding for it?
A: Export to different formats is in built in Report Viewer control. You don’t have to do anything extra to use the feature.

Q: Can I email the report directly without showing the report to user?
A: You will need to use Reporting API to achieve this functionality.

Q: Will it also be compatible with the recent version s of any report viewer like with excel 2010 or later versions?…I am asking in terms of generating output format
A: Yes the generated reports are compatible.

Q: Can we have docs/examples to implement Telerik reporting – sample projects?
A: Sample projects are installed once you install Telerik Reporting on your machine. More demos can be found at: http://demos.telerik.com/reporting/home.aspx

Q: Can we put a calendar in filters ?
A: When you create a parameter of type Date/Time, the UI for that parameter is automatically rendered as a calendar.

.NET Ninja T-Shirt Giveaway:

we select 2 person from the webinar attendees and give away our .NET Ninja T-Shirt in each of our webinars. we have picked up 2 lucky persons in this webinar too. They are:

  • Manoj Singh
  • Sulabh Sarna

Congratulations to the winners. We will be contacting you shortly and we will ship your t-shirts. Rest of the folks don’t worry – we still have loads of webinars lined up for this year. So do attend our future webinars without fail and try your luck to be the .NET Ninja.

Till next time – Happy Coding.

clip_image001.png

How to work with NUnit Assertion as step in Test Studio

Learn more about Test Studio here

clip_image001

After I written this post How to work with MS Unit Test Assertion as step in Test Studio , I got a question,

How can I use NUnit Test Assertion in a Test Step while automating test with Test Studio?

Answer of this questions is also lies in three steps,

Step 1:

Add reference of nunit.framework dll in Test Project

Step 2:

Create a coded step

Step 3:

Write Assertion in test

Add Reference

There are in two ways you can work on Test Studio. Either on Visual Studio plugin or on Test Studio standalone version.

Adding reference in Visual Studio is simpler. Right click on test project and from context menu select Add Reference. Browse to nunit.framework.dll library and add reference in test project.

Even though you have added reference in Visual Studio make sure that you have added reference in test project opened in standalone version else you will get exception.

To add nunit.framework.dll assembly in Test Studio standalone version you need to follow following steps,

Select Project option in top menu

image

Click on Show Settings in project tab

image

On clicking on Show Settings you will get Project Settings dialog box. In dialog box click on Script Options. To add assembly reference click on Add Reference.

image

When you clock on Add Reference Test Studio will open File Chooser dialog box. In that browse nunit.framework.dll assembly reference location in file system and select that to add as reference in current Test project.

Create a coded step

To create Coded Step in select Test and from menu

image

You will find coded step added as below,

clip_image001[6]

Write Assertion in Test

Once Coded step is added you can write any assertion. To validate I am writing a very simple assertion as below,

You can view below code in Visual Studio,


[CodedStep(@"New Coded Step")]
 public void NunitTest_CodedStep()
 {
 NUnit.Framework.Assert.AreEqual("Telerik", "Telerik");

}

In Test Studio standalone version codes step will look like as following,

clip_image002

Now go ahead and execute test. You should able to get test passed successfully as given below,

clip_image003

I hope you find this post useful. To speedup automated testing do not forget to download trail of Test Studio from here

clip_image004

image_thumb.png

Resources for webinar “Building Uncomplicated Single Page Apps (SPAs) with Kendo UI”

On Jun 6th we conducted a webinar titled “Building Uncomplicated Single Page Apps (SPA) with Kendo UI”. This is part of an ongoing webinar series we here at Telerik India are doing targeting APAC region. We call this the Telerik .NET Ninja Developer Webinar Series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/

SPA or Single Page Application is a way of building web applications which literally consists one single html page.  The application works by creating screens on the client side which is basically nothing but templates and getting the required data at different intervals as JSON payloads. So we showcased Kendo UI power and feature of building these SPA without any complication. The backbone of Kendo UI SPA is Rouer, View and Layout. So through this webinar I showcased how a SPA can be built with much hassle and very easily. Hope you go through the slide decks and the video recording of the webinar and find it useful for you.

Slide Deck:

Here is the slide deck used for the webinar:

Video Recording:

As many of you have been asking, we did record the webinar. So here is the video of the webinar:


Questions & Answers:

During the webinar there were many questions that you guys had asked. We tried our best to answer as many as we can. As a regular practice, we answer all the questions in the recap post. So here are all the questions and answers for them:

Q: where we can use SPA?
A: Anywhere User experience is critical – both enterprise and consumer apps.

Q: How does grid adapt to mobile?
A: Grids are not ideal for mobile applications. You may want to use ListView if you are primarily targeting mobiles.

Q: What is an Observable?
A: Observable is Kendo UI object that is used for supporting MVVM.

Q: How can i design Grid View UI as look like Windows 8?
A: You need to put custom CSS on Kendo Grid to achieve Windows 8 metro GridView look

Q: Do we have any IDE intelligent enough for kendo?
A; If you are using Visual Studio as IDE you will be able to get intellisense. Since its just plain JavaScript you can actually use any editors even Notepad.

Q: Can we have SPA project template for visual studio? i think development can be much quicker using that?
A: We currently don’t have it. Having said that its as easy as adding a stylesheet and a JavaScript and you have Kendo UI in your application. So you don’t need a SPA template as such. But our product team will start looking towards this.

Q: All the data binding must happen in a script tag?
A: Data binding happens in model that ultimately uses Kendo UI DataSource. It saves you a lot of writing AJAX code.

Q: What is a Router?
A: Router is the back bone of SPA feature using Kendo UI. It is responsible for tracking application state and navigating between the app states. You can read more on Router here: http://docs.kendoui.com/getting-started/framework/spa/router

Q: If our SPA is having multiple window and each window is having some sort of datagrids, charts , different lists etc, say various aspects of sales info. So, in that case where should we keep the templates, in the same page or we can put those in other files?
A: Templates can be in the same page or created as a separate script files. When you create templates as different files, you can use concept of Template Loader and load the template as you require. It all depends on your architecture.

Q: Can we create models on the fly? like dynamic?
A: Yes you can.

Q: Is kendo SPA having support for nested template?
A: Yes you can.

Q: Is there any Visual Studio plugin for Kendo UI SPA, which we can get from NuGet Package Manager? if not, does Telerik/Kendo UI has any plan to develop it? – it can be very useful for developers
A: Note that SPA is a feature available out of the box in Kendo UI solution. Kendo UI is available as NuGet package but be aware of the licensing terms. Kendo UI is not a free product. It is a licensed product.

Q: How we can change the Paging to Server side? We have to pass the page numbers and other parameters?
A: Kendo UI data source can page client side by default. If you don’t want that you can set ServerPaging to true and it will pass all the parameters required for paging to your service end point

Q: What about the performance of application when will have millions of record ? How it will be able to load in one time?
A: As a application architect you need to be wary of your data limits. Single Page Application is just a design paradigm of modern Web Applications. You will need to make sure you do paging on the server especially when you have million records. So you take control in this scenario for data loading.

Q: how to implement Kendo UI on SharePoint?
A: Kendo UI is all about 2 style sheet and 1 JavaScript file. So you can create your custom webpart and make sure to package the style sheet and javascript to the right location. The widgets will work as long as the path to the style sheet and script files are set correctly.

Q: Is Kendo UI libraries Open Source?
A: Nope. They are built, supported and sold by Telerik.

Q: Can I use WCF instead of Web API?
A: Yes. With HTTP binding that delivers JSON/ XML payload.

Q: You have edited the items only displaying in grid, if you want to edit more labels or data?
A: By default, the pop up mode of editing in Kendo UI Grid uses the column displayed to create the edit form. If you need to edit additional columns, you will need to create separate edit form and work with that.

Q: Can we use Kendo UI for offline purpose?
A: Kendo UI DataSource along with HTML 5 localStorage can be used.

Q: Data can be any custom XML. How difficult will it be to bind a custom XML with Kendo controls?
A: Yes any custom XML will do. It is as easy as just mapping what node maps to what property of the schema.

Q: IS JS wrapper. available in trial version for our Kendo UI POC that we need to show to our client?
A: Yes. Trial version is available on http://www.kendoui.com

Q: How to upgrade the Kendo UI version, once the application is already deployed
A: The Kendo UI is all about style sheet and JavaScript file. So you just swap the older version files with the new version files. That’s as easy as it can get.

Q: Does licensing allow to edit the source of kendo?
A: Yes. As a licensee you get the source code and you can modify it as per your needs. But you should know what you are doing :).

Q: Is there any service for android?
A: Yes. Please refer to Kendo UI Mobile. http://www.kendoui.com/mobile.aspx

Q: What is the licensing policy of Kendo UI?
A: The licensing is per developer and we do not charge you for deployments i.e. royalty free distribution.

Q: Will this support hybrid app development?
A: kendo UI Web is for web applications. If you are looking for Hybrid Mobile App Development you should take a look at Kendo UI Mobile. Kendo UI Mobile is a mobile control set which does adaptive rendering and is one of the best tools for Hybrid Mobile App development.

Q: What is the shortcut you are using to generate code snippet?
A: I was our Static Code Analysis product called JustCode. JustCode has a feature of Code Templates. So all my demo code were created as templates and a shortcut key associated with them. When have a key stroke which makes JustCode to autocomplete the code pertaining to the short cut key.

Q: Can we dynamically change the themes?
A: Yes you can. It is as easy as grabbing the link tag and changing the style sheet to be used.

Q: supports IE6?
A: We support IE7+ i.e IE8 and on wards.

Q: How it is differ from Upshot supported by Microsoft for SPA?
A: UpShot is not a SPA framework or solution rather it is a JavaScript library to make data retrieval in JavaScript easier. Where as Kendo UI is a complete framework which supports SPA feature out of the box and has a client side data source feature which does the data plumbing between server and client.

Q: Can we able to get the data through database connectivity?
A: The data is retrieved from DB in this demo as well. You need to build a service layer with Web API, WCF Data Service or WCF or any other non-.NET technology to retrieve data from the database

Q: Can we include 3rd party libraries in SPA application?
A: Yes, you are free to include 3rd party libraries. We can’t guarantee that there will be no conflicts.

Q: Does Telerik Test Studio support testing automation of all these?
A: Yes, Test Studio supports automation of Kendo UI controls.

Q: I see you used only JSONs as data type.. what other data-types available?
A: Kendo UI data source works very well with JSON and XML.

Q: Packaging support for android or IOS?
A: If you use our cloud based IDE called ICENIUM, it supports packaging for Android and iOS platforms with just a click.

Q: What about integration with Telerik controls?
A: Sure, this integrates with other Telerik controls too. Depending on the scenario, you can mix and match Telerik technologies.

.NET Ninja T-Shirt Giveaway:

As usual, we will be giving out 2 t-shirts in this webinar also. So following are the lucky winners of this webinar giveaway:

  • Udayakumar Mathivanan
  • Srinivas Abhishek

Congratulations to the winners. We will be contacting you soon on the email ids you have provided us during registration. The t-shirts will be shipped to you soon. Others don’t worry we still have a lot of webinars to go. So keep trying your luck by attending our webinars.

Conclusion:

In our endeavor to bring the Telerik technologies to each one of you, we are doing these series of webinars. Hope you are finding them useful. Looking forward to your presence in future webinars too. Till next time – Happy Coding!

Update:

Here is the GitHub repo to the source code of Kendo UI SPA demo: https://github.com/lohithgn/kendouispa/

 

image_thumb.png

How to verify number of cookies while automating a test in Test Studio

Learn more about Test Studio here

Yes these kind of questions are very simple but have a sustainable impact while automating a test. Recently I got a question that,

I want to verify number of cookies in web application while automating test. How Test Studio can help me in that

This test scenario could be very important. Test Studio surprisingly simplify these kind of requirement while automating test. So to verify number of cookies in web application,

  1. Add Coded Step
  2. Add reference of MS Unit Test
  3. Read number of cookies
  4. Assert number of cookies with expected value.

To Add Coded Step and reference of MS Unit Test follow this post

Once you have added reference of MS Unit Test and added a coded step start writing following scripts in coded step,

Read cookies of web application being in test as following. Do not forget to change URL with URL of web application you are testing.

image

Now in browserCookies all cookies are being read. You can read count of cookies as below,

image

Once you have cookies count in variable count you can verify its exact value and assert result using MS Unit Test Assert. This can be done as following

image

Where baseCountValue could be any constant value. Putting all together script of coded step would like following,

 


[CodedStep(@"New Coded Step")]

 public void WebTest_CodedStep()
 {
 int baseCountValue = 2;
 var browserCookies = ActiveBrowser.Cookies.GetCookies("URL of your App");
 var count = browserCookies.Count;
 Microsoft.VisualStudio.TestTools.UnitTesting.Assert.AreEqual(count, baseCountValue);

}

On running you can see that below test is verifying that number of cookies associated with URI is zero.

image

In this way you can verify number of cookies in Test Studio. I hope you find this post useful. Thanks for reading.

I hope you find this post useful. To speedup automated testing do not forget to download trial of Test Studio from here

image

clip_image003_thumb.png

How to work with MS Unit Test Assertion as step in Test Studio

Learn more about Test Studio here

More you meet people more questions you get. I love this part of my job, meeting and answering people queries. I usually talk to Test Professional who are doing manual testing. So some of their questions are very basic and this is expected because they are not coming from coding or programming background.

Recently in one of seminar I came across a question

How can I use MS Unit Test Assertion in a Test Step while automating test with Test Studio?

Answer of this questions is in three steps,

Step 1:

Add reference of Microsoft.VisualStudio.QualityTools.UnitTestFramework dll in Test Project

Step 2:

Create a coded step

Step 3:

Write Assertion in test

Add Reference

There are in two ways you can work on Test Studio. Either on Visual Studio plugin or on Test Studio standalone version.

Adding reference in Visual Studio is simpler. Right click on test project and from context menu select Add Reference. Browse to Microsoft.VisualStudio.QualityTools.UnitTestFramework.dll library and add reference in test project.

Even though you have added reference in Visual Studio make sure that you have added reference in test project opened in standalone version else you will get exception.

image

To add Microsoft.VisualStudio.QualityTools.UnitTestFramework.dll assembly in Test Studio standalone version you need to follow following steps,

Select Project option in top menu

image

Click on Show Settings in project tab

clip_image001

On clicking on Show Settings you will get Project Settings dialog box. In dialog box click on Script Options. To add assembly reference click on Add Reference.

clip_image003

When you clock on Add Reference Test Studio will open File Chooser dialog box. In that browse Microsoft.VisualStudio.QualityTools.UnitTestFramework.dll assembly reference location in file system and select that to add as reference in current Test project.

Create a coded step

To create Coded Step in select Test and from menu

image

You will find coded step added as below,

clip_image001[6]

Write Assertion in Test

Once Coded step is added you can write any assertion. To validate I am writing a very simple assertion as below,

You can view below code in Visual Studio,


[CodedStep(@"New Coded Step")]

 public void WebTest_CodedStep()
 {
 Microsoft.VisualStudio.TestTools.UnitTesting.Assert.AreEqual("TestStudio", "TestStudio");

}

In Test Studio standalone version codes step will look like as following,

clip_image002

Now go ahead and execute test. You should able to get test passed successfully as given below,

clip_image003

I hope you find this post useful. To speedup automated testing do not forget to download trial of Test Studio from here

clip_image004

Responsive UI

Revamping Web Application: The UI changes

Read – Revamping Web Applications: Implementing RadAutoComplete

This post is a summary of the previous 12 blog posts where we have talked on how to upgrade our web application using the Telerik Ajax ASP.NET controls.We took an example of an Event Networking Application which is further explained in the first article. We started with testing the application to set a benchmark followed by implementing the Data Access Layer. Then we replaced almost all the controls with Rad controls. And in the end we have finally changed our interface to a new design. To do so we have used basic twitter bootstrap responsive css. To know more about implementing bootstrap click here.

Here we have elaborated on the following features of the application:

Directory
Sessions
MyScheduler
Messages
Edit Profile
Edit Profile (Mobile Version)

To see the difference in the User Interface changes  between the old and the new web application we have highlighted some of the major features.

At the DAL we can see a new layer being created in the form of a project named EventNetworking.Data.

image

Following from the above we have a new architecture for our application.

New Arch

A different UI can be seen as the bootstrap CSS has been implemented providing a responsive-UI. The visual changes can be seen as follows:

Directory

There is a new search criteria based on the Attendee name. Even the list can now be sorted only on the basis of the speakers.

image

image

Sessions

The basic UX has been modified to a RadGrid interface providing a better sorting, multiple-grouping as well as paging options.

image

image

MyScheduler

The scheduler where all the registered sessions were stored is now represented in a calendar form. Using RadScheduler the UI has turned very interactive and smooth.

image

image

Messages

The extensive vertical scrolling has been split into two pages namely inbox and outbox with almost a similar UI.

image

image

Edit Profile

The bootstrap CSS has made all the difference in this page.

image

image

Edit Profile (Mobile Version)

The following snippet displays the responsiveness of our application. Edit profile, when viewed in a mobile browser, we could experience the details have automatically shrunk to fit on the screen. This reduces the navigation to one dimension hence increasing the user experience.

Capture

The back-end does not really affect a user. What affects the user is the interface and the smooth performance of the Web Application. That is what we have tried to justify in our application. These are not all but the major features that have made difference in our application. Please comment on where else can we tweak the UI.

image.png

Testing with LINQ in Test Studio

Recently I was giving demo on Test Studio to one of  the customer. In demo one of the participants raised a question that, “How could I use LINQ (Language Integrated Query) to insert some data back to database after test execution gets completed “

I demoed to team  that how they could use LINQ in test. In this post, I will walk you through steps required to test with LINQ in Test Studio. We will insert data back to database as last step of the test.

Essentially we can achieve in these three steps

  1. Write LINQ and business logic in different library
  2. Add library as reference in test project
  3. Write script of coded step calling library functions.

To start testing with LINQ, add a coded step in your test. To add coded step select Test from menu and then Script Step from ribbon as given in below image.

image

Once Code step is added export test project to Visual Studio. To export to visual studio from menu click on Export to Visual Studio as shown in image below,

clip_image001

Creating Library to work with LINQ

Now in visual studio you need to add operations related to LINQ in different class library. Idea is that we will create separate library for LINQ operation and later we will add that library to Test Studio.

clip_image003

Assume that we have created a library with name DataLibrary. This Library got

  1. LINQ data context classes
  2. We added a static class in which operation is being performed to insert data back to database.

So DataHelper class contains following code to insert data to database using LINQ.


public static class DataHelper
 {

public static void InsertItem()
 {
 DataClasses1DataContext context = new DataClasses1DataContext();
 Product p = new Product
 {
 Discontinued = false,
 ProductID = 99,
 CategoryID = 2,
 ProductName = "Test Studio 9",
 UnitPrice = 200
 };

context.Products.InsertOnSubmit(p);
 context.SubmitChanges();

 }

}

Adding Reference in Test Project

There are in two ways you can work on Test Studio. Either on Visual Studio plugin or on Test Studio standalone version.

Adding reference in Visual Studio is simpler. Right click on test project and from context menu select Add Reference. Browse to DataHelper.dll library and add reference in test project.

Even though you have added reference in Visual Studio make sure that you have added reference in test project opened in standalone version else you will get exception.

image

To add DataHelper.dll assembly in Test Studio standalone version you need to follow following steps,

Select Project option in top menu

clip_image001[6]

Click on Show Settings in project tab

clip_image002

On clicking on Show Settings you will get Project Settings dialog box. In dialog box click on Script Options. To add assembly reference click on Add Reference.

image

When you clock on Add Reference Test Studio will open File Chooser dialog box. In that browse DataHelper.dll assembly reference location in file system and select that to add as reference in current Test project.

Writing Coded Step

Once reference of DataHelpe.dll is added in test project you need to write script for coded step. We can insert a row in database by calling static InsertItem method. So coded step will be as following


[CodedStep(@"New Coded Step")]
 public void LINQ_Test_CodedStep()
 {

DataHelper.InsertItem();

 }

In this way we can test with LINQ in Test Studio. To summarize

  1. Write LINQ and business logic in different library
  2. Add library as reference in test project
  3. Write script of coded step calling library functions.

I hope you find this post useful. To speedup automated testing do not forget to download trail of Test Studio from here

image

clip_image002_thumb.jpg

Presenting in SiliconIndia SOFTEC 2013

To present in SOFTEC I will be in Bangalore from 7th June to 9th June. Intrested in doing a demo of Test Studio for your team ? feel free to send me mail at dhananjay.kumar@telerik.com

clip_image002

I will presenting on topic “A look into Automated Web UI Tests “At SiliconIndia SOFTEC 2013 in Bangalore on 8th June.

If you are attending conference then do not forget to bump at me and introduce yourself.

Read more about conference here

Abstract of my presentation

There are some misconceptions around automated Web testing. Do you really need it? Is it easy? Does one needs to know fair amount of programming to automate tests? In this session we will focus on demystifying web testing. And we will learn some best practices.

We will discuss the benefits of UI automation. We will discuss the various deciding factors of automating tests and how to prepare your application for automation. Your development team and test team need to work cohesively for the best result. We will get into detail discussion of when to automate and when not to automate a test. How do we structure and effective test project? How do we create reliable automated UI tests? How do we deal with dynamic content? How to use a data-driven testing approach? All of these questions will be addressed. This session will be combination of theoretical concepts and a live demonstration to understand best practices of flexible locators, data driven testing, modular testing, recording and executing various kind of tests.

I am excited to see you at conference. If you want me to do a demo of Test Studio for your team then feel free to send me mail on Dhananjay.kumar@telerik.com .

image_thumb.png

As App Developer Why I do care about Icenium Everlive?

To get started with Icenium Everlive visits its Everlive portal here

clip_image002

Before getting into discussion of “Why do I care about Icenium Everlive”, let us get into our developer shoes and understand few generic requirements of any application.

An Application may need,

  • Backend data which should be secure and scalable
  • User management. Various level of user authorizations and authentications
  • Email Services
  • Large files as BLOB at backend
  • Validation of data , users at backend
  • Various kind of notifications
  • Codes running at backend

Icenium Everlive helps to solve above listed requirements. It is Cloud Based Backend as a Service offering from Telerik. Any services of Icenium Everlive can be accessed via provided REST API.

 

To get started with Icenium Everlive visits its Everlive portal here

image

Icenium Everlive provides following as service,

  • Backend Data
  • Large Files.
  • Users
  • Email
  • Notifications
  • Cloud Code

image

It provides REST API, JavaScript SDK and .NET SDK to access above services.

image

Let is focus our discussion on problems Icenium Everlive helps us to solve. Below I am listing some of the problems and how Icenium Everlive helps to solve them.

Problem # 1: Creating and Managing Service Layer

If you want to work with backend data, probably you need to do following tasks

image

As you may be aware that working with Service layer may be quite complex and require lot of development time. If you are not coming from backend and service development background then learning curve is very sharp as well. In many of the cases you end up giving most of the time working with services and backend database than working on business requirement of application.

Icenium Everlive helps you solving this problem. It eliminates need of service layer from your application.

image

In few simple steps you can configure content types (backend data) and can use them in your application. Icenium Everlive provides you following options to work with backend data from application.

  • REST API
  • .Net SDK
  • JavaScript SDK

Essentially you can work with secure and scalable backend data without bothering about complexities of service layer.

Problem# 2 Working with Users and Roles

In any application User management is one of the most important task. Tasks like

  • Creating new users for application
  • Managing different Role for users
  • Authentication of Users
  • Different level of authorization
  • Notifications to Users

All above tasks can be complex to handle. Icenium Everlive provides you complete User Management over REST API. Along with REST API, JavaScript SDK and .NET SDK are available to work with Users. Essentially to create new user for application you need to do a function call. At the backend Users and Roles of your application are managed by Icenium Everlive.

image

So Icenium Everlive helps you to manage users of application.

Problem # 3: Sending Email notifications

Email notifications are essential part of any application. Working with Email may be complex, it requires setting up email servers, working with template etc.

Icenium Everlive gives you complete solution of Emails and Email notification. From backend Icenium Everlive can send email on behalf of your application. It can send notification email while registering new user to application and validate users email address as well. At any point of time application can send emails using Icenium Everlive using custom template. Everlive allows you to create and configure email template as well.

image

Problem # 4: Working with Large Files

High quality images, videos etc. are always integral part of certain kind of applications. Uploading and downloading large files are another complex tasks as an application developer you need to do. Icenium Everlive ease tasks of working around large files at the backend. It provides REST API along with JavaScript and .NET SDK to work with files.

Icenium Everlive helps,

image

Icenium Everlive provides backend services to speedup application development. As a developer we can clearly see that Icenium Everlive offers all back end functionality as service which we can leverage in different kind of applications. Certainly it is something we need to care about. In further posts I will get into other details of Icenium. Tune in for same. Thanks for reading.

 

To get started with Icenium Everlive visits its Everlive portal here

clip_image001.png

Revamping Web Application: Implement RadAutoCompleteBox

Read – Revamping Web Applications: Implementing RadScheduler

We have used this particular control in the admin page for adding or deleting tags attached to the sessions. We use two Open Access data source here. First to fetch the TagName and set the property to DataTextField and second we attach TagID to the DataValueField.

Following is the DataSource we are talking about:

<telerik:OpenAccessDataSource ID="tagLDS" runat="server" EnableDelete="False" EnableInsert="False"
EnableUpdate="False" ObjectContextProvider="EventNetworking.Data.NetworkingDataContext,
EventNetworking.Data" OrderBy="this.TagName" TypeName="EventNetworking.Data.Tag">
</telerik:OpenAccessDataSource>

Our RadAutoCompleteBox control looks like the following on the aspx page:

<telerik:RadAutoCompleteBox ID="TagsAutoCompleteBox" runat="server" DataSourceID="tagLDS"
DataTextField="TagName" DataValueField="TagID" Skin="Windows7" Width="500px"
DropDownWidth="150px" DropDownHeight="200px" OnEntryAdded="TagsAutoCompleteBox_EntryAdded"
OnEntryRemoved="TagsAutoCompleteBox_EntryRemoved" OnDataBound="TagsAutoCompleteBox_DataBound">
 </telerik:RadAutoCompleteBox>

As you can see we have 3 events being assigned to the control:

  1. Let us first talk about the DataBound control:
    This control adds the tags to the control which are already associated to the session we are dealing with.image
    protected void TagsAutoCompleteBox_DataBound(object sender, EventArgs e)
     {
     var sessionTagsX = (from st in ndx.SessionTags
     where st.SessionID == Convert.ToInt32(SessionID.Value)
     select st).ToList();
    
     for (int i = 0; i < sessionTagsX.Count; i++)
     {
     TagsAutoCompleteBox.Entries.Add(new AutoCompleteBoxEntry(sessionTagsX[i].Tag.TagName, sessionTagsX[i].TagID.ToString()));
     }
     }
    
    
  2. To add an entry we just start typing and the list would be populated automatically. We can either select from the list or just type in the whole tag. clip_image001
    protected void TagsAutoCompleteBox_EntryAdded(object sender, AutoCompleteEntryEventArgs e)
     {
     SessionTag sessionTagsX = new SessionTag();
     sessionTagsX.SessionID = Convert.ToInt32(SessionID.Value);
     sessionTagsX.TagID = Convert.ToInt32(e.Entry.Value);
     ndx.Add(sessionTagsX);
     ndx.SaveChanges();
     }
    
    
  3. To remove a specified tag we just click the cross symbol and the EntryRemoved code will get executed. Here we specify the session and the tag and it get removed from the sessionTags table.
    protected void TagsAutoCompleteBox_EntryRemoved(object sender, AutoCompleteEntryEventArgs e)
     {
     SessionTag sessionTagsX = (from st in ndx.SessionTags
     where st.SessionID == Convert.ToInt32(SessionID.Value) && st.TagID == Convert.ToInt32(e.Entry.Value)
     select st).FirstOrDefault();
     sessionTagsX.SessionID = Convert.ToInt32(SessionID.Value);
     sessionTagsX.TagID = Convert.ToInt32(e.Entry.Value);
     ndx.Delete(sessionTagsX);
     ndx.SaveChanges();
     }
    
    

This control is useful when few elements need to be selected from a huge list. We had the same scenario and hence we used the RadAutoCompleteBox.

Read – Revamping Web Application: The UI changes

SchedulerDayView.png

Revamping Web Application: Implementing RadScheduler

Read – Revamping Web Applications: Proposed Enhancements

We have a page that displays already registered sessions. Currently, we are using Asp:ListView to represent the data and , the inbuilt features, we have used include,

  1. Removing the existing sessions,
  2. Redirecting to the session details,
  3. Navigate using the DataPager.

clip_image002

Now, we would represent the same data through the help of RadScheduler. The reason we have chosen Scheduler is because all the registered session/appointments would be visible in a calendar format. The timeline of this calendar, along with date view also provides the time view which provides a perfect solution for an end-user. Under Telerik AJAX Calendar and Scheduler Components (me using the 2013 Q1 for Net 45) select RadScheduler.

Programmatic

For the best explanation and indepth knowledge its better if we write code rather than using wizards. We open the code behind file and implement the following prerequisites:

Add the following headers:

using Telerik.Web.UI;
using EventNetworking.Data;

Under the class add NetworkingDataContext ndx = new NetworkingDataContext();
This creates a context for the data from our DAL (Data Access Layer).

Attach datasource to the RadScheduler first time the page is loaded.

if (!IsPostBack)
{
 // SECTION 1: Defining the data source
 var sessiontime = from st in ndx.SessionAttendees
 join ss in ndx.Sessions on st.SessionID equals ss.SessionID
 join sts in ndx.SessionTimeSlots on ss.TimeSlotID equals sts.TimeSlotID
 where st.UserID == Convert.ToInt32(userID.Value)
 orderby sts.FromTime
 select new
 {
 FromTime = sts.FromTime,
 Duration = sts.Durationinmins,
 EndTime = sts.FromTime.AddMinutes(Convert.ToDouble(sts.Durationinmins)),
 Title = ss.Title,
 SessionAttendeeUID = st.SessionAttendeeUID,
 SessionID = st.SessionID,
 UserID = st.UserID
 };

 // SECTION 2: Extracting the current user details
 int userid = (from m in ndx.UserProfiles
 where m.Username == User.Identity.Name
 select m.UserId).First();
 userID.Value = userid.ToString();

 // SECTION 3: Setting the RadScheduler Properties (necessary)
 sessionCartScheduler.DataKeyField = "SessionAttendeeUID";
 sessionCartScheduler.DataStartField = "FromTime";
 sessionCartScheduler.DataEndField = "EndTime";
 sessionCartScheduler.DataSubjectField = "Title";

// SECTION 3.1: Attach the newly created dataSource to the control
 sessionCartScheduler.DataSource = sessiontime.ToList();

// SECTION 4: Setting further properties of RadScheduler(optional)
 var minDate = from d in sessiontime
 orderby d.FromTime
 select d.FromTime;
 if (minDate.Count() != 0)
 sessionCartScheduler.SelectedDate = Convert.ToDateTime(minDate.FirstOrDefault());

// SECTION 5: Binding the control with the dataSource
 sessionCartScheduler.DataBind();
}

And your application is ready to run.

SECTION 1: We need an appropriate data to be represented in a Scheduler view. Hence, we have created a data source namely sessiontime. We plan to represent the user specified session. To do so, the join query is used to create a new view which includes the very important timing details, session title and session key.

SECTION 2: Detail of the current user is necessary because the cart functionality is specific to self.

SECTION 3: For RadScheduler to work we need to specify its DataKeyField, DataStartField, DataEndField, DataSubjectField and DataSource. DataSource property is where we attach the data to the control.

Property Details
DataSourceID Overridden. Gets or sets the ID property of the data source control that the RadScheduler should use to retrieve its data source.
DataKeyField Gets or sets the key field for appointments in the data source specified by the DataSourceID property.
DataStartField Gets or sets the start field for appointments in the data source specified by the DataSourceID property.
DataEndField Gets or sets the end field for appointments in the data source specified by the DataSourceID property.
DataSubjectField Gets or sets the subject field for appointments in the data source specified by the DataSourceID property.

Next, we tweak/explore some more features to improve our Scheduler. We don’t want our users to end up on a random date.

SECTION 4: We have set the date to the date when the first event takes place.

SECTION 5: We finally bind the data to the control.

Let us now add a click event to the session, such that the page is redirected to the session details once clicked.

protected void sessionCartScheduler_AppointmentClick(object sender, SchedulerEventArgs e)
 {
 int sessionIDvalue = (from sa in ndx.SessionAttendees
 where sa.SessionAttendeeUID == Convert.ToInt16(e.Appointment.ID)
 select sa.SessionID).FirstOrDefault();
 string sessionURL = "~/session/" + sessionIDvalue.ToString();
 Response.Redirect(sessionURL);
 }

Also, let us define what happens when a person clicks the cross symbol on the appointment.

protected void sessionCartScheduler_AppointmentDelete(object sender, AppointmentDeleteEventArgs e)
{
 //SECTION 1: Extracting the complete row of the selected tab and deleting it
 int uid = Convert.ToInt32(e.Appointment.ID);
 SessionAttendee sa = (from s in ndx.SessionAttendees
 where s.SessionAttendeeUID == uid
 select s).First() as SessionAttendee;
 ndx.Delete(sa);
 ndx.SaveChanges();

//SECTION 2: Refreshing the control
 var sessiontime = from st in ndx.SessionAttendees
 join ss in ndx.Sessions on st.SessionID equals ss.SessionID
 join sts in ndx.SessionTimeSlots on ss.TimeSlotID equals sts.TimeSlotID
 where st.UserID == Convert.ToInt32(userID.Value)
 orderby sts.FromTime
 select new
 {
 FromTime = sts.FromTime,
 Duration = sts.Durationinmins,
 EndTime = sts.FromTime.AddMinutes(Convert.ToDouble(sts.Durationinmins)),
 Title = ss.Title,
 SessionAttendeeUID = st.SessionAttendeeUID,
 SessionID = st.SessionID,
 UserID = st.UserID
 };

 sessionCartScheduler.DataSource = sessiontime.ToList();
 sessionCartScheduler.DataBind();

 e.Cancel = true;
}

SECTION 1: To delete the item from the table we first need to extract that row from the context. Once we have extracted the row we can easily remove the data using the CRUD Operations of OpenAccess ORM.

“e.Appointment.ID” is used to abstract the DataKeyField of the RadScheduler.

SECTION 2: Once the data is removed we need to rebind the data. To rebind the data, we need to refresh the data source. Hence, we create a data source and bind the control.

Until now we talked about how we can do things programmatically. Let us now focus on the wizard of the control.

Declarative

Click the smart tag and open Configuration Wizard.

A few which we have used are:

clip_image002[5]

Under the Day View tab- Check “Enable exact time rendering”

The XAMl code for RadScheduler looks like the following:

<telerik:RadScheduler ID="sessionCartScheduler" runat="server" AllowEdit="False" AllowInsert="False"
OnAppointmentClick="sessionCartScheduler_AppointmentClick" Height="500px"
OnAppointmentDelete="sessionCartScheduler_AppointmentDelete"
SelectedDate="2013-04-27" Skin="Windows7" EditFormTimeFormat="hh:mm" ShowFullTime="True">
<AdvancedForm TimeFormat="hh:mm" EnableTimeZonesEditing="True"></AdvancedForm>
<DayView EnableExactTimeRendering="True"></DayView>
</telerik:RadScheduler>

We are now done defining the control and our controls should look like the following:

image

image

image

If you have any trouble implementing, please post the difficulties in the comments.

Read- Revamping Web Application Part-11 : Implement RadAutoCompleteBox

image.png

Working with RadWindows & Converting GridView to RadGrid

Lets first talk about the Grid. Many developers face problem while implementing the GridView in the ASP.Net technology. Either the implementation of the design is too cumbersome or the display of the data as required is difficult. Hence, we replace GridView with RadGrid. Here, we have replaced the GridView of “Inbox” from our event networking application. Initially, the grid view look like the following:

image

A few controls needed to support the RadGrid are

1. RadAjaxManager

Here, we define the event where the loading symbol need to be popped as a modal window. For example, when you refresh your inbox. We need to define only one LoadingPanel which can be reused every-time we need one.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ReceivedMessagesGrid" LoadingPanelID="LoadingPanel"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="ReceivedMessagesGrid">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ReceivedMessagesGrid" LoadingPanelID="LoadingPanel"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>

2. RadAjaxPanel

The rest of the rad controls are placed within the RadAjaxPanel which acts very similar to the Ajax Panel. Here, we have RadWindowManager, RadAjaxLoadingPanel, RadCodeBlock and RadGrid,

2.1 RadWindowsManager

RadWindow is used like a popup on the screen and the complete message is displayed in this window. We can either set the screen to be modal or not. This is called a child window the page which calls it is called a parent window. This windows will be called from the RadCodeBlock once the message row is selected/clicked.

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow ID="DisplayRead" runat="server" Title="Read and Reply"
Left="150px" ReloadOnShow="true" ShowContentDuringLoad="true" AutoSize="true"
Modal="true">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>

2.2 RadAjaxLoadingPanel

This is where we define the loading panel which is explained in the RadAjaxManager.

<telerik:RadAjaxLoadingPanel ID="LoadingPanel" Skin="Windows7" runat="server"></telerik:RadAjaxLoadingPanel>

2.3 RadCodeBlock

RadCodeBlock helps define javascript which can be called from within a RadWindow or the parent window. It defines the functions with various parameters. Here we have DisplayReadReply function which opens the RadWindow with a different page defined as “ViewMessage.aspx” and a few parameters being sent through URL. The refreshGrid function is used to refresh the binding of grid so that the data gets updated.

<telerik:RadCodeBlock ID="CodeBlock" runat="server">
<script type="text/javascript">
//not used here...to be used by hyperlink
function DisplayReadReply(id, rowIndex) {
var grid = $find("<%=ReceivedMessagesGrid.ClientID%>");

var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
grid.get_masterTableView().selectItem(rowControl, true);

window.radopen("ViewMessage.aspx?RequestID=" + id, "DisplayRead");
return false;
}

function refreshGrid(arg) {
if (!arg) {
$find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
}
else {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");
}
}

function RowDblClick(sender, eventArgs) {
window.radopen("ViewMessage.aspx?RequestID=" + eventArgs.getDataKeyValue("ContactRequestID"), "DisplayRead");
}
</script>
</telerik:RadCodeBlock>

2.4 RadGrid

This is the actual control which is going to enhance your experience.

<telerik:RadGrid ID="ReceivedMessagesGrid" runat="server" CellSpacing="0" AutoGenerateColumns="false"
GridLines="None" AllowPaging="True" AllowSorting="True" PageSize="15" AllowMultiRowSelection="True" Skin="Windows7"
ShowGroupPanel="True" AllowFilteringByColumn="True" ViewStateMode="Enabled"
OnItemCommand="ReceivedMessagesGrid_ItemCommand" DataMember="Member">

<ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True" ReorderColumnsOnClient="True">
<Selecting AllowRowSelect="True"></Selecting>
<ClientEvents OnRowClick="RowDblClick" />
</ClientSettings>

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView DataKeyNames="ContactRequestID" ClientDataKeyNames="ContactRequestID" DataMember="Member"
AllowMultiColumnSorting="true">
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" Created="True" FilterControlAltText="Filter ExpandColumn column" />
<GroupByExpressions>
<telerik:GridGroupByExpression>
<SelectFields>
<telerik:GridGroupByField FieldAlias="MessageStatus" FieldName="MessageStatus1.MessageStatusText"
HeaderValueSeparator=" : " />
</SelectFields>
<GroupByFields>
<telerik:GridGroupByField SortOrder="Descending" FieldName="MessageStatus1.MessageStatusText"
HeaderText="Header for Group" />
</GroupByFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
<Columns>
<telerik:GridTemplateColumn UniqueName="Sender" DataField="UserProfile.Username" Groupable="false"
HeaderText="From/ Subject" HeaderStyle-Width="300px" SortExpression="ContactRequestID">
<ItemTemplate>
<br />
<asp:Label CssClass="MailSubject" ID="abstractLabel" runat="server" Text='<%# String2Extract(String.Format("{0}{1}{2}",Eval("Message1"),"|",Eval("MessageType")))%>'></asp:Label>;
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn HeaderStyle-Width="100px" UniqueName="Type" HeaderText="Type" DataField="MessageType1.MessageTypeDesc" SortExpression="MessageType"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderStyle-Width="100px" UniqueName="Status" HeaderText="Status" DataField="MessageStatus1.MessageStatusText" SortExpression="MessageStatus"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderStyle-Width="80px" ItemStyle-Width="60px" UniqueName="SentOn" HeaderText="Sent On" DataField="SentDate" SortExpression="SentDate" />
</Columns>
</MasterTableView>
</telerik:RadGrid>

Under RadGrid we have further defined the following:

2.4.1 ClientSettings

This defines all the client side events, if any. Here, we have defined OnRowClick event which is fired at the client side when we click any of the RadGrid row. This fires the function defined in the RadCodeBlock.

2.4.2 PagerStyle

This gives us an option for the type of paging. Types available are:

  1. Advanced
  2. NextPrev
  3. NextPrevAndNumeric
  4. NextPrevNumericAndAdvanced
  5. NumericPages
  6. Sliders
2.4.3 MasterTableView

This is where we define all the columns, their appearance and their sorting as well as grouping expressions. Few of the column types we have used are GridTemplateColumn and GridBoundColumn.
GridBoundColumn can directly be bound by specifying the column name of the table in the data field property.

Whereas, to implement a complex query, we use GridTemplateColumn. As the name suggests, we create a template and define our own values. Under grid template we have item template where we can have other ASP.Net controls like Label, Hyperlink, etc. We can even call a function from within a property like

Text='<%# String2Extract(String.Format("{0}{1}{2}",Eval("Message1"),"|",Eval("MessageType")))%>'

This String2Extract function is defined in the code behind. . The code above also explains how to call a function from code behind into a control and using some parameters.

3. Page_Load()

Prior to writing the page load event we include the Eventnetworking.Data and Telerik.Web.UI references in our code behind and then create a context NetworkingDataContext ndx = new NetworkingDataContext();

In the page load event we create a context for Sent messages, and then we bind the data with our RadGrid.

var InboxMessageDX = from im in ndx.Messages
where im.ReceiverUserId == Convert.ToInt32(UserIDValue.Value) && im.MessageStatus <= 4 && im.UserProfile1.Active== true
orderby im.SentDate descending
select im;

ReceivedMessagesGrid.DataSource = InboxMessageDX;
ReceivedMessagesGrid.DataBind();

4. String2Extract(string str)

This function is used to display the first 100 characters of the message as the subject in the list of the inbox.

protected string String2Extract(string str)
{
if (str != null)
{
string[] strArray = str.Split('|');
if (Convert.ToInt16(strArray[1]) == 1)
if (str.Length > 100)
return strArray[0].Substring(0, 100);   //.TrimEnd(';');
else
return strArray[0];
else return "";
}
else
return "";
}

5. Ajax Request

This event is fired each time the page is ajax-ified.
If there is an AjaxRequest calling either “Rebind” or “RebindAndNavigate”.

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
if (e.Argument == "Rebind")
{
ReceivedMessagesGrid.MasterTableView.SortExpressions.Clear();
ReceivedMessagesGrid.MasterTableView.GroupByExpressions.Clear();
ReceivedMessagesGrid.Rebind();
}
else if (e.Argument == "RebindAndNavigate")
{
ReceivedMessagesGrid.MasterTableView.SortExpressions.Clear();
ReceivedMessagesGrid.MasterTableView.GroupByExpressions.Clear();
ReceivedMessagesGrid.MasterTableView.CurrentPageIndex = ReceivedMessagesGrid.MasterTableView.PageCount - 1;
ReceivedMessagesGrid.Rebind();
}
}

After all we are done with all the changes, the new page looks like the following:

image

And once you click any of the message a child window open which displays the message and you have the option to respond to the message depending on the message type.

image

Read- Revamping Web Application Part-10 : Implementing RadScheduler