DiCode

Never Stop Learning and Sharing

Create Dynamic Tree Grid using TreeGrid jQuery Plugin

by 2 Comments

Today i want to share how to Create Dynamic Tree Grid using TreeGrid jQuery Plugin. I will use Treegrid jQuery Plugin for this case.

TreeGrid jQuery plugin has some feature that meet with my requirment, this plugin is very easy to understand and the most important is compatible with bootstrap 3. Because i use Gentelella for templating.

Some feature TreeGrid jQuery Plugin is

  • Create TreeGrid from HTML table
  • Simple and flexible javascript
  • Compatible with bootstrap
  • Ability to save the state of the tree
  • Events support

Let’s start with some case. My Friend Ferri ask me to help him to create tree grid list of website admin menus. He will provide me JSON data of menus. here it is for the JSON structure:

[Read more…]

Custom DataTables Filter Enter Event

by 1 Comment

Today, i want to share about customizing one of DataTables feature. The feature that i want to change the behavior is filter function. Before we start with the code, you have to read the DataTables description on their website here.

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

You can read the all function on DataTables official website. Here, i want to change the behavior of the filter function Custom DataTables Filter Enter Event. The original filter function is based on keyup, search, input, paste, cut event, so if you whether type, cut, paste, input or search to the search box DataTables library will automatically call _fnFeatureHtmlFilter(settings) function.

The original function is look like: [Read more…]

Create Dynamic Navigation Menu using Javascript

by Leave a Comment

Today, i’ve learn how to Create Dynamic Navigation Menu using Javascript. In this post, i will focus on client side implementation therefore i use json for data format. My main idea is: i will save the menu data on database and when the user do log in, i will retrieve the menu data (based on on user role) and create the json format from these menu datas, then save it on the session.

By saving menu datas on json format and save it in session, i can optimize on fetching menu datas every loading new page.
First, we have to define the json menus data structure, so we can Create Dynamic Navigation Menu using Javascript.

in this tutorial, the menu object will have following properties: id, name, url, and parent. the parent properties will referred to the parent id. For the example, you can take a look on my dummy data below. Root menu is menu with parent = “0”, for example Parent 1 is the Root menu, and have two child named Child Parent 1.1 and Child Parent 1.2

Create Dynamic Navigation Menu using Javascript
[Read more…]

Tags

Asynchronous Request async request Bind Json Param custom channel custom jPOS packager datatables Design Pattern hibernate http http basic auth http request iso 8583 java javascript jPOS jpos channel jPOS Client jPOS database jPOS deploy directory jPOS Hibernate jpos http jpos rest jPOS Server jpos Space jquery js jsf load balancer moxy mux mux pool prettyfaces primefaces rest client Restful SAF space Specifications spring framework TCP Template Method transaction manager transaction participant tree TreeGrid

Recent Comments

Recent Posts