Month: October 2014

Autumn Technology Webinars with Telerik India

Posted by

0

After all the festivities of Diwali, the colours have spilled over to the trees. As monsoon gives way to the autumn, Telerik India is hosting technology webinars on web and mobile technologies.

Register for these great online learning sessions in the month of Oct & Nov for free by clicking on the links below:

Thursday,
Oct 30 ’14		 3:00 – 4:00 PM Front End Applications Using One Stop JavaScript Library from Telerik
Thursday,
Nov 13 ’14		 3:00 – 4:00 PM Mobilizing your Sharepoint Data
Thursday,
Dec 18 ’14		 3:00 – 4:00 PM Testing Mobile Applications with Telerik Platform (Rescheduled)

The Ninja T-Shirts are still coming. Top participants at the webinars will receive these must have T-Shirts (after all who doesn’t want to be a Ninja).

Wonderful people of Telerik, we would be participating in the following events and would like to welcome you to say hello if you are there:

1. Microsoft TechEd India, Bangalore

2. Hyderabad Software Testing Conference (HSTC), Hyderabad

Advertisement
Kendo UI Grid with External Search Box

How To: External Search Box For Kendo UI Grid

Posted by

6

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:

<div>
<div>
Search By Customer/Company/Contact Name:
<input class=k-textbox type=text id="txtSearchString" placeholder="enter search text..." />
<button id="btnSearch">Search</button>
</div>
<br><br>
<div id="kGrid"></div>
</div>
view raw juigridsearchboxui hosted with ❤ by GitHub

 

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:

$(document).ready(onReady);
function onReady()
{
$("#btnSearch").kendoButton({
click:onSearch
})
$("#kGrid").kendoGrid({
dataSource:{
type:"odata",
transport:{
read:"http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers&quot;
},
schema:{
data:function(data){
return data.d.results
},
total:function(data){
return data.d.__count
},
},
serverPaging:true,
serverFiltering:true,
pageSize:20
},
height:550,
pageable:true,
columns:[
'CustomerID',
'CompanyName',
'ContactName',
'ContactTitle',
'Address',
'City',
'PostalCode',
'Country'
]
})
}
view raw documentgetreay hosted with ❤ by GitHub

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:

function onSearch()
{
var q = $("#txtSearchString").val();
var grid = $("#kGrid").data("kendoGrid");
grid.dataSource.query({
page:1,
pageSize:20,
filter:{
logic:"or",
filters:[
{field:"CustomerID", operator:"contains",value:q},
{field:"CompanyName", operator:"contains",value:q},
{field:"ContactName", operator:"contains",value:q}
]
}
});
}
view raw searchfilters hosted with ❤ by GitHub

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”

Posted by

1

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