Kendo UI Grid

Video: Custom Date Filter Column in Kendo UI Grid (JavaScript)

In my previous post here, i talked about Kendo UI Grid & Custom Date Filter column using JavaScript. I have recorded a screen cast on the same subject. In the screen case you will be able to follow the step by step instruction to create a custom date filter column. Below you will find the screen cast recording:

Hope the video helps you if you have a similar requirement in your projects.

Till next time – Happy Coding !

Kendo UI Grid

How To: Custom Date Filter Column in Kendo UI Grid (JavaScript)

This post is one of the Customer Problem Solution kind of blog post. I will be talking about a requirement i was given and the solution to that requirement. If you had a similar requirement in any of your projects – well the solution is available in this post. So read on. Continue reading

Kendo UI Grid

Video: How to Scaffold Kendo UI Grid in ASP.NET MVC Applications

Kendo UI is one of our popular controls set when it comes to HTML5 based app development. Kendo UI is client side UI framework and you work with Kendo UI using JavaScript. But if you are coming from ASP.NET MVC background you may be familiar with the concepts of HTML helper. Helpers are nothing but a shorthand to otherwise writing lengthy HTML code. With our UI for ASP.NET MVC product we provide what we call as “Kendo UI Wrappers for ASP.NET MVC” a.k.a Kendo UI helpers in ASP.NET MVC.

Grid control or widget as we call it – is one of the most widely used widget in Kendo UI. When you install our UI for ASP.NET MVC we also install Kendo UI Scaffolder. Scaffolding is a handy productivity feature in Visual Studio where the Scaffolder generates all the boiler plate code necessary. Our Kendo UI Scaffolder can scaffold Grid code for you – without you writing a single line of code.

In the below video i have tried to capture the steps required to perform a Kendo UI Grid Scaffolding in your ASP.NET MVC applications. The video is like a Step by Step instruction for you to follow:

Hope this video gives you a jump start if you are planning to use Kendo UI Grid in your ASP.NET MVC applications.

Till next time – Happy Coding !

Video: Building Enterprise Dashboards in Minutes using ASP.NET MVC

In my previous blogs post here, i talked about our Telerik UI for ASP.NET MVC and Dashboard Project Template that we provide for Visual Studio. In this blog post i have a screen cast created which shows how to use the Dashboard Project Template. In the screen cast i go over the process of using the Dashboard Project Template in a step by step manner. Continue reading

UI for ASP.NET MVC

Creating Dashboard in Minutes using Telerik UI for ASP.NET MVC

In this blog post i will be talking about one of our products named “UI for ASP.NET MVC”. As part of the product we provide certain productivity improvement things and in this blog post i will showcase one such feature namely – Project Templates. Using Project Templates you can jump start your ASP.NET MVC project using Kendo UI. We have a specific template which helps you create Dashboard within minutes. So lets take a lap around this Dashboard Project template now. Continue reading

Kendo UI

Resources from Webinar “Coexist: AngularJS 2.0 and React with Kendo UI”

On Jun 23 2016 we conducted yet another webinar. This time we talked about Kendo UI Components for Angular JS 2.0 and React JS. This blog post is a recap of the webinar. You will find the slide deck and video recording in this blog post. If you missed attending live or had to leave in between dont worry – we have you covered. Just go through this blog post to catch up on what you missed. Continue reading

UI for ASP.NET MVC

Get Up & Running with Telerik UI for ASP.NET MVC Project Templates

As a team working on a project one of the key aspects of development is productivity. You want to get up & running with your project as fast as you can. You don’t want to spend time on some mundane things, rather you want to leapfrog your development. That’s almost every project teams #1 priority and wish. Today, in this blog post i will be talking about how our product known as “UI for ASP.NET MVC” can help you jump start your ASP.NET MVC (3 to 5) projects. Let’s get things rolling now. Continue reading

Kendo UI

Kendo UI Data Source Offline Storage + OData V2 – Cannot read data from offline storage

Kendo UI is our flagship product when it comes to HTML5 based UI. Kendo UI provides Web, Data Visualization and Mobile widgets for building HTML5 Apps/Sites. One of the cool features of Kendo UI is the support for storing data offline when using our Data Source. We introduced this offline support as part of our Q2 2014 SP1 release. With offline support the data bound Kendo UI widgets will continue to work even when the server connection is not available. With this support users can continue working with the available data till the network connectivity is resumed.

Kendo UI

Kendo UI

Offline Feature of Kendo UI Data Source:

The way Kendo UI Data Source supports offline functionality is through a property called “offlineStorage”. We give a unique string value to this property. This value for “offlineStorage” will be used by the data source to create a key in local storage and save the data there. We need to let the data source know if its online of offline. This helps the data source decide whether to ping the remote end point or read from local storage. Data Source exposes a method named “online()” and expects a Boolean property to indicate online or offline.

Here is a code snippet of how you would use the offline feature of data source:

We are setting a type property on data source to a value “odata”. This lets the data source know that it has to communicate using the OData V2 specification. Since we have set the property offlineStorage, data source will automatically store the data it receieved from server in the local storage key “allProducts”. We then let the data source know if we are online or offline by using the online() method.
At this point it’s important to understand the shape of the data that OData service returns when asked in JSON format. Following is a glimpse of the payload we get from an OData V2 GET request on any collection:

As you can see, the data is in a results array and is part of the padded “d” object. Now, Kendo UI Data Source understands all this and will be able to parse the payload and use the results array as the data. And it will save the data array to local storage also since we have provided an offlineStorage key. Note: data source will not save the entire payload to local storage. It will only store the data array found in the results property.

The Problem:

Everything is all right so far. So what is the problem you may ask? Let me explain it below:
Let’s assume the mobile app will be used by the user when he has network connection. The GetOnline() method will detect the status and return the Boolean value accordingly. So when there is a network connection, we set the online status of data source to true and it will go ahead make a request to the remote OData end point. The service will return the data in JSON format, data source will pass the payload, use the data array in the results property, and then store the data array in the local storage.

Let’s assume that the mobile app needs to be used when there is no network connection. Theoretically it should work. Why you ask – well we had told the data source to store the data offline in local storage. So whenever there is no network connection on the device and when we let the data source know that it is offline, we think that it will read data from local storage and everything should work normally. Well I thought so too. But we get the following error:
“TypeError: Unable to get property ‘results’ of undefined or null reference”

Hmm, it doesn’t work as expected. Well what is wrong then? Remember I said that the data shape of the odata GET on any collection is actually “d.results”. Well when data source sees that its offline, it will simply go ahead read data from the local storage. But the parsing logic is looking for “d.results” property on the saved data. Whereas the saved data in local storage is just a plain data array. It does not contain the padded d object and results property on d object. Hence the parser is looking for the d.results, doesn’t find it and throws up an error.

The Solution:

Kendo UI data source has a schema property exposed. Using the schema property, we can tell the parser where to look for the data in the payload. We do that by setting the data property of schema. In our case we just need to let the parser know that if it finds “d” padded object on the payload, it can then get the data from the results data array. Else just use the payload as it is because probably it’s the local storage data that was read. Just a simple if else condition to get out of this situation. Here is the code snippet:

With the above code changes, now whenever the data source in in offline mode, it will be able to read the data correctly from the local storage.

The above code is available as a demo here: http://dojo.telerik.com/@kashyapa/itUMe/2

Hope this helps anybody who has faced a similar situation.

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!

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!

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.

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.