Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Gaizka on Feb 10, 2009 01:52
open dhtmlx forum
Configuring Grid

I want to configure my grid with javascript functions, not in HTML. It's possible?
I'm trying with onbeforeinit but it doesn't work. Headers, withds, types dont change.

My code:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
</head>
<body>
<link href="../codebase/dhtmlxgrid.css" rel="stylesheet" type="text/css">
<script src="../codebase/dhtmlxgrid.js"></script>
<script src="../codebase/dhtmlxgridcell.js"></script>
<script src="../codebase/ext/dhtmlxgrid_start.js"></script>

<table id="grid_container" name="grid_container" class="dhtmlxGrid" onbeforeinit="initGrid()" lightnavigation="true">
<tr>
<td>nombre</td>
<td>apellidos</td>
<td>dni</td>
<td>sueldo</td>
<td>fecha</td>
</tr>
<c:forEach var="nodo" items="${myList}">
<tr>
<td>${nodo.nombre}</td>
<td>${nodo.apellidos}</td>
<td>${nodo.dni}</td>
<td>${nodo.sueldo}</td>
<td>${nodo.fecha}</td>
</tr>
</c:forEach>
</table>

<script>
function initGrid(){
grid_container.setImagePath("../codebase/imgs/");
grid_container.setHeader("Nombre,Apellidos,DNI,Sueldo,Fecha");
grid_container.setInitWidths("100,100,100,150,80");
grid_container.setColAlign("left,left,left,right,right");
grid_container.setColTypes("ro,ro,ro,ron,ro");
grid_container.setColSorting("str,str,str,int,date_custom");
grid_container.setDateFormat("%d/%m/%Y");
grid_container.setNumberFormat("0,000.00",3,",",".");
grid_container.setSkin("modern");
}
</script>
</body>
</html>
Answer posted by dhxSupport on Feb 10, 2009 06:34

You foget to include <script src="../codebase/dhtmlxcommon.js"></script>

Answer posted on Feb 10, 2009 08:32
The page is called by Struts Sitemesh and this "<script src="../codebase/dhtmlxcommon.js"></script>" is include in the layout.
Answer posted by dhxSupport on Feb 10, 2009 08:41

Every dhtmlx component has it's own "dhtmlxcommon.js" file. You have to include one file for the dhtmlxGrid and other for the dhtmlxLayout:

<script src="..dhtmlxGrid/codebase/dhtmlxcommon.js"></script>

<script src="..dhtmlxLayout/codebase/dhtmlxcommon.js"></script>

Answer posted on Feb 10, 2009 23:30
This is a paragraph from the documentation

"If you need to use more than one component in your application you can put files from their codebase folders into one. The only conflict can be with dhtmlxcommon.js file, as it is included in all components. Do not hesitate  to overwrite them, just make sure you keep the one which is most recent (this is important when you get component updates. Originally dhtmlxcommon.js is the same in all components codebase folders)."

Do I have to include dhtmlxcommon for every component???
Answer posted by dhxSupport on Feb 11, 2009 01:10
Yes, you have to include dhtmlxcommon for every component
Answer posted by dhxSupport on Feb 11, 2009 01:11
Yes, you have to include dhtmlxcommon for every component
Answer posted on Feb 11, 2009 02:45
Here is another example. Headers, withds, types... dont change.

<%@ page contentType="text/html; charset=UTF-8" %>

<html>
    <head>
        <link  href="../codebase/dhtmlxgrid.css" rel="stylesheet" type="text/css">
        <script src="../codebase/dhtmlxcommon.js"></script>
        <script src="../codebase/dhtmlxgrid.js"></script>        
        <script src="../codebase/dhtmlxgridcell.js"></script>        
        <script src="../codebase/ext/dhtmlxgrid_start.js"></script>
    </head>

    <body>
        <table id="tblToGrid" class="dhtmlxGrid" name="grid_container" style="width:400px;" lightnavigation="true">
            <tr>
                <td>nombre</td>
                <td>apellido</td>
                <td>dni</td>
                <td>sueldo</td>
                <td>fecha</td>
            </tr>
            <tr>
                <td>Felipe</td>
                <td>Perez</td>
                <td>38.124.586-Z</td>
                <td>35896.25</td>
                <td>22/08/1962</td>
            </tr>
            <tr>
                <td>Manuel</td>
                <td>Rodriguez</td>
                <td>14.256.859-R</td>
                <td>24869.87</td>
                <td>02/03/1973</td>
            </tr>
        </table>

        <script>
            var grid_container = new dhtmlXGridFromTable('tblToGrid');
            grid_container.setImagePath("../codebase/imgs/");
            grid_container.setHeader("Nombre,Apellido,DNI,Sueldo,Fecha");
            grid_container.setInitWidths("100,100,100,150,80");
            grid_container.setColAlign("left,left,left,right,right");
            grid_container.setColTypes("ro,ro,ro,ron,ro");
            grid_container.setColSorting("str,str,str,int,date_custom");
            grid_container.setDateFormat("%d/%m/%Y");
            grid_container.setNumberFormat("0,000.00",3,",",".");
            grid_container.setSkin("modern");
             
            function date_custom(a,b,order){
                a=a.split("/")
                b=b.split("/")
                if (a[2]==b[2]){
                    if (a[1]==b[1])
                        return (a[0]>b[0]?1:-1)*(order=="asc"?1:-1);
                    else
                        return (a[1]>b[1]?1:-1)*(order=="asc"?1:-1);
                }
                else
                    return (a[2]>b[2]?1:-1)*(order=="asc"?1:-1);
            }            
        </script>
    </body>
</html>

Answer posted by dhxSupport on Feb 11, 2009 06:38

If you initialize grid from table via creating dhtmlXGridFromTable object, you can work only with methods which can be called after grid initialization. 

To set column width use setColWidth(ind, value) method where ind - column index, value - new width value.

Answer posted by Support on Feb 11, 2009 09:41
Also you have both css class  ( class="dhtmlxGrid"  ) and  js command which lead to double-initialization. Just remove css class for more stable work
The column parameters , such as width , type, align, sort can be defined directly at part of html table instead of commands

<table ...
 <tr>
  <td width="100" type="ro" sort="str" align="left">nombre</td>
   ...