As discussed in the previous post I had planned to incorporate Kendo UI with the SharePoint 2013 Custom Search Results page, I am going to develop a Web Part which will use the Kendo Grid.
For those who are still wondering what this kendo UI is all about.. It really is a cool; HTML5, Javascript etc based Framework which provides several widgets for more details visit <a href="http://www.kendoui.com/">http://www.kendoui.com/</a>
INTEGRATING KENDO UI
In the previous section we made a user control now user control has both .ascx page and the code behind file. Add the reference to the kendo UI style sheets but before doing that we need to place the files in the 15hive in the Layouts folder so that these style sheets are available for our user control. Place them in the STYLES folder in the Layouts folder.
Add Script tag in the file to use kendoUI:
<link href="/_layouts/15/kendoFiles/Content/kendo/2012.2.710/kendo.common.min.css" rel="stylesheet" type="text/css"></link>
<link href="/_layouts/15/kendoFiles/Content/kendo/2012.2.710/kendo.blueopal.min.css" rel="stylesheet" type="text/css"></link>
<script src="/_layouts/15/kendoFiles/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/_layouts/15/kendoFiles/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="/_layouts/15/kendoFiles/Scripts/kendo/2012.2.710/kendo.web.min.js" type="text/javascript"></script>
<script src="/_layouts/15/kendoFiles/Scripts/kendoui-Custom.js"></script>
<script type="text/javascript">
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)')
.exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
var queryTerms = getParameterByName('k');//for the case if there is query string search request
function PerformSearch() {
queryTerms = document.getElementById('query').value;
Results.init($('#resultsDiv'));
Results.load();
}
Results = {
element: '', url: '',
init: function (element) {
Results.element = element;
Results.url = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?querytext='" + queryTerms + "'";
},
load: function () {
$.ajax({
url: Results.url,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: Results.onSuccess, error: Results.onError
});
}, onSuccess: function (data) {
var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
var dSource = new Array();
var html = "<table>";
for (var i = 0; i < results.length; i++) {
dSource[i] = new Object();
dSource[i].Title = results[i].Cells.results[3].Value;
dSource[i].Path = results[i].Cells.results[6].Value;
}
$("#products").kendoGrid({
dataSource: dSource
});
},
onError: function (err) { alert(JSON.stringify(err)); }
}
</script>
In this JavaScript snippet we are creating a KendoUI Grid in the div that we have allocated for it in the .ascx file(as shown below). We will use the OData Services exposed by the SharePoint 2013 to call the search service and use the data returned by the service to create a data source for our KendoGrid control. And this is how we will show the results.
Now the Kendo UI and the Custom Search is all setup, enter any search query on our visual webpart and you will get the result, currently it is showing only two search result fields which we will alter using the column model of KendoGrid.
With the help of the latest REST based services provided by the SharePoint using kendo Grid or any other ajax supported grid has become real easy.
I will share further posts related to SharePoint 2013 development or ASP.Net which could be of any help to the developers who are seeking help in this regard.
