Kendo UI

Resources for webinar “Developing Online SpreadSheet for your Web Application using Kendo UI”

This is a recap blog post for the webinar we conducted on Nov 26 2015. The webinar was titled “Developing Online SpreadSheet for your Web Application using Kendo UI”.

Continue reading

Advertisements
Telerik Platform

Resources for Webinar “Consume Azure Mobile Services in Telerik Platform”

On Aug 27 2015, we conducted one more webinar as part of Telerik India. This time we talked about how to “Consume Azure Mobile Services in Telerik Platform“. This blog post is a recap of the webinar. You will find the video recording of the webinar in this blog post.

About Telerik Platform:

Telerik Platform is a modular platform for web, hybrid and native development that integrates a rich set of UI tools with powerful cloud services. This end-to-end development and project management solution provides tools and services for every stage of your application lifecycle – from idea to deployment and on-device performance.

Telerik Platform

You can know more about Telerik platform here.

Video Recording:

Here is the video recording of the webinar:

 

There is no slide deck for this webinar. I did not use any slide deck and did most of the things hands on.

 

Till next time – Happy Coding.

Kendo UI

Resources for Webinar – “Creating Responsive Design for Enterprise Web Applications with Bootstrap and Kendo UI”

On Aug 13 2015 we conducted one more webinar as part of Telerik India. This time we talked about “Responsive Design for Web Applications with Bootstrap & Kendo UI”. In this webinar we showcased how Kendo UI is responsive out of the box and also how Kendo UI integrates with Bootstrap.

About Kendo UI:

Kendo UI is a flagship product from Telerik. Kendo UI is a HTML5 based client side JavaScript UI framework. Kendo UI contains over 70+ Web/DataViz/Mobile widgets. You can know more about Kendo UI here: http://www.telerik.com/kendo-ui. Kendo UI demos are available online here: http://demos.telerik.com/kendo-ui.

Kendo UI

Kendo UI

 

Slide Deck:

It was one of those webinar where i did not use a slide deck. So no decks to put up here :).

 

Video Recording:

Here is the video recording of the webinar. You can view this recording at your leisure time:

 

Hope you like the webinar. Do let us know if you have any feedback/suggestion.

Till next time – Happy Coding.

Integrating SignalR in HTML 5 Applications with Kendo UI – Webinar Resources

On Mar 12 2015 we conducted yet another webinar as part of our monthly webinar series. This time we were happy to invite Vidyasagar Machupalli who is a Microsoft MVP in Gaming. In fact he is the only Gaming MVP in South East Asia. The topic for this webinar was “Integrating SignalR in HTML5 Applications with Kendo UI”. Idea was to talk about real time communication in ASp.NET using SignalR and how Kendo UI makes it easy to work with SignalR.

ASP.NET SignalR:

Here is what the official description of SignalR is at http://www.asp.net:

ASP.NET SignalR is a new library for ASP.NET developers that makes developing real-time web functionality easy. SignalR allows bi-directional communication between server and client. Servers can now push content to connected clients instantly as it becomes available. SignalR supports Web Sockets, and falls back to other compatible techniques for older browsers. SignalR includes APIs for connection management (for instance, connect and disconnect events), grouping connections, and authorization.

Kendo UI:

If you have been attending our webinars, you would have known about Kendo UI by now. If not, Kendo UI is a single package you need to develop HTML5 based sites/apps. Kendo UI is a HTML5 based client side JavaScript UI framework. To know more about Kendo UI head over to the project page here: http://www.telerik.com/kendo-ui. You can find Kendo UI demos online here: http://demos.telerik.com/kendo-ui

Slides:

Video:

Questions:

Q: Hi, SignalR is an advanced topic related to Web Sockets or Server Sent Events etc. Or it rely on these architecture?
A: SignalR is a real time communication technology on ASP.NET Stack from Microsoft.

Q: In order for the server to do real-time communication with SignalR, should the server be an IIS web server ?
A: SignalR at the moment can be hosted in IIS or as a stand alone process. But this requires you to be on Windows platform.

Q: Can we use Telerik controls with SignalR?
A: Absoutely. Telerik Kendo UI has specific binding/ support for SignalR.

Q: SignalR is purely async based or can it be set to be in sync mode like the way node.js is an async by default but can be set to mode sync?
A: SignalR is a server side technology and all it does is to keep track of all the clients connected and intimate them of any updates. So typically server sends a broadcast to all connected client and clients know how to react to this update on the client side.

Q: What is the most important advantage of SignalR ?
A: Real Time Communication between Server & Client.

T-Shirt Winners:

As usual we have picked 2 attendees randomly to receive our T-Shirts. They are:

  • Sonam Bhardwaj
  • Kapil Chhabra

Congratulations to the winners. We will contact you shortly on your registered email id. Rest of you, do keep attending our future webinars.

Till next time – Happy Coding.

Kendo UI

Resources for Webinar “Exporting Data Easily with Kendo UI”

Feb 26, 2015 we conducted a webinar titled “Exporting Data Easily with Kendo UI”.  We here at Telerik India host webinars almost every Thursday of the month from 3PM to 4PM IST. This time we wanted to talk about one of the most asked feature in Kendo UI – Data Export.

Kendo UI

As part of our Kendo UI Q3 2014 release, we introduced the capability of exporting data to Excel & PDF out of the box. In this webinar i take a look at the options available for Excel export and PDF export. You can find more about Kendo UI here: http://www.telerik.com/kendo-ui.

Slide Deck:

Here is the slide deck used in the webinar:

Video Recording:

Here is the video recording of the webinar:

Q&A:

Q: Is it required to know JQuery for Kendo UI?
A: Kendo UI is based on JQuery and depends on JQuery. If you know JQuery way of working things, it will be easier to use Kendo UI.

Q: Is Kendo UI Open Source?
A: Kendo UI Core is the open source version of Kendo UI. You can know more about it here: http://www.telerik.com/kendo-ui/open-source-core. Kendo UI Professional is our Enterprise product which will require license.  You can know more about it here: http://www.telerik.com/kendo-ui

Q: Will Kendo UI mobile support BlackBerry as well?
A: yes it will.

Q: What could be the minimal software requirements to support Kendo UI?
A: Here are the supported browsers: http://docs.telerik.com/kendo-ui/browsers-support and JavaScript Prerequisites: http://docs.telerik.com/kendo-ui/install/prerequisites

Q: which IDE is the better one for KENDO UI?
A: Since Kendo UI is all about writing JavaScript – Any IDE that you are familiar with and are comfortable can be used.

Q: I dont have excel or PDF plugin installed in my web browser or on my box. still could i able to visualize the contents?
A: Kendo UI doesnt require Microsoft Office or Adobe software to create Excel or PDF documents on client side. But you will need Microsoft Office & Adobe software to view the exported files on the machine.

Q: What is the role of JSZip library in this?
A: Is is used to zip up the file and save it to local disk.

Q: Can I initialize the formulae for any cell while exporting to excel ?
A: Formulas are not supported as of now.

Q: what version of Kendo UI is export option supported?
A: Data Export is available from Q3 2014 release onwards

Q: how can we format the columns in excel?
A: This scenario is documented in our documentation. You can take a look at it here: http://docs.telerik.com/kendo-ui/web/grid/how-to/excel/cell-format

Teleik Ninja T-Shirt Winners:

As usual we have picked the following two lucky attendees as our T-Shirt winners. They are:

  • Sinu Antony
  • Altaf Shaikh

Congratulations to winners. Those who did not win, dont worry – we still have a lot of webinars to go this year. So try your luck in our next webinar.

Till next time – Happy Coding.

Kendo UI Grid

Simple Export to PDF from your Data Grid using Kendo UI

In my last blog post, we looked at a new feature of Kendo UI Grid released as part of our Q3 2014 – namely Export to Excel. Exporting data from Data Grid was a high ask feature and we provided that in our latest release of the product. In this blog post we will look at how to export the data grid contents to PDF. Kendo UI Data Grid support exporting to PDF out of the box. So let’s start looking at some code.

Creating a Grid:

As usual let’s build a simple grid. I will make use of our Northwind service available on our demo server as a data source to the grid. Here is the code snippet:

<div id="grid"></div>
<script>
   $("#grid").kendoGrid({
       dataSource: {
           type: "odata",
           transport: {
               read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
           },
           pageSize: 7
       },
       sortable: true,
       pageable: true,
       columns: [
           { width: 300, field: "ProductName", title: "Product Name" },
           { field: "UnitsOnOrder", title: "Units On Order" },
           { field: "UnitsInStock", title: "Units In Stock" }
       ]
   });
</script>

This will produce the following grid:

Kendo UI Grid

Kendo UI Grid

 

Providing Export Option on the Grid:

As seen in my previous blog post on Excel Export, for PDF also we have a command bar option available out of the box. We just have to add a toolbar command named “pdf”. This will provide an “Export to PDF” on the grid toolbar and clicking which will export the Grid to PDF. Here is the code snippet:


<script>
   $("#grid").kendoGrid({
       tooldbar:[“pdf”]      
       ….
       //code omitted for brevity
   });
</script>

And here is the snapshot of how our grid will look like now:

Kendo UI Grid with Export button

Kendo UI Grid with Export button

If we now click on the “Export to PDF” we will get the Grid exported to a PDF document and the PDF will be saved to your system. Here is a snapshot of the PDF file itself:

PDF Document

PDF Document

Well that’s all it takes to export your Grid data to PDF.

Customizing the Exported PDF File:

Kendo UI Grid also provides certain options which can be set on the grid itself and these options will control how the PDF exported file has to be shaped. Here are the options supported for PDF export:

Property Type Description
author String Author of PDF Document
creator String Creator of PDF Document. Defaults to “Kendo UI PDF Generator”
date Date Date when PDF Document was created. Defaults to current date
fileName String Name of the exported PDF Document
keywords String Keywords of exported PDF Document
landscape Boolean Paper dimension setting. Default is false
margin Object Specify margins of the page
paperSize String Specify paper size of PDF Document. e.g. A4, A3 etc
subject String Specify subject of the PDF Document
title String Specify title of PDF Document

Here is the code snippet on how to set the PDF options:

<script>
   $("#grid").kendoGrid({
       tooldbar:[“pdf”],
        pdf:{
              author:"Lohith G N",
              creator:"Telerik India",
              date:new Date(),
              fileName:"NorthwindProducts.pdf",
              keywords:"northwind products",
              landscape:false,
              margin:{
                      left: 10,
                      right: "10pt",
              top: "10mm",
               bottom: "1in"
              },
              paperSize:"A4",
              subject:"Northwind Products",
              title:"Northwind Products"
       },     
       ….
       //code omitted for brevity
   });
</script>

Programmatically Export to PDF:

Toolbar option to provide an export option is great. It lets you add export feature without much of you doing any coding. But what if you have a situation where you want to a button outside of the Grid i.e. no toolbar button. And you want the grid to be exported to PDF on click of that external button. Kendo UI Grid covers you in this scenario by exposing a method called “saveAsPDF()”. You just grab instance of the grid at runtime and invoke the method “saveAsPDF()” to start the export. That’s as easy and simple it is. Here is the code snippet to show this:


&nbsp;

<div id="grid"></div>
<br>
<button id="btnExport">Export to PDF</button>
<script>
$("#btnExport").kendoButton(
{
click:function(){
$("#grid").data("kendoGrid").saveAsPDF();
}
});
//code omitted for brevity
</script>

That’s all its there to exporting the data grid to a PDF document. Do give it a try and let us know if you have any suggestion/feedback on this feature.

All the code in this blog post can be accessed on our Kendo UI DoJo here: http://dojo.telerik.com/@kashyapa/ADUVi

Kendo UI Grid

Simple Export to Excel from your Data Grid using Kendo UI

In Q3 2014 release of our Kendo UI, we added one of the most sought out feature in the Grid. Exporting grid data was one of the top ask feature for Kendo UI Grid. We are happy to say that with the Q3 release Kendo UI Grid now supports exporting to Excel or PDF document out of the box. In this blog post we will take a look at how to use the Excel export feature of the Kendo UI Grid.

Creating a Grid:

First we will create a simple Kendo UI Grid. I will connect to one of our demo service which is based on Northwind database. I will use the Products table and display Product Name, Units on Order and Units in Stock and will have a page size of 7. Here is the code snippet for the grid:

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            },
            pageSize: 7
        },
        sortable: true,
        pageable: true,
        columns: [
            { width: 300, field: "ProductName", title: "Product Name" },
            { field: "UnitsOnOrder", title: "Units On Order" },
            { field: "UnitsInStock", title: "Units In Stock" }
        ]
    });
</script>

And here is the output of the above code snippet:

Kendo UI Grid

Providing Export Option on the Grid:

Before we proceed with enabling the export to excel option of the grid, there is one prerequisite that needs to be taken care of. Excel Export relies on a JavaScript library called “jszip”. This library needs to be referenced before Kendo UI JavaScript reference. JSZip is part of the Kendo UI distribution and is also available via the Kendo UI CDN:

<script src=”http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js”></script&gt;

Kendo UI Grid provides one of the easiest way to configure the export button options. If you have used Kendo UI Grid before, you will be familiar with the concept of Toolbars on Grid. We have provided a simple command which can be used in toolbar and provide export to excel or export to pdf option. Yes with just one setting you can now provide export capability on your grid. Let’s see the code to believe it:

<script>
    $("#grid").kendoGrid({
        toolbar:[“excel”]
        ….
        //code omitted for brevity
    });
</script>

And here is the output of the above code:

Kendo UI Grid with Toolbar
Let’s go ahead and click on the Excel export button. You should see a file named “Export.xslx” being download to your machine. Here is the screenshot of the excel file on my machine:

Excel Export File

Customizing the Exported Excel File:

So far we saw how simple it was to provide an export to excel capability on the Grid. But the exported file was named “Export.xslx”. Well that name is not intuitive. Better would be to provide a meaning full name to the excel file that’s gets exported. Fortunately, the Kendo UI team has thought about it and the Grid API has exposed certain options for Excel export feature. Let’s take a look at the options we have on hand:

Property Type Description
excel Object Configure the Kendo UI Grid Excel export settings
excel.fileName String Configure the file name of the exported excel file
excel.filterable Boolean Configure whether exported excel file will have column filtering or not
Excel.allPages Boolean Configure if all pages data need to be exported. Default is false

Let’s see the above excel options in action. Here is a code snippet which sets the excel options on the Grid:

<script>
    $("#grid").kendoGrid({
        toolbar:[“excel”],
        excel:{
	filename:”Northwind Products Stick List.xslx”,
	filterable:true,
	allPages:false
        },
        ….
        //code omitted for brevity
    });
</script>

Now, when we click on the Export to Excel button – the exported file will be named as “Northwind Products Stock List” and will have data filters on in the worksheet. Here is a screenshot of the exported excel file on my machine:

Excel Export File with Filters
Well that how easy it is to configure your excel export options.

Programmatically Export to Excel:

So far we have seen how the inbuilt feature of toolbar helps you to provide the excel export capability with juts a single setting. What if you have a scenario where you don’t need a toolbar button the grid rather you need a button outside the grid and on click of this external button excel file should be exported. Well even this scenario is covered by the export feature of Kendo UI Grid. Grid API exposes a single method called “saveAsExcel()” which can be invoked on the Grid at runtime and the excel file will be exported. Let’s see this in action. Here is the code snippet to do this:

<div id="grid"></div>
<button id="btnExport">Export to Excel</button>
<script>
  $("#btnExport").kendoButton({
    click: function()
    {
      $("#grid").data("kendoGrid").saveAsExcel()
    }
  })

    $("#grid").kendoGrid({
        excel: {
          fileName: "Northwind Products Stock List.xlsx",
          filterable:true,
          allPages:false
        },
        …
        //code omitted for brevity
    });

Lets take a closer look at what we have done here. I have placed a button outside the grid. I have gone ahead and set excel export options on the grid. When the button is clicked, I obtain a reference to kendo grid and call “saveAsExcel()” method on the grid instance. And the behavior is the same i.e. an excel file is exported according to the options set on the grid.

I hope this blog post excites you with the new feature of Kendo UI Grid namely Excel Export. If you have followed along the blog post, you would have realized that providing excel export option on a grid is as simple as setting couple of properties on the Grid itself. It cannot get any easier than this. Do give it a try and let us know your feedback or suggestion on Excel Export feature of Kendo UI Grid.

Note: The complete code of this blog post is made available as a Kendo UI DOJO here: http://dojo.telerik.com/@kashyapa/umuWI

Till next time, Happy Coding!

Resources for Webinar “Mobilizing Your SharePoint Data”

On Nov 13 2014, we conducted a webinar titled “Mobilizing Your SharePoint Data”. This is part of our regular webinars we do here at Telerik India. These webinars are scheduled on Thursdays of every month from 3PM to 4PM. You can look out for schedules that we announce in announcement category of this blog site.

Mobilizing your SharePoint data is a very common scenarios that most of the enterprises come across. We wanted to showcase how you can use Kendo UI Mobile to create cross platform adaptive rendering Hybrid Mobile Apps and connect to SharePoint using OData services that SP exposes. You can know more about Kendo UI here: www.telerik.com/kendo-ui

Slide Deck:

This was one of those webinar where i did not have a slide deck at all. That means there was no presentation and was all practicals in the webinar.

Video Recording:

Below is the video recording of this webinar. For those of you who missed attending live, you can go through the video at your leisure time and relive the webinar.

T-Shirt Giveaway:

As usual we have randomly picked 2 attendees from the webinar who will recieve our .NET Ninja T-Shirt. They are:

  • Ganesh Malireddy
  • Srinivas Panuganti

Congratulations to the winners. Rest of the folks dont worry. We still have a lot of t-shirts to give away. So keep watching our blog for webinar schedule, sign up and attend our future webinars.

Till next time – Happy Coding !

Resources for webinar “Front End Applications Using One Stop JavaScript Library from Telerik”

On Oct 30 2014, we conducted one more webinar as part of our webinar series. This time we looked at the Kendo UI framework and how you can develop front end applications using one stop JavaScript library from Telerik. In this blog post you will find the webinar resources i.e. slide deck that was used in the webinar and the video recording of the webinar.

About Kendo UI:

Kendo UI is a client side JavaScript UI framework. This is one package you need to build HTML5 sites or apps. To know more about Kendo UI check out the product page here: http://www.telerik.com/kendo-ui.

KendoUI

Slide Deck:

Here is the slide deck that was used in the webinar:

Video Recording:

As with any of our webinars, this webinar was also recorded and here is the video recording:

 

T-Shirt Giveaway:

Following folks have been randomly selected to recieve our Telerik .Net Ninja T-Shirts. Congratulations and we will contact you on your email to ship the t-shirts:

  • Ankit Chauhan 
  • Bijeesh Kunjukunju

We still have a lot of webinards lined up for the rest of the year. Hope to see you in our future webinars too.

Till next time – Happy Coding !

Kendo UI Grid with External Search Box

How To: External Search Box For Kendo UI Grid

Couple of weeks ago, i had an email from a customer of ours who wanted to know how to provide a external search box to our Kendo UI grid. What they wanted to do was to have a text box and a button to initiate the search. This seems to be a common scenario that you will have in your proejcts. So i thought this makes a good case for a blog post. If you have a similar situation in your projects then you better read through this blog post till the end.

The Plot:

What i want to achieve is:

  • Have a text box to enter a search string
  • Have a button which will trigger the search
  • Have a Kendo UI Grid to show the data

I will be using our Northwind OData service available here: http://demos.telerik.com/kendo-ui/service/Northwind.svc/. I will be using the Customers data to show in the grid and search

Kendo UI Grid with External Search Box

Kendo UI Grid with External Search Box

 

Setting up the UI:

 

Binding the Grid with Data:

On document ready, i will instantiate the Kendo UI Grid and bind it to the Odata service. Here is the code snippet:

Lets walkthrough as to what has been done. I provide a datasource to the grid . I set the page size to 20 and turn on server paging & server filtering so that the data source does not do client side paging & filtering. I also provide the grid with the columns that needs to be shown.

 

Handling Search Button Click:

As stated earlier, the external search will be triggered by the search button we have above the grid. If you thought that the Grid is what will be doing the search – well its not. Its actually the data source will do the heavy lifting. The Grid just gets the data to display from the data source. Now, the Grid’s data source is of type kendo.Data.DataSource. One of the API methods that the data source provides is query(). What query method does is – it will execute any specified query and will make a HTTP request when bound to a remote service. So the query we need to perform in our case is filtering. Our search text needs to be converted in to a bunch of filters. In my use case i would like to search the fields Company Name, Customer Name and Contact Name whether they contain the text entered in the search box. So this will be specified as 3 filter conditions with an “OR” logic. So here is the code snippet to do this:

Well that’s all the code it takes you to provide a external search capability for your grid.

 

Result:

You can see a working demo here: http://runner.telerik.io/fullscreen/@kashyapa/IhEr/5

You can get the source code of this demo is available here: http://dojo.telerik.com/@kashyapa/IhEr/5

 

I think this post gives you an idea on the power of kendo.data.DataSource. You can do a lot of things with data source. Hope this example helps you in your project if you have a similar requirement.

Till next time, Happy Coding!

Telerik Mobile Platform

Resources for Webinar “Solving Enteprise Mobility Considerations with Telerik Mobile Platform”

On Oct 16 2014, we conducted a webinar titled “Solving Enterprise Mobility Considerations with Telerik Mobile Platform”. This is a recap blog post of the webinar. In this blog post you will find the slide deck, video recording and questions & answers from the webinar.

About Telerik Mobile Platform:

Telerik Platform is a modular platform for web, hybrid, and native development that integrates a rich set of UI tools with powerful cloud services. This end-to-end development and project management solution provides tools and services for every stage of your application lifecycle – from idea to deployment and on-device performance. Telerik Platform integrates AppPrototyper, AppBuilder, Backend Services, Analytics, Mobile Testing, AppManager, and AppFeedback to help you solve the challenges of designing, building, connecting, testing, deploying, managing, publishing, and measuring your applications.

Telerik Mobile Platform

Telerik Mobile Platform

You can know more about Telerik Mobile Platform here.

 

Slide Deck:

Here is the slide deck that was used in the webinar:

 

Video Recording:

As usual, we record all our webinars and here is the video recording of this webinar:

 

T-Shirt Winners:

Here are the 2 lucky persons from the webinar who have been selected to receive our .NET Ninja T-Shirt.

  • Kugan Karthikeyan
  • Siva Ayinampudi

Congratulations to the winners. We will contact you shortly and ship the t-shirt. Rest of you dont worry, we still have a lot of webinars coming up. So make sure you attend our future webinars too.

 

Till next time, Happy Coding

Kendo UI + Angular JS Integration

Kendo UI Integration with AngularJS – Webinar Resources

On Sep 11 2014, we conducted a webinar titled “Best of Both Worlds – Kendo UI Integration with Angular JS”. This webinar is part of the series of webinar we do here in Telerik India for India time zone.

About Kendo UI:

Kendo UI is a flag ship product from Telerik. It is a HTMl5 based JavaScript client side UI framework. Kendo UI provide Web Widgest, Data Vizualization Widgets and Mobile Widgets. Kendo UI also has certain framework elements namely Kendo UI DataSource, MVVM, Templating, Gloabalization, Validation, Drag & Drop support, Effects and SPA. You can know more about Kendo UI here.

About Angular JS:

Angular JS is a popular JavaScript framework and is developed by folks at google. Angular pretty much is the community choice as of now when it comes to using a client side framework. It is very popular among the front end developers today.

Kendo UI + Angular JS Integration:

As part of Kendo UI framework we now fully support Angular JS. What this means is when using Angular in your project you can make use of Kendo Directives to create Kendo UI widgets. We have out of the box support for Kendo Angular Directives and the directives are available for Web, DataViz & Mobile widgets. You can continue using Angular as the back bone of your app while you can make use of Kendo UI as the front end control choice. Thats why we called this webinar “best of both the worlds”.

Kendo UI + Angular JS Integration

 

 

 

 

Slide Deck:

Here is the slide deck that was used in the webinar:

 

Video:

Here is the video recording of the webinar:

 

Q & A:

Q: Is Kendo UI With Angular is free?
A: Kendo UI comes in two flavours – Kendo UI Core which is a OSS & free and Kendo UI Professional (paid). Kendo UI Angular support is available in both – the Core & Professional editions.

Q: Is Angular JS different than Backbone JS and Knockout JS?
A: Yes. Knockout deals with only data binding. Angular provides data binding plus many more things as a framework.

Q: What do you mean by Hybrid Applications in JavaScript?
A: Mobile Apps developed using HTML/CSS/JS are known as Hybrid Applications.

Q: why did you use visual studio? is it so specific?
A: No. Speaker is familiar with Visual Studio and hence using the same. VS is not a prerequisite for this. You can use notepad, sublime text or any other editor.

Q: Is Telerik Test Studio Supports Angular Components, I am sure it supports Kendo UI?
A: Test Studio has native support for Kendo UI components. Any web page developed using Angular can also be tested using Test Studio. However, native support for Angular doesn’t exist right now.

Q: Whats your view on Open Source Ionic Framework?
A: Our team has written about it. http://developer.telerik.com/featured/supercharge-app-development-ionic-appbuilder/

Q: do we need Kendo libraries or only Kendo scripts in order to work with Kendo?
A: Kendo UI is all about 2 style sheets and 1 JavaScript file 🙂

Q: Will it helps in SharePoint ?
A: Sure. These are both client side frameworks (no server side requirements). So, it is supported by SharePoint.

Q: Is Kendo UI fully client side ?
A: Yes it is fully client side.

Q: Kendo UI is based on ?
A: It takes a dependency on jQuery. It is written from scratch for performance and functionality.

Q: DataSource is like database?
A: No. Kendo UI DataSource is a client side framework object that can connect to any web service and be leveraged by binding it to any Kendo widget & charts.

Q: If I install Kendo UI Library using Nuget in Visual Studio then do I need need to pay for that?
A: Kendo UI Core is the OSS from Telerik. It is available on NuGet as KendoUICore. Kendo UI Core is free for personal as well as commercial projects.

Q: In Core all these are available?
A: Core doesn’t have some widgets like Grid and the whole charting library. More details here: http://www.telerik.com/kendo-ui/comparison

Q: Whether Kendo UI supports all Browser?
A: List of supported browsers: http://docs.telerik.com/kendo-ui/browsers-support

Q: Can i get the document related to Kendo UI and their usage?
A: Kendo UI Documentation can be found at – http://docs.telerik.com/kendo-ui.

Q: If we need only 1 or 2 element (i.e. Calender or slider) so we have to add whole Kendo UI CSS and JS file?
A: No. You can simply use the specific js file for those specific widgets. There is a custom script builder also available at: http://www.telerik.com/download/custom-download

Q: Does Kendo-Core provide support for responsive layout like Bootstrap?
A: Kendo UI as a framework does not reinvent the wheel for providing a responsive layout. Instead all Kendo UI widgets are responsive in nature out of the box.

Q: I was under impression that Kendo UI is for Mobile apps. if true why we are using regular browser and not a emulator ?
A: Kendo UI comes in 3 flavors namely – Kendo UI Web for Web Apps/Sites, Kendo UI DataVix for visualization and Kendo UI Mobile for hybrid mobile applications. In the demo we are taking Kendo UI Web and hence the browser check.

Q: Is Angular-Kendo version released?
A: Yes. This is officially supported. http://docs.telerik.com/kendo-ui/AngularJS/introduction

Q: Hey Kendo UI Core can be used on production as it is free or any licensing issue?
A: Completely free with Apache v2 license. Good for commercial and open source projects.

Q: From where we can download free version of Kendo UI + Angular.JS ?
A: You can get the pre built package of Kendo UI Core here. Angular JS support is out of the box.

Q: what is difference between kendo.web.min.js and kendo.all.min.js?
A: Kendo Web is a part of Kendo framework. Kendo.all contains the full framework components – DataViz, Mobile and Web

Q: what are the performance issues in building hybrid apps using Kendo UI?
A: We have worked very hard to get the performance up for Kendo. You will experience a very smooth performance with Kendo in Hybrid Apps.

Q: can u please show the example of Kendo UI DropDown list?
A: Demos can be found here: http://demos.telerik.com/kendo-ui/dropdownlist/index

Q: Does same code written for Kendo UI widget (desktop web)run on mobiles also?
A: Yes, it will. Kendo UI widgets are responsive by default.

Q: Are you using Knockout JS for MVVM in Kendo?
A: No. Kendo has a native MVVM framework.

Q: Is data-role option avaliable in core ui? or only in proferssional?
A: data-role is used to convert a simple HTML element into specific widgets (e.g. Grid, ListView). It is available for all widgets that are available in Kendo UI Core. Kendo UI Professional contains additional widgets and charts.

Q: what about the row template?
A: Kendo Grid supports row templates written as Kendo Template (very simple javascript syntax).

Q: I was not able to use two panel bar controls in same page as its being tracked by ID..Ex- <Ul id=”panelbar” ?
A: You need to make sure that each widget has an unique ID

Q: Whats the role of row template here?
A: If you want to display data in a specific way from the incoming data, you can use the row template e.g. an image from simply the image URL

Q: Is Server Paging possible?
A: you can enable Kendo UI DataSource to request this from server. However, it will also need to be supported by the underlying service.

Q: Is it possible to create Angular or Kendo based website in Visual Studio 2010 ?
A: Yes absolutely. You can use any other IDE/ Editor as well.

Q: Can we use it with asp.net MVC 5?
A: Yes you can. Kendo UI comes with bindings for ASP.NET MVC 5. http://www.telerik.com/aspnet-mvc

Q: Any Kendo map file for WebStorm for code completion?
A: Sorry not available at this time. Please submit this at the feedback portal: http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback

Q: how can we provide locale support for multiple culture to kendo date picker with angular?
A: Locale Support is availabl for all Kendo widgets. More details: http://docs.telerik.com/kendo-ui/framework/globalization/overview

Q: my company wants to create an application on asp.net MVC. some Views should be able to work on phone also. Do u recommend me to use Kendo UI?
A: I think yes. Kendo UI specializes in making apps cross platform.

Q: Do we have widgets for pop-up dialogs?
A: Yes window widget. Demo here: http://demos.telerik.com/kendo-ui/window/index

Q: Do we have themeb uilder for kendo UI?
A: Yes, we do. http://demos.telerik.com/kendo-ui/themebuilder/

Q: Can I show google map from Kendo UI?
A: http://demos.telerik.com/kendo-ui/map/index

Q: How does kendo support these many browsers? Does it not make the framework heavy? Can we download a tailored copy that would only work for modern browsers so that the framework weight is light?
A: I am not sure if we allow only support for modern browsers. You can however use our custom script builder for only the components you require. http://www.telerik.com/download/custom-download

Q: Is kendo-UI supports rendering images/graphics/text on canvas?
A: http://demos.telerik.com/kendo-ui/drawing/index

Q: can we do animation with Kendo UI?
A: Supported via FX. Sample: http://demos.telerik.com/kendo-ui/fx/expand

On our website you can see a high level description of the integration between Kendo UI and AngularJS.

T-Shirt Giveaway:

Since we had an overwhelming response to this webinar, we decided to pick 3 winners for the T-Short giveaway instead of regular 2 winners. So here are the 3 names:

  1. Prolay Sarkar
  2. Vishal Sanchihar
  3. Kapil Chhabra

Congratulations to the winners. We will contact you over email and will ship the t-shirts to your address. Rest of the folks dont worry, we still have a lot of webinars lined up. So keep joining us for every webinar.

Till next time – Happy Coding !!!

 

 

Partners Listing

Mobilizing your SAP Data with Kendo UI Mobile – Wrap Up – Part 5

This is a wrap up blog post for my series on mobilizing your SAP data with Kendo UI Mobile. So far I have written 4 parts on this series. Here are the links to the 4 parts of this series:

Mobilizing your SAP Data with Kendo UI Mobile – Get the Environment Ready – Part 1

Mobilizing your SAP Data with Kendo UI Mobile – Building the Mobile App – Part 2

Mobilizing your SAP Data with Kendo UI Mobile – Implementing Partner Details Screen – Part 3

Mobilizing your SAP Data with Kendo UI Mobile – New Partner Screen – Part 4

Things achieved so far:

Here is a quick summary of what we have achieved so far with each part of the blog posts:

Part 1 – We took a look at the SAP demo system, got the credentials for the system and set up our environment to start work on Mobilizing SAP data.

Part 2 – We started out with building a mobile app using Telerik AppBuilder which is part of the Telerik Platform. We understood the project structure and created our first screen – Business Partners Listing.

Part 3 – In Part 2 we had built the listing of Business Partners. In Part 3 we went a step forward and built the Partner Details screen. When a Partner is clicked in the listing, we navigated to details screen.

Part 4 – we built a new screen to add new Business Partner to the system.

Things ahead:

I have provided you the basic structure of the mobile application so far. What you can do is to build upon the same techniques and add additional screens. For e.g. From a Partner details screen, we can navigate to his Orders. From Orders listing screen, we can then navigate to Order details. From Order details we can navigate to Order Item details screen. And in Item details screen we can list all the items in the order as a grid. I leave it up to you to try all this out.

Screen Shots:

Partners Listing

Partners Listing

Partner Details

Partner Details

Orders Listing

Orders Listing

Order Details

Order Details

Order Items Listing

Order Items Listing

Summary:

The primary goal of the 5 part blog series on “Mobilizing SAP Data with Kendo UI Mobile” was to showcase the power of Kendo UI Mobile and the ease with which you can mobilize your SAP data. One of the highlight of Kendo UI is its ability to consume and interact with OData Service endpoint out of the box. It does all the heavy lifting in terms of read, create, update and delete.

Hope this series helps you if you are trying to mobilize your SAP data. If you need further information or want to get in touch with us to help you out – feel free to reach out to me @ lohith.nagaraj@telerik.com.

Resources for Webinar “Build a Mobile Dashboard using HTML 5 and Telerik Platform”

On Jul 24 2014 we conducted yet another webinar titled “Build a Mobile Dashboard using HTML 5 and Telerik Platform”. This is part of the monthly webinars we do here in Telerik India. This blog post is a recap of the webinar with resource links and video recording of the webinar.

Kendo UI:

Kendo UI is a flagship product from Telerik which is a HTML5 based client side UI framework. It contains Kendo UI Web for web apps, Kendo UI DataViz for Data Visualization and Kendo UI Mobile for Hybrid Mobile Application Development.

KendoUI

Kendo UI

You can know more about Kendo UI here. Also the Kendo UI demos are all online and can be found here.

Video Recording:

We record all our webinars so that if there is anybody who missed attending live, they have another chance to go through the webinar. So here is the video recording of the webinar:

Q & A:

Q: how to contert telerik asp.net web application to mobile compactable?
A: If you are using Telerik ASP.NET WebForms controls it is Mobile ready. If you are developing ASP.NET MVC application, you can use Kendo UI which is HTMl5 based controls set and can run on Desktop Browser as well as Mobile Browsers.

Q: Where can we find kendo chart keywords used in JavaScript?
A: Please refer Kendo UI documentation here.

Q: Can you give me the URL to try App builder directly?
A: AppBuilder is part of our Telerik Platform. Please sign up for Telerik Platform here.

Q: What is the difference with singlepage app and a mobile app?
A: Single Page App or SPA as it is known as is just a pattern that many app developers utilize to build modern day web site/apps and Mobile Apps.

Q: How did u initiate simulator?
A: From the AppBuilder select Run > In Simulator to launch the simulator.

Q: What is the relation between Appbuilder and Kendo UI Mobile chart?
A: AppBuilder is the IDE for Hybrid Mobile App development. Kendo UI DataViz is the data visualization control set to be used in a mobile app.

Q: How we can implement offline behaviour of application using Kendo UI?
A: Kendo UI DataSource in future will provide the capability of offline caching of data. As of now you as a developer will need to take care of caching the data.

Q: Can the Kendo UI support access of Native component of os? like camera , media library etc?
A: Kendo UI is a UI control set and hence wont provide any device capability access. Where as you can use Cordova JavaScript library to access the device capability in your mobile apps.

T-Shirt Winners:

We usually pick 2 random attendees from the webinar and they receive our Telerik .NET Ninja T-Shirts. Following folks are the winners of the t-shirt for this webinar:

  • Ashok Rapaka

  • Ajithkumar Rai

Congratulations to the winners. We will contact you to get your address and ship the t-shirt.

 

Till next time – Happy Coding.

New Partner View

Mobilizing your SAP Data with Kendo UI Mobile – New Partner Screen – Part 4

This is 4th blog post in the series “Mobilizing Your SAP Data with Kendo UI”. So far we have seen how to set up the environment, create a mobile application and list business partners from the SAP Sales Order System and show a particular partners details. If you want to go through the first 3 part of this series, find the links below:

Mobilizing your SAP Data with Kendo UI Mobile – Get the Environment Ready – Part 1

Mobilizing your SAP Data with Kendo UI Mobile – Building the Mobile App – Part 2

Mobilizing your SAP Data with Kendo UI Mobile – Implementing Partner Details Screen – Part 3

In this blog post we will be creating a screen to add a new partner to the business partner’s collection. So without much further ado, let’s get on with the business.

Home View Recap:

If you have been following the series, you will know by now that our home view is a listing of the Business Partners in the Sales Order system. In the footer of this view, we had created a tab in the tab strip with an add button. By clicking this add button we will navigate to “newPartnerview.html”. Here is the code snippet of home view:

The way we navigate to new partner view is just by pointing the href attribute of the anchor to “view/newPartnerView.html”. Kendo will do the navigation to the new screen by adding the default transition that is slide.

New Partner View:

Create a new HTML file in views folder and name it “newPartnerView.html”. We will create the form as below:

Notice that we use the Partner view model as the data model for new partner view. We have placed a save button in the header on the right hand side of the navbar. It is data bound to “add” method on the partner view model. The rest of the form is self-explanatory. Here is the code snippet of add method that we have added on the partner view model:

In add method, we build a JSON object and make use of Partners view model >  partners datasource and call add on data source and tell the data source to sync the changes with the server. That’s all it is there to save a record if you use Kendo UI Data Source.

Update to Partners Data Source:

In part 2 of this series, we had created Partners view model and it had a partner’s data source. At that point we just had Read URL set up. But since we want to create a new record now, we set up Create URL on the data source. Here are the changes to the partners data source:

Notice the addition of create property to transport of Kendo UI data source. We also had to change the read property a little bit. If we have to send a create request to OData service, it is expecting a CSRF token. So, before we issue read instruction, we ask for CSRF token to be sent back to the client, and after read operation is completed, we fetch the token from the header and store it for further use. During create operation, we add the token to the header using the before send method of Kendo UI data source.

Running the App:

Now, our Create New Partner screen is complete.  Time to run the app and see the output. Here is the screenshot of the new partner creation screen:

New Partner View

New Partner View

Summary:

In this blog post we saw an entity creation scenario. We created a data entry screen for adding a new business partner to the system. And we hardly wrote any code. With Kendo UI Data Source, handling CRUD scenarios is very easy as the data source does all the heavy lifting.