When I was about to do product catalog -example with some fancy grid, I searched right tool for that. At first I thought that “of course AngularJS, its easy to do with that”, but when going through different tutorials, I gave up and searched even more straight-forward tool for that. Jquery datatables /UI -solution was one but it seem little bit outdated.
Then I found Telerik’s Kendo UI. It is framework making modern UI’s for modern applications. I fell instantly in love.
In this tutorial, I’m gonna show how build product catalog-ish solution with Node.js, MongoDb, Express and KendoUI. This solution is also known as MoNKeY stack, Y is for yes!
Then I found Telerik’s Kendo UI. It is framework making modern UI’s for modern applications. I fell instantly in love.
In this tutorial, I’m gonna show how build product catalog-ish solution with Node.js, MongoDb, Express and KendoUI. This solution is also known as MoNKeY stack, Y is for yes!
I’ve made this tutorial with Windows , so this can be little different from Mac / Linux / Unix -systems, but differences ain’t that significant.
Shall we start?
Step 1: Installing back-end
We use Node.js as our back-end which is very compatible this kinda exercises.
Go to Node.js-page and download Node for your operating system. Then use Command prompt to navigate to your tutorial folder for example C:\kendo.
Firstly install express, which acts as middleware in routing situations.
npm install express
Next we install our database. I prefer using MongoDb, because its clear markup and easy to use. You can have your own local database or cloud database. In my example, I use cloud database. If you want have cloud-based database, go to Mlab, where you can sign up for 500mb free database.
When you’ve registered your database, lets install Node.js native mongodb driver. You could use also Mongoose, which is very popular way to manipulate Mongo.
npm install mongodb
Lastly, install body-parser middleware. It handles information that comes from our form.
npm install body-parser
Step 2: Initializing Mongo database
Now we need our Mongo database have some information to use. Sign in to Mlab and add new collection, for example: phones. Then start adding documents with JSON -markup like this:
We define columns: Model, Display, OS (operating system), Stock, Monthly, Onetime, and then for details tab: Details, Image, Image2 and Image3.
For details, I used Lorem Ipsum generator which offered basic placeholder information.
Step 3: Configuring back-end
Now we’ve our back-end solutions installed, we can start configure our back-end to our needs. First, create new file with your text editor and save it as server.js
I use Sublime Text, which is really good, lightweight text editor for coding. Atom is also recommended. Oldschoolers use Notepad++
Then we add some variables so Node.js can understand to use them.
MONGO_COLLECTION -variable defines collection in Mongo database. I use phones, when my example is about phones.
Var app defines express -instance, which is one of the foundations in here.
Then we define express to use static dir and define body parser to understand JSON.
Next, we define our Mongodb connection. We save our mongo address and credentials to use in connectionString -variable. You can get your address from going to your Mlab -profile and from database page, you can see:
Copy the second address and fill the dbuser & dbpassword without <>.
Then we create database variable for later use.
Next step is making Mongodb connection instance, as connectionString variable stands our created address with credentials.
Lastly we define it to use traditional 8080 -port.
When we have our database connections ready, we do some error handling, which is great to have in problematic situations.
This throws error in your command prompt log where your application crashes.
Our last, but definitely not least step in server.js, is routing with Express. We make GET & POST http-calls for Node to understand fetch data from Mongo database.
Define when our application calls /phones, it calls mongodb fetch / post. Db stands our earlier created database variable. Inside collection goes our MONGO_COLLECTION -variable what we defined earlier as phones. “.find({}).toArray” command finds everything from collection and saves them for array. Next we define mongodb call go through error handler if our fetch fails and nothing is to be fetched, and when everything goes as planned, it sends ‘OK’ -HTTP status code to browser and saves data as JSON. We also define to goes forward to our index.html.
As posting new data, basics are kind of a same but different is we require form input data as ‘reg.body’ (req.body function is from body-parser) so POST-call can post right data to Mongo database.
Step 4: Creating front-end
Now when we have our server and database configurations ready, we can setup our “look & feel”.
Firstly, lets do our HTML-skeleton. Create new file. Then add basic html, head, body tags. Inside title define your application name. Then we need bootstrap and kendo CSS-files to get styling. You can copy those below get the recent ones:
<link rel=”stylesheet” href=”//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css” /> <link rel=”stylesheet” href=”//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css” /> <link rel=”stylesheet” href=”//kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.mobile.min.css” /> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
We neeed also core of Kendo, in other words Jquery and Kendo’s javascript file. Bootstrap-js is also good to have if want to add modals and more functional bootstrap stuff. We use minified version of all files to get that tiny boost for performance.
<script src=”https://kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script> <script src=”https://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Then we add couple of <div>:s to get hold of space and wrapping, and class them for example as “example” and “wrapper”. Then we initialize our grid by adding <div> with id=”grid”, so Javascript can initialize grid to that specific div. Page is also good to have some visible title, so add “Phones” inside of <h3> tag below wrapper. Lastly, save file as “index.html”
Now our basics looks like this. Still following? Good.
Now create folder named as “js” and create file inside of it named as “app.js”. Inside of that, we create our Kendo UI scripts and other Jquery functionalities.
In first row, lets make our file script functional when document is loaded, by adding “ $(function() {} “ -function.
Protip: $(function() { is short version of well-known “ $( document ).ready(function() { “ -function.
Then lets initialize our grid to be active. Create variable that holds Jquery selector which points Kendo to assign grid to right place.
var grid = $(“#grid”).kendoGrid({
#Grid is our div in index.html.
Now we want some data in our grid, because without data it would be just silly empty non-functional table. As we go on, Kendo uses JSON-markup in configuration, so we list names as configurations.
dataSource: { type: “json”, transport: { read: { url: “/Phones” }},
dataSource is Kendo’s configuration to understand how data is used. Transport defines what to do with data. Read it, post it, delete it..
So transport, inside of that ‘read’ , and url “/phones”. As we remember, we added in back-end “/phones” so when Kendo fetch data from that address, back-end kicks in and fetch from Mongo.
Now grid is still empty because it has now columns where data is shown. Lets define those then!
Below dataSource, add Columns -name. And because it consists many objects, lets make it array by adding square brackets [] after curly (moustache {} ) ones.
Our first column is phone’s model, aka Model. Column consists many attributes, but we use ‘field’ and ‘width’. In ‘field’ you define name as same as in MongoDb. So we use “Model”. You can use also Title -attribute, if you want your column having different header than MongoDb-entry.
I found that “260px” is good width for Model’s column length, so let’s use that.
I found that “260px” is good width for Model’s column length, so let’s use that.
Now lets do same as every other column there is. In Stock, Monthly and Onetime add “type: number” so Kendo handles data as numbers, not as strings.
You should have like this, remember to check commas, ending brackets etc:
Now we should test and see how program is looking/working. We can’t rely on hunches here! Go to command prompt, and to your folder, and write
node server.js
If no errors comeup, it should show information that database connection is ready and your app is running on port 8080. Splendid!
Then navigate to localhost:8080 in your browser and see results. My results:
Kinda nice grid, isn’t he/she ! I will name it.. Gary! Gary the Grid.
Step 5: Grid functionalities
Now lets give grid some neat functions so it will be more nice to use. Lets start with sorting and filter.
It’s nice to sort your data to for example know which mobile phone has biggest screen or which is the cheapest one.
Go to your app.js, and add name “Sortable” and value: “True”. That’s easy. Now it’s important that we have our Display, Stock, Monthy and Onetime columns typed as “number”, because now Kendo can sort data right and doesn’t treat numbers as text.
Live filtering is little bit complicated. Firstly, its good to have filter input so we filter our data freely.
Go to index.html and add new div above your header so our header is inside our search div (we can get header and search bar in same row). Add “form-group has-feedback” classes, so Bootstrap gives neat styling. Also give “search” -id to div so our functionality works. Then after header <input> -tag which have class named “search-query”. And then </div>
Now back to app.js, and go point where your grid bracket meets end. There we add Jquery selectors to our div and input fields.
Above image shows whole search function. With keydown, it calls function immediately when text is inputted. Lets clear any timeouts and get our data from input. And define Kendo’s own dataSource filter active after 100 milliseconds after input.
Filter input itself is simple-ish. Logic stands for do you want search both things or just ‘either or’ . In Filters, we define what fields we observe and define “it will contain our searchvalue”.
Now when you go start back node and see results, you can filter your Gary-grid effectively!
Now we learned to use Kendo UI Grid and how it works. In next part I mentor you how we can have details tab, data custom assigning (aka custom template), and paging.
Comments
Post a Comment