Added Kendo Grid for the Developers Focused Examples articles

_assets/javascripts/app.js

@@ -149,11 +149,271 @@ $(function(){
     });
 });
 
-$(function(){
-    $('#toYear').text((new Date).getFullYear());
+/* START Developer Focused Examples Kendo Grid implementation */
+
+function strEndsWith(str, suffix) {
+    return str.match(suffix+"$")==suffix;
+}
+
+function strStartsWith(str, prefix) {
+    return str.indexOf(prefix) === 0;
+}
+
+function prepareCode(url, codeString){
+	var fileExtenstion = getFileExtension(url);
+	var langName = "";
+
+	if (fileExtenstion =="xml")
+	{			
+		langName = "XML";
+		if (strEndsWith(url, 'xaml'))
+		{
+			langName = "XAML";
+		}			
+	}	
+	else if (fileExtenstion == "cs")
+	{
+		langName = "C#";
+	}
+	document.getElementById('heading').innerHTML = '<strong>' +langName+ '</strong>';
+	codeString = escapeXamlCode(codeString);
+
+	var prettyCode = prettyPrintOne(codeString, fileExtenstion);
+	return prettyCode;
+}
+
+function escapeXamlCode(xamlCode){
+	var converted = xamlCode.replace(/</g, "&lt;");
+	var converted2 = converted.replace(/>/g, "&gt;");
+	return converted2;
+}
+
+function getFileExtension(fileName){
+	var ext = fileName.split('.').pop();
+	if (ext =="xaml" || ext == "config" || ext == "csproj"){
+		ext = "xml"
+	}
+	return ext;
+}
+
+function msieversion(){
+	var ua = window.navigator.userAgent;
+	var msie = ua.indexOf ( "MSIE " );
+
+	if ( msie > 0 )      // If Internet Explorer, return version number
+	 return parseInt(ua.substring (msie+5, ua.indexOf (".", msie )));
+	else                 // If another browser, return 0
+	 return 0;
+}
+
+function getCodeInJsonP(theUrl){
+	 $.ajax({
+		url: theUrl,
+		dataType: 'jsonp',
+		success: function (results) {
+
+			if (results.data.message && strStartsWith(results.data.message, "API rate"))
+			{
+				document.getElementById('codeBlock').innerHTML = "GitHub API Rate limit hit. Please use other browsers like Chrome or Firefox."
+			}
+
+			// Create Base64 Object
+			var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}
+
+			var content = results.data.content;
+			content = Base64.decode(content);                
+
+			document.getElementById('codeBlock').innerHTML = prepareCode(theUrl, content);
+		}
+ }); 
+}	
+function convertApiLinkToCDNLink(url, fileName){
+	 var contentsIndex = url.indexOf('contents');
+	 var rootDir = url.substring(contentsIndex + 9); 
+
+	 return "https://cdn.rawgit.com/telerik/xaml-sdk/master/" + rootDir + fileName;
+}	
+
+function getCodeInPlainText(theURL, fileName){
+	 var cdnUrl = convertApiLinkToCDNLink(theURL, fileName);
+	 $.ajax({
+		url: cdnUrl,
+		dataType: 'text',
+		success: function (response) {   
+			document.getElementById('codeBlock').innerHTML = prepareCode(cdnUrl, response);
+		}
+	 }); 
+}
+
+function setDescription(readmeDiv, description){
+	var htmlStart ="<html><head></head><body><b><u>Description:</u></b><p>"
+	var htmnEnd = "</p></body></html>";
+	readmeDiv.html(htmlStart + description + htmnEnd);
+}
+
+function getReadMeFileName(readmePath){    
+	return readmePath.split('\\').pop();
+}
+
+function getFileName(fullName){
+	 var splitPath = fullName.split('\\');	
+	 if (splitPath){
+		 return splitPath[splitPath.length-1];
+	 }
+	return fullName;
+}
+
+function detailInit(e) {
+	var detailRow = e.detailRow;  
+
+	 detailRow.find(".detailsDIV").kendoGrid({
+
+		dataSource: e.data.ExampleInfo.ExampleFileNames,   
+
+		columns: [{ title: "Files",	   
+				  template: function(dataItem) {
+						return getFileName(dataItem)
+				  }}],
+
+		selectable: "row",
+
+		change: function() {							
+		   var index = this.select().index();
+		   var dataItem = this.dataSource.view()[index];
+
+			if (msieversion() > 0){
+				getCodeInJsonP(e.data.GitHubPath + dataItem);
+			}
+			else{
+				getCodeInPlainText(e.data.GitHubPath, dataItem);
+			}		
+		},                   
+	});   
+	setDescription(e.detailRow.find(".readmeDiv"), e.data.Description);		
+
+	var innerGrid = $(".detailsDIV").data("kendoGrid");
+	if (innerGrid){
+	  innerGrid.select($('.detailsDIV tbody>tr:first'));
+	}					
+}
+
+function getGitHubFolderUrl(exampleInfo){
+	var masterIndex = exampleInfo.GitHubPath.indexOf('contents');
+	var rootDir = exampleInfo.GitHubPath.substring(masterIndex + 9);  
+	var dirName = exampleInfo.ExampleInfo.DirectoryName;
+
+	var result ="<a href='https://github.com/telerik/xaml-sdk/tree/master/" + rootDir +"/' target='_blank'>" +dirName+ "</a>";
+	return result;
+}
+
+$(function(){	
+	createKendoGrid("#kendoDiv", "sdk.json");	
 });
 
-/* START Feedback Form logic */ 
+function createKendoGrid(containerId, dataSourceUrl) {
+	var kendoDiv = $(containerId);
+	if (kendoDiv.length == 0) { return; }
+
+	kendoDiv.kendoGrid({  
+		toolbar: kendo.template($("#toolBarTemplate").html()),
+		height: 450,
+		columns: [{
+			field: "Name",
+			width: 300,
+			template: function(dataItem) {
+			    return getGitHubFolderUrl(dataItem)
+			},
+	    }, { 
+			field: "Description"
+		}], 
+		dataSource: {
+		   transport: {
+				read: {
+					url: dataSourceUrl,
+					dataType: "json"
+				}
+			}
+		},
+		detailTemplate: kendo.template($("#template").html()),
+		detailInit: detailInit,
+		selectable: "row",
+		change: function (e) {
+			var row = this.select();
+			if (row != null) {
+				if (row.next(".k-detail-row").is(":visible")) {
+					e.sender.collapseRow(row);
+				} else {
+					e.sender.expandRow(row);
+				}
+			}
+		},
+	});
+
+	var grid = kendoDiv.data("kendoGrid");
+	if (grid){
+		var styleSelector = containerId + " tbody>tr:first";
+		grid.one("dataBound", function(e) {
+			e.sender.expandRow($(styleSelector));
+		});
+	}	
+}
+
+function onUserInput() {
+      var input = document.getElementById("searchBox").value;
+      var grid = $("#kendoDiv").data("kendoGrid");
+       grid.dataSource.filter({ 
+		value: input,
+		field: "KeyWords",
+		operator: function(field, value){
+			if (value == ''){
+				return true;
+			}
+			if (field){
+				var status = true;
+				var splittedSearchKeys = value.toLowerCase().split(/[ ,]+/);
+				for (var i = 0, length = splittedSearchKeys.length; i < length; i++) { 
+					if (field.toLowerCase().indexOf(splittedSearchKeys[i]) < 0) {
+						status = false;
+						break;
+					}
+				}
+				return status;
+			}
+			return false;
+		} 
+	});
+}
+
+function onUserInputSL() {
+	var input = document.getElementById("searchBox").value;
+	var grid = $("#kendoDivSL").data("kendoGrid");
+	grid.dataSource.filter({ 
+	value: input,
+	field: "KeyWords",
+	operator: function(field, value){
+		if (value == ''){
+			return true;
+		}
+		if (field){
+			var status = true;
+			var splittedSearchKeys = value.toLowerCase().split(/[ ,]+/);
+			for (var i = 0, length = splittedSearchKeys.length; i < length; i++) { 
+				if (field.toLowerCase().indexOf(splittedSearchKeys[i]) < 0){
+					status = false;
+					break;
+			    }
+			}
+			return status;
+		 }
+		 return false;
+		} 
+	});
+}
+
+/* END Developer Focused Examples Kendo Grid implementation */
+
+/* START Feedback Form implementation */
+
 $(function(){	
 	var cookieName = window.location.origin + window.location.pathname;
 	var cookie = getCookieByName(cookieName);
@@ -178,5 +438,6 @@ $(function(){
 function getCookieByName(name) {
 	var match = document.cookie.match(new RegExp(name + '=([^;]+)'));
 	if (match) return match[1];
-}  
-/* END Feedback Form logic */
+}
+
+/* END Feedback Form implementation */

_layouts/index.html

@@ -10,14 +10,14 @@
         <link href="{{site.baseurl}}/favicon.ico?Version=2016" rel="shortcut icon" />
 
         {% if page.description %}<meta name="description" content="{{page.description}}">{% endif %}
-        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
+         <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" />
         {% stylesheet styles %}
 		{% stylesheet platforms_styles %}
         {% stylesheet theme %}
         {% stylesheet branding %}
         {% stylesheet highlight %}
-        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
-        <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.web.min.js"></script>
+        <script src="http://code.jquery.com/jquery-1.12.3.js"></script>
+        <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.web.min.js"></script>
         {% javascript prettify %}
         {% javascript app %}
 		{% javascript prettify %}

_plugins/kendo_grid_generator.rb

@@ -0,0 +1,29 @@
+module Reading
+  class KendoGridGeneraotr < Jekyll::Generator
+		def generate(site)	
+			@site = site
+			site.pages.each do |p|			
+				createKendoGridSection(p, p.content)
+			end
+		end
+
+		def createKendoGridSection(page, content)
+			kendoGridKey = /``kendogrid/
+			wpfIndex = content.index(kendoGridKey)
+
+			htmlWPF = "<script type='text/x-kendo-template' id='template'>
+					<div id='innerDiv'><div class='detailsDIV'></div><div class='readmeDiv' style='display:inline-block;'></div></div>
+				</script><script type='text/x-kendo-template' id='toolBarTemplate'><div class='toolbar'><label class='category-label' for='category'>Search Examples by Keywords:</label><input type='text' id='searchBox' onInput='onUserInput()'/></div></script><div><div class='kendoDiv' id='kendoDiv' style='float:left;'></div>
+				<h4 id='heading'></h4><pre><code id='codeBlock'></code></pre></div>"
+
+			if (wpfIndex)
+				content[wpfIndex..wpfIndex + 11] = htmlWPF
+			end	
+
+		end
+
+		def encode_liquid(content)
+		  content = content.gsub("{{", "{{ '{{' }}")
+		end
+	end
+end

libraries/radpdfprocessing/sdk-examples.md

@@ -5,28 +5,12 @@ description: Developer Focused Examples
 slug: radpdfprocessing-sdk-examples
 tags: sdk,examples
 published: True
-position: 2
+position: 3
 ---
 
-# SDK Examples
+# Developer Focused Examples
 
-
-
-The [Telerik XAML SDK repository](https://github.com/telerik/xaml-sdk/tree/master/) provides additional demos for the document processing libraries. The examples demonstrate many specific user case scenarios, that might be really helpful. In this article you can find the complete list of all SDK examples for __RadPdfProcessing__.
-
+The [Telerik XAML SDK repository](https://github.com/telerik/xaml-sdk/tree/master/) provides additional demos for most of the Telerik UI for {% if site.site_name == 'WPF' %}WPF{% endif %}{% if site.site_name == 'Silverlight' %}Silverlight{% endif %} controls. The examples demonstrate many specific user case scenarios, that might be really helpful. In this article you can find the complete list of all SDK examples for __RadPdfProcessing__.
 
 ## List of all RadPdfProcessing SDK examples:
-
-* [__Generate document__](https://github.com/telerik/xaml-sdk/tree/master/PdfProcessing/GenerateDocument): This project demonstrates how to use RadPdfProcessing to create a PDF document.
-
-
-* [__Pdf viewer integration__](https://github.com/telerik/xaml-sdk/tree/master/PdfProcessing/PdfViewerIntegration): This project demonstrates how to integrate RadPdfProcessing with [RadPdfViewer for WPF](http://docs.telerik.com/devtools/wpf/controls/radpdfviewer/overview.html).
-
-* [__Create document with images__](https://github.com/telerik/xaml-sdk/tree/master/PdfProcessing/CreateDocumentWithImages): This example demonstrates how to create RadFixedDocument containing images and export it with different ImageQuality. In CreateDocumentContent() method you can see 3 different ways of inserting images allowing you to control the exported image quality and size:
-	* The first approach inserts the images by simply passing the image file stream in ImageSource constructor. This way the images will be exported with different image quality depending on PdfFormatProvider.ExportSettings. When the ImageQuality is set to High then PdfProcessing automatically detects if the image is JPEG or JPEG2000 and the image is inserted in the PDF file as it is which guarantees fast export with maximum image quality.
-
-	* The second approach inserts the images by passing image file stream and ImageQuality enumeration value in the ImageSource's constructor. This way the images will be always exported with the specified image quality ignoring PdfFormatProvider.ExportSettings.
-
-	* The third approach inserts a black and white image using EncodedImageData class. This allows you to achieve maximum lossless compression by exporting the image data with BitsPerComponent equal to 1 and FlateDecode filter. As the encoded image data is exported as it is, the PdfFormatProvider.ExportSettings.ImageQuality value is ignored in this case as well.
-            
-* [__Export UI Element__](https://github.com/telerik/xaml-sdk/tree/master/PdfProcessing/ExportUIElement): In this sample is demonstrated how you can use the RadPdfProcessing library to export UI elements to PDF. The example uses the [UIElement class](https://msdn.microsoft.com/en-us/library/system.windows.uielement(v=vs.110).aspx), which is specific for the WPF platform. 
+``kendogrid

libraries/radpdfprocessing/sdk.json

@@ -0,0 +1,4 @@
+[{"Name":"Create Document With Images","ExampleInfo":{"Name":"Create Document With Images","ProjectPath":"C:\\Work\\WPF_Scrum\\Current\\SDK\\Examples\\PdfProcessing\\CreateDocumentWithImages\\CreateDocumentWithImages_WPF.csproj","ReadmePath":"C:\\Work\\WPF_Scrum\\Current\\SDK\\Examples\\PdfProcessing\\CreateDocumentWithImages\\Readme.md","DirectoryName":"CreateDocumentWithImages","ExampleFileNames":["CreateDocumentWithImages_WPF.csproj","App.xaml","App.xaml.cs","MainPage.xaml","MainPage.xaml.cs","MainViewModel.cs","MainWindow.xaml","MainWindow.xaml.cs","Styles.xaml","Resources\\GRAYSCALE.jp2","Resources\\rgb.jp2"]},"GitHubPath":"https://api.github.com/repos/telerik/xaml-sdk/contents/PdfProcessing/CreateDocumentWithImages/","Description":"This example demonstrates how to create RadFixedDocument containing images and export it with different ImageQuality. In CreateDocumentContent() method you can see 3 different ways of inserting images allowing you to control the exported image quality and size:\r\n - The first approach inserts the images by simply passing the image file stream in ImageSource constructor. This way the images will be exported with different image quality depending on PdfFormatProvider.ExportSettings. When the ImageQuality is set to High then PdfProcessing automatically detects if the image is JPEG or JPEG2000 and the image is inserted in the PDF file as it is which guarantees fast export with maximum image quality.\r\n - The second approach inserts the images by passing image file stream and ImageQuality enumeration value in the ImageSource's constructor. This way the images will be always exported with the specified image quality ignoring PdfFormatProvider.ExportSettings.\r\n - The third approach inserts black and white image using EncodedImageData class. This allows you to achieve maximum lossless compression by exporting the image data with BitsPerComponent equal to 1 and FlateDecode filter. As the encoded image data is exported as it is, the PdfFormatProvider.ExportSettings.ImageQuality value is ignored in this case as well.","KeyWords":"Create Document With Images,  create,scratch,prepare,data,imagesource,image,quality,insert,save,export"},
+{"Name":"Export UI Element","ExampleInfo":{"Name":"Export UI Element","ProjectPath":"C:\\Work\\WPF_Scrum\\Current\\SDK\\Examples\\PdfProcessing\\ExportUIElement\\ExportUIElement_WPF.csproj","ReadmePath":"C:\\Work\\WPF_Scrum\\Current\\SDK\\Examples\\PdfProcessing\\ExportUIElement\\Readme.md","DirectoryName":"ExportUIElement","ExampleFileNames":["ExportUIElement_WPF.csproj","App.xaml","App.xaml.cs","Example.xaml","Example.xaml.cs","MainWindow.xaml","MainWindow.xaml.cs","Readme.md","Models\\PlotInfo.cs","PdfExport\\ExportHelper.cs","PdfExport\\PdfRenderer.cs","PdfExport\\ConcreteRenderers\\BorderRenderer.cs","PdfExport\\ConcreteRenderers\\EllipseRenderer.cs","PdfExport\\ConcreteRenderers\\FrameworkElementRenderer.cs","PdfExport\\ConcreteRenderers\\ImageRenderer.cs","PdfExport\\ConcreteRenderers\\LineRenderer.cs","PdfExport\\ConcreteRenderers\\PanelRenderer.cs","PdfExport\\ConcreteRenderers\\RectangleRenderer.cs","PdfExport\\ConcreteRenderers\\ShapeRenderer.cs","PdfExport\\ConcreteRenderers\\TextBlockRenderer.cs","PdfExport\\ConcreteRenderers\\UIElementRendererBase.cs","PdfExport\\Miscellaneous\\CompositeDisposableObject.cs","PdfExport\\Miscellaneous\\DisposableOpacity.cs","PdfExport\\Miscellaneous\\MathHelper.cs","PdfExport\\Miscellaneous\\PdfColorHelper.cs","PdfExport\\Miscellaneous\\PdfGeometryHelper.cs","PdfExport\\Miscellaneous\\PdfRenderContext.cs","ViewModels\\MainViewModel.cs"]},"GitHubPath":"https://api.github.com/repos/telerik/xaml-sdk/contents/PdfProcessing/ExportUIElement/","Description":"In this sample we demonstrate how you can use the Telerik Documents library to export UI elements to pdf format.","KeyWords":"Export UI Element,  xaml,pdf"},
+{"Name":"Generate Document","ExampleInfo":{"Name":"Generate Document","ProjectPath":"C:\\Work\\WPF_Scrum\\Current\\SDK\\Examples\\PdfProcessing\\GenerateDocument\\GenerateDocument_WPF.csproj","ReadmePath":"C:\\Work\\WPF_Scrum\\Current\\SDK\\Examples\\PdfProcessing\\GenerateDocument\\readme.md","DirectoryName":"GenerateDocument","ExampleFileNames":["GenerateDocument_WPF.csproj","App.config","App.xaml","App.xaml.cs","DelegateCommand.cs","ExampleViewModel_WPF.cs","FileHelper.cs","MainWindow.xaml","MainWindow.xaml.cs","SampleData\\documentWpf.PNG"]},"GitHubPath":"https://api.github.com/repos/telerik/xaml-sdk/contents/PdfProcessing/GenerateDocument/","Description":"This project demonstrates how to use RadPdfProcessing to create a PDF document","KeyWords":"Generate Document,  create,scratch,prepare,data"},
+{"Name":"Pdf Viewer Integration","ExampleInfo":{"Name":"Pdf Viewer Integration","ProjectPath":"C:\\Work\\WPF_Scrum\\Current\\SDK\\Examples\\PdfProcessing\\PdfViewerIntegration\\PdfViewerIntegration_WPF.csproj","ReadmePath":"C:\\Work\\WPF_Scrum\\Current\\SDK\\Examples\\PdfProcessing\\PdfViewerIntegration\\readme.md","DirectoryName":"PdfViewerIntegration","ExampleFileNames":["PdfViewerIntegration_WPF.csproj","App.config","App.xaml","App.xaml.cs","ExampleViewModel.cs","MainWindow.xaml","MainWindow.xaml.cs"]},"GitHubPath":"https://api.github.com/repos/telerik/xaml-sdk/contents/PdfProcessing/PdfViewerIntegration/","Description":"This project demonstrates how to integrate RadPdfProcessing with RadPdfViewer","KeyWords":"Pdf Viewer Integration,  show,preview,combine,combination"}]