How to change background of View in Kendo UI Mobile

In this post I will show you how we can put a background color in Kendo UI Mobile view. Let us suppose that we got following view

clip_image001

There may be requirement when you will have to change background color of this view. You can change that using CSS as following

clip_image002

You will have to put this CSS on the page. I hope this post was useful. Thanks for reading

Toggle Button Icon and Handler in Kendo UI

While working on an application I come across a requirement to toggle the button in application layout. On clicking of the button, its icon and handler should be toggled with another icon and function. In this post we will learn how to achieve this.

Problem statement

To understand the problem better let us consider following application. You can see that detail of a particular session is displayed in the view. In header there is an Add button. When user click on the Add button, this particular session should get added to Favorite Session List and Add button should get changed to Trash button. Essentially we need to toggle the button with different icon and function attached the click event.

image

Solution

We can toggle from Add to Trash as following

clip_image002

In above code

  • saveButton is id of the button.
  • fsaveDataLocally is name of the function to add Session in Favorite Session List.
  • fremoveDataLocally is name of the function to remove Session from Favorite Session List.

You can bind and unbind handler from your application as per your business requirement.

We can toggle from Trash to Add as following

image

In this way you can toggle icon on Kendo Button and can toggle handler in the run time. I hope this post is useful. Thanks for reading.

 

Getting Started With Rad Controls for Windows Phone

This post will help you to start working with Telerik Rad Controls for Windows Phone. You can download trial version from here

Learn more about Rad Controls for Windows Phone here

After downloading click on the exe file. You will get Telerik Control Panel as following . Select Windows Phone and click on proceed.

image

If you want you can change default installation folder on this screen or can leave the default. Accept the Terms and Conditions and click on Proceed.

image image

After successfully installation, go ahead and create new Windows Phone project in Visual Studio. In Silverlight for Windows Phone tab you will get Rad Control Windows Phone Application project template

image

As usual choose Target version of Windows Phone operating system

image

In next windows you need to select Telerik Rad Control for Windows Phone references. Select required reference for the Rad Control you are going to use in the application. I am going to use RadHubTile in the application and for that, we need following references.

image

After adding references, you need to choose type of Windows Phone Application from the drop down. I am choosing simple Windows Phone Application. You can check the checkbox to add Application Bar in the application.

image

Click on Finish to create Windows Phone Application project. After creation of project to work with Rad Controls you need to add references on the XAML page.

image

After adding reference you can work with any RadControl. For example you can add RadHubTile on the application page as following

image

At the point if you run the application, you should be getting application with RadHubTile as following.

image

Conclusion

In this way you can set up environment to start developing Windows Phone Applications using Telerik Rad Controls for Windows Phone. In further posts we will get deeper into capabilities of all the Rad Controls.

 

Configure Internet Explorer for Test Studio Automation

 

In this post, we will go step by step to configure Internet Explorer to perform testing using Test Studio.

Very first you need to start with checking the Zoom level of Internet explorer. Make sure it is set to 100%

image 

You can find Zoom level detail in the right bottom on Internet Explorer. If Zoom level is not displayed in your browser then press ALT and from View menu navigate to Toolbars and the check Status Bar. After doing this you should have Zoom level information displayed in right bottom of the browser.

Next you need to disable the protected mode. To disable it navigate as,

Tools menu -> Internet Options

image

Click on Security tab and for all four zones, like Internet, Local intranet, Trusted Sites and Restricted Sites uncheck Enable Protected Mode check box.

image

You will get a warning message click on to continue

image

After disabling protected mode, you need to disable the Pop-up blocker .For that clicks on Privacy tab in Internet Option. In Pop-up Blocker section uncheck Turn on Pop-up Blocker

image

After this you need to make sure that Pop-up always open in new window. To do this goes to Internet Options and in General Tab click on Setting in Tab section.

image

In the Tabbed Browsing Settings select Always open popup in new window.

image

After setting Pop-ups to open in new windows, you need to add site you are going to test as trusted site. To do that, open Internet Option and then Security tab.

image

In Security tab select Trusted Sites and then click on Sites. Add site or domain of site as trusted site.

image

After performing this task, you need to make sure that JavaScript is enabling in the browser. For that open Internet Option and select Security tab. In Security tab click on the Custom Level.

image

In Security Setting window go to Scripting section and make sure that Active Scripting is enabled.

image

Then scroll to miscellaneous section and enable Display Mixed Content

image

Then scroll to download section and enable the File download

image

Last step is to make sure that active content can be run from the local file. To do this go to Internet Option and then select advanced tab. In Security section check the check box of Allow active content to run from local computer.

image

After performing this configuration, Internet Explorer is configured to perform testing using Test Studio.

 

Working with Kendo Data Model

Kendo.data.model provides the ability to define schema. Inside schema fields with various attributes and methods can be defined. It is inherited from ObservableObject

Read more about it here

You can create Kendo UI Model as following,

image

Even though at first glance above syntax looks verbose but it is very straight forward. You can create a new model by creating a variable of type kendo.data.model

  • First we define identifier of the model. This can be any field of the model. It is defined by setting id attribute
  • Different fields of model can be created in field attribute

For example, if you want to create a model for Student, you can do that as following

image

In Student model

  • There are three fields name , rollnumber and marks
  • Rollnumber is set as identifier field of this model.
  • Type of the fields is set in the type attribute.

You can create object of a model as below.

image

You can controls fields behavior and can configure many details like following

  • Default value can be set
  • Editable behavior can be set
  • Null behavior can be set
  • Default parsing function for a field can be set.
  • Validation rules can be set

You can configure various attributes as following

image

Name filed in the model is created with different attributes. For example this name field is editable and its default value is dj.

You can determine that whether a model is new or not using isNew method. Consider below instance of Student model, you will get false as output. If model identifier is set then Kendo framework does not consider that as new

image

If you change above model as following, you will get true in alert since id of model is not set.

image

In this way you can work with Kendo.data.model. I hope you find this post useful. Thanks for reading.