Posted by & filed under Technical Tips.

[How to integrate KoolGrid with Vue.js SPA environment]

This tutorial is about how to integrate KoolGrid with Vue.js SPA environment. To run KoolGrid in a Vue.js SPA environment, you need to first copy the KoolGrid library and license file into the appropriate directory. In this tutorial, we are going to copy the files into “/koolgrid” (KoolGrid JavaScript files and the license file) and “/static” (Asset files and Kool.css).



In this tutorial, we put all the JavaScript library files contained in the KoolGrid product into the /koolgrid/JS directory, and you can see a file called CreateGrid.js that is not in the product, but we will explain it later. The entire Assets directory included in the product is placed in the /static directory. The /static directory is the default directory for accessing image or icon files in the Vue.js SPA environment, the configuration of which can be found in /config/index.js. The code shown below is the source code of  the KoolGrid.vue component consisting of two sections: <template> and <script>


In the <template> section of the KoolGrid.vue component, a div where the grid will be created and a button that will create the grid are defined. When you click the “Create Grid” button, the handler function defined in methods in the <script> section is executed to start the grid creation process. If you want the grid to be created as soon as the KoolGrid.vue component is loaded, you can execute the statement that starts the grid creation process (KoolGrid.create()) in mounted:


The four require statements executed in the <script> section are for running the KoolGrid JavaScript library and reading the license variable in the CommonJS environment. The one thing you have to be aware is that in KoolGridLicense.js, which has a statement to store the license value in a variable, the variable must be declared without the var keyword:


Now, finally, we will explain the CreateGrid.js file.  In the CreateGrid.js file, the functions that set the data (gridApp.setData()) and layout (gridApp.setLayout()) are run, and the user-defined functions to use within the grid can be defined. All JavaScript functions, including the gridReadyHandler function, in the CreateGrid.js file, must be defined by function expression as JavaScript are run in the CommonJs environment:

Posted by & filed under Recent News.

In this release, a lot of improvements have been made to the overall grid appearance and style, and features for user-friendliness, pivoting, and editing are greatly enhanced. The following features are new to this release:


OLAP Pivot (Multidimensional View)

It is a data processing technique used to provide different views according to various viewpoints (dimensions) of the user. For example, if the data consists of product name / branch name / monthly sales / monthly purchase, you may have a variety of views, such as annual and quarterly sales and purchases, sales / purchases of each product by branch, the highest sales point / minimum sales point by product, etc. Pivot is a technique that makes it easy to create a view from a client’s layout without the help of DB administrator or server programmer.

View the demo: and click Features → Pivot


Excel-style editing

Now in version 4.0, you can switch edit mode with keystroke and move between cells with arrow keys.

View the demo: and click Features → Edit (Input, Update, Delete, Etc.)


Undo and redo functions in edit mode

When you edit the grid, it’s easy to make mistakes if you use the enter key / tab key / arrow key quickly when entering numbers or letters. When this happens, you will need the Undo function.

View the demo: and click Features → Edit (Input, Update, Delete, Etc.) → Undo, Redo


Enhanced filtering and search capabilities

In this release, you can apply filtering of various conditions (e.g. big, small, same, <=,> =, 10 ~ 100, etc.) to individual columns, and the multiple filtering technique is supported.

View the demo: and click Features → Filtering and Searching


Editing hierarchical data

In this 4.0 version, data can be freely edited in hierarchical structure.

View the demo: and click Features → Edit (Input, Update, Delete, Etc.) → Hierarchical Editing


Others Features


Version 3.5 Features

  • Page-by-page view function using PagingCollection: The PagingCollection object is newly added in this release to support the method of expressing each page unit separately after receiving all the pages of the grid. This can be useful if you need to process the entire page. and click Features → Grid View Features → Paging (PagingCollection), Use Cases → Data Processing → Filtering in Paging
  • Ability to change the default properties and styles of the grid using JavaScript includes: If several people collaborate, it is not easy for each developer to maintain the unified attributes or style of the grid. In this collaborative work, the attributes and style of the grid to be used in common for various pages can be put in a JavaScript file, and it can be included and applied easily. and click Features → Control Grid Property

Posted by & filed under Recent News.

We are very pleased to announce the release of KoolChart for HTML5 v5.0. This release focuses on the interactivity between the chart data and the chart presentation, which is what we have pursued over the last year and a direction of our future development.  We have added several new chart types and useful functions to this release, and also changed the basic color set and design to more of a modern fresh style.


Data Interaction Feature

Now, using the interaction feature of KoolChart, you can provide users with notifications about the data that meets certain conditions in the chart data. CSS is used for formatting the notification such as the highlighting or flickering effect, a rolling text banner and an impressive image. Please check the details with our online demo, (Go To Chart Types –> Event)


New Chart Types in Version 5.0


New Features in Version 5.0

  • Label Grouping: Multi-level / Hierarchical / Grouping of axis labels are fully supported in version 5.0. For example, in a monthly chart, you can represent the X-axis with the labels that show the 12 months and their corresponding quarters and the year. (Go To Properties –> Axis Label -> Grouped Label)
  • Displays the series name at the end of the line in the line chart: (Go To Chart Types –> Line -> Series DisplayName)
  • Drags and selects multiple data items (Highlight): (Go To Chart Types –> Column-> Column 2D, and try to drag some columns)
  • Toggles on and off a pie slice (series) by mouse-clicking on the legend item: (Go To Chart Types –> Pie –> Pie 2D)
  • The tooltips moves with mouse more smoothly and the axis-based tooltips has been added: (Go To Properties –> Tooltips)
  • Synchronizes the crosshairs on multiples charts: (Go To Properties –> Multiple Charts -> Crosshair Synchronization)