Kendo Grid Integration Using jQuery

Kendo Grid Integration Using jQuery


Introduction

In this article, we will learn about the very powerful Kendo Grid by Telerik that provides rich inbuilt features with less coding. We integrate the kendo grid using jQuery. Kendo can be used with any modern technology, such as  - ASP.ET WebForm, ASP.NET MVC, .NET Core MVC, Node.js, PHP etc.

Prerequisites
  1. Visual Studio Code or any Text Editor
  2. Web Service or Web API
For this demo, I have used the web service created and hosted by Telerik. Source code for this web service is open source that you can review on GitHub as well.

NoteKendo Grid is a licensed version.

DescriptionAs we know, each and every application requires any tabular format to display small or large data with basic functionality, like Grid with Sorting, Filtering, Paging etc.

Here, the Kendo Grid provides the above functionality along with other advanced and powerful inbuilt features as mentioned below.
  1. Column Reordering
  2. Column Resizing
  3. Excel-Like filter menu which contains(Start With, End With, Contains, Not Contains. Equal to, Not equal to etc filter action)
  4. Hide or show column
  5. Keyboard navigation
  6. Row grouping
  7. Paging with Server and client-side 
  8. Row or cell selection and Copy selected rows or cells in the clipboard with (Ctrl + C)
  9. Change detection in Cell Edit mode or batch edit mode
  10. Persistent selection of rows while sorting and filtering
  11. Export data to excel, pdf etc
  12. Inbuilt CRUD Operation with different edit mode like inline, popup, in cell etc
  13. Inbuilt themes or skin
  14. Support multiple form control e.g. DateTime, Textbox, Numeric, Checkbox, Dropdown etc
  15. Built-in validation as well.
  16. Frozen or lock column
CRUD operation and other advanced features will be explained in the next article. I have tried my best to cover as many as possible features   in this article.

Step 1 Add Kendo UI CSS and JS along with jQuery UI and Add selector in HTML page so we can bind the grid to that element.

Step 2 Prepare, configure, and initialize Kendo grid feature to DOM element (#grid). Take a look,
The above script needs to be wrapped in script tag.

As per the above JavaScript code, you can easily configure most of the features with less code by just setting a specific property to it. I have tried to add possible or required comments to the above code snippet to make it more understandable.

Once you add the above code, it will show an output like the below screenshot which contains toolbar options, Row grouping on Country and City Column with Sorting, interactive Paging and Excel-like filter (three dots in column header).

You can see implemented feature of Kendo grid.


Reference links
  • https://demos.telerik.com/kendo-ui/grid/index
  • https://demos.telerik.com/kendo-ui/grid/column-reordering 
Conclusion

In this article, we have learned how to integrate Kendo Grid using jQuery UI with an in-built feature with easy configuration.


I hope you like this article.

Web scrapping using cheerio js in nodejs

Learn Web scrapping using cheerio js in node js

Introduction

In this article, we learn how to do web scraping using cheerio js in node js server side.

Description

cheerio.js is the Fast, flexible, and lean implementation of core jQuery designed specifically for the server.
It means we can fetch/request any page from a server-side and retrieve element using valid CSS selectors same way we can use jQuery.

Prerequisite
  1. Node or npm must be installed in your machine
  2. Install node-fetch and cheerio in node project
How to setup and Installation of web scrapping project

  1. npm init (Create node application)
  2. npm install node-fetch cheerio --save
To usage of a cheerio, js see below cheerio-sample.js file 



As per the above code first, of all load cheerio module and then use jquery like selector to get specific
element.

Using cheerio. js, I have created c-sharp corner Blogs, Articles, News statistics as per sites and also generated c-sharp corner statics dashboard.

I have attached code snippet for web scraping of c-sharp corner statistics using cheerio js, node-fetch.

See generated c-sharp corner visualization statistics using web scrapping.


Github code: https://github.com/VisualizationHub/visualizationhub.github.io
Visualization Dashboard: https://visualizationhub.github.io/csharpcorner-dashboard.htm

Conclusion


In this article, we have learned about cheerio js for web scrapping and also demo app created for generating statistics


Display code snippet in blogger

Introduction

In this article, we learn about an easy way to Display or add code snippet/Sample

in Blogger article and highlight different types of language code snippet 

using GitHub code or gist code.

Description

To display code in an article or to highlight code in blogger or in any other
blogging platform you can use Github Gist, I found this way is very easy which 

doesn't depend on any external highlighting javascript library or CSS library.

Step 1 
Here you can create any public gist for code snippet for javascript (.js),
Csharp(.cs), shell script (.sh) etc So it can be loaded in an article.

Once you saved gist file one link or Embed option is displayed on a gist as per
below screenshot.



Step 2 Copy Embed Link or gist link and paste that embed code link in Article's in HTML mode
not in compose mode. I have attached a screenshot for blogger article as below. 



Step 3  Once you have added embed script in blogger article you can see a preview of code

the snippet which rendered as below screenshot.




You can see sample code snippet how it can be rendered as below from gist embed script.

Conclusion

In this article, we have learned about how to highlight or add code snippet in a blog article.

How To Create And Publish npm Package

How To Create And Publish npm Package

Introduction
In this article, we will learn about easy steps for creating and publishing your javascript or node js utility package to npm package repository.

How did I get the idea for creating and publishing of npm packages?
Actually, I was working on creating a dashboard with charts. As most library charts have their own convention for passing data to generate charts e.g. tui-chartshighcharts etc. while preparing data I had to rename some keys as per the required convention.
 
I have to rename multiple keys from an array of an object. In C# or Dot Net, you have probably heard about the term "DTO - Data Transfer Object" or Automapper which provides this functionality in which it converts one class to another class type with required fields.
 
Here, I have searched for javascript and JSON utility library using underscore js and lodash as well, but I didn't find any solution,  so I created a utility function and published it on npm. So I can utilize this in my different projects and as it is on npm it can be useful to other developers as well.
 
Prerequisite
  • Nodejs and npm must be installed on System
  • A user must have a GitHub account on which he can store source code.
  • A user must have an account on npmjs
Step 1 - Create a node module using npm init command
 
If you are using Windows system then you can open a command prompt with appropriate rights, or if you are a Linux user then you can open a terminal and run npm init command, 
  1. npm init  
When you hit the above command it will prompt some required and optional information regarding packages as per the below screenshot.

NoteMake sure your package name is unique in npm.js and it is available on npm.
 
 
 
Using npm init command one "package.json file" is created in a project folder.

Take a look at my package.json file for reference purposes,
  1. {  
  2.     "name""dto-utils",  
  3.     "version""0.0.1",  
  4.     "description""Inspired from Dot Net Data Transfer Object Concept, Utility contains method which rename keys in existing object using plain Javascript code.",  
  5.     "main""index.js",  
  6.     "scripts": {  
  7.         "test""echo \"Error: no test specified\" && exit 1"  
  8.     },  
  9.     "keywords": ["dto""rename keys""json""utility""utils""transform object"],  
  10.     "author""anomepani",  
  11.     "license""ISC"  
Step 2 - Open current directory in any text editor and add entry point file index.js.
  
I am using Visual Studio Code as the text editor.  To open a project or current project directory in vs code, type the below command or you can just right click on a folder and open in your favorite IDE or Text Editor.
  1. code .  
Now create an index.js file which is an entry for any npm package and add your utility method or code to an index.js file.

Take a look at my utility method or index.js file. 
  1. function DTO() {  
  2.     var dto = {};  
  3.     var isAllowKeyOverWrite = true;  
  4.     /** 
  5.      * function accept array of object and based on new key it update returning array of object with updated keys 
  6.      * @param {*} collection   Array of object 
  7.      * @param {*}   newKeyPair New key pair for old and new key  
  8.      * @param {*} overwrite Allow overwrite existing key or not 
  9.      */  
  10.     dto.mapTo = function (collection, newKeyPair, overwrite) {  
  11.         //TODO  Early exit check for invalid user input  
  12.         isAllowKeyOverWrite = overwrite !== undefined ? overwrite : isAllowKeyOverWrite;  
  13.         return collection.map(function (record) {  
  14.             // Clone new object to prevent modification of source object  
  15.             var item = Object.assign({}, record);  
  16.             for (var key in item) {  
  17.                 // Restrict key as undefined while dynamic rename/inject new key in object  
  18.                 // Restrict overwrite for existing key.  
  19.   
  20.                 if (newKeyPair[key]) {  
  21.   
  22.                     var isKeyExist = newKeyPair[key] in item;  
  23.                     if (!isKeyExist) {  
  24.                         // If new key is not exist then not need to check isAllowKeyOverWrite flag  
  25.                         //Check new key is already exist or not  
  26.                         item[newKeyPair[key]] = item[key];  
  27.                         //itm["" + newKeyPair[key]] = itm[key];  
  28.   
  29.                         //Once you injected key delete old key from object.  
  30.                         delete item[key];  
  31.                     } else if (isKeyExist && isAllowKeyOverWrite) {  
  32.   
  33.                         // If new key is exist ,also check isAllowKeyOverWrite flag  
  34.                         item[newKeyPair[key]] = item[key];  
  35.                         //TODO Need to verify and modify below code if required.  
  36.                         delete item[key];  
  37.                     }  
  38.                 }  
  39.             }  
  40.             // Deletion of old key code moved in above for loop  
  41.             // if (isKeyOverWrite) {  
  42.             //     for (var oldKey in newKeyPair) {  
  43.   
  44.             //         delete itm["" + oldKey];  
  45.             //     }  
  46.             // }  
  47.             return item;  
  48.         });  
  49.     };  
  50.     return dto;  
  51. }  
  52. module.exports = DTO();  
Step 3 - Time to create README.md file for project and check into github.
 
You can create a README.MD file on GitHub directory by using "Create new file" button as per screenshot and update content to it as well.
 
As per the screenshot I have created a readme file for my project and also checked in to GitHub repository.

 
 
Before publishing a package to NPM it's required to commit and push your local changes on GitHub.
 
Reference link
  • https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
  • https://gist.github.com/mindplace/b4b094157d7a3be6afd2c96370d39fad
  • https://gist.github.com/c0ldlimit/4089101
 
Step 4 - As your package or utility is ready it's now time to publish the package.
 
NoteFor publishing package, package name should be available you can test by https://npmjs.com/package/<package>.
 
Type the below command in your terminal or in a command prompt at project directory. Once you run the below command it prompts for username, password and email address as per the below screenshot.
  1. npm adduser  
 
 
Once you successfully login into npm.js you can type the below command for a publishing package.
  1. npm publish  
 
That's it. Your package is now published at npmjs. 
  • Github repo link: https://github.com/anomepani/dto-utils 
  • Npm js package link: https://www.npmjs.com/package/dto-utils 
Hope you liked the article.

Conclusion
In this article, we have learned about how to create and publish your npm package with easy steps.

Dynamic Query in LINQ using Predicate Builder

Introduction This tutorial explains how to create a dynamic query using LINQ, Using Predicate Builder  LINQ to SQL dynamic query an...

Learn More