DHTMLX

Start Building Professional
Web Apps Today

dhtmlxSuite 4.2
dhtmlxScheduler 4.3
dhtmlxVault 2.4
dhtmlxGantt 3.2
dhtmlxSuite 4.2

Categories

Question details Back To List

Question posted by Harish Vembu on Aug 21, 2009 15:47

open dhtmlx forum

Adding images and search to GRID header

Hi all,

I have a simple issue that needs resolution.

I am trying to add an image and search option to a particular column in Header of a dhtmlx grid. I am not able to combine both in a single column as given in one of your documentation. The Search text field doesn't appear, only the image is visible

The code below is basically a modification of one of your samples provided. It might have some errors of modification.

when I do mygrid.setHeader("Search for:,#text_search,img:[searchBig.gif],,,"); its able to display the textfield and image in columns but when I do

mygrid.setHeader("Search for:,#text_search img:[searchBig.gif],,,,"); I get only the image and not the Searchbox.

Code snippet:

####################################################################

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title>Skinning</title>
    <link rel="STYLESHEET" type="text/css" href="dhtmlxgrid.css">
    <link rel="STYLESHEET" type="text/css" href="dhtmlxgrid_skins.css">
<link rel="STYLESHEET" type="text/css" href="dhtmlxwindows.css">

    <script src="dhtmlxcommon.js"></script>
    <script src="dhtmlxgrid.js"></script>
    <script src="dhtmlxgridcell.js"></script>
<script src="dhtmlxgrid_filter.js"></script>
<script src="dhtmlxwindows.js"></script>

</head>

<script>

data_val={
rows:[
{ rows_id:101,
data:[
"100",
"A Time to Kill",
"John Grisham",
"12.99",
"25",
"05/01/1998"
] },
{ rows_id:102,
data:[
"1000",
"Blood and Smoke",
"Stephen King",
"0",
"24",
"01/01/2000"
] },
{ rows_id:103,
data:[
"-200",
"The Rainmaker",
"John Grisham",
"7.99",
"24",
"12/01/2001"
] },

{ rows_id:104,
data:[
"-200",
"The Green Mile",
"Stephen King",
"11.10",
"24",
"01/01/1992"
] }
]

}

    function doOnLoad(){

         mygrid = new dhtmlXGridObject('gridbox');

mygrid.setHeader("Search for:,#text_search,img:[searchBig.gif],,,");

mygrid.attachHeader("Sales Dynamic,Title,Description,Price,Shipping,Date of Publication");

        mygrid.setInitWidths("120,150,*,80,80,150");
        mygrid.setColAlign("left,left,center,right,right,center");
        mygrid.setColTypes("dyn,ed,txt,price,coro,ro");
        mygrid.setColSorting("int,str,str,int,str,na")

        mygrid.setSkin("light");
        mygrid.init();

/*loading from json*/
mygrid.load("data_val.json","json");

/*loading from JSON object*/
mygrid.parse(data_val,"json");



    }

</script>
<body onload="doOnLoad()" style="overflow:hidden">
<link rel='STYLESHEET' type='text/css' href='style.css'>
<table cellspacing="0" cellpadding="0" class="sample_header" border="0">
    <tr valign="middle">
        
        <td width="40" align="center"><img src="dhtmlxgrid_icon.gif" border="0"></td>
        
        <td width="150" align="left" nowrap="true">Sample: dhtmlxGrid</td>

        
        <td width="50"><div class="sample_close"><a href="javascript:void(0);" onclick="self.close();"><img src="../common/sample_close.gif" width="14" height="14" border="0" alt="X"></a></div></td>
    </tr>
</table>

    <div style="margin:20px;">

    Choose skin to apply:
    <select onchange="mygrid.setSkin(this.value)">
        <option value="sbdark" selected>sb dark
        <option value="gray">gray
        <option value="mt">mt
        <option value="xp">xp
        <option value="clear">clear
        <option value="modern">modern
        <option value="light" selected>light
    </select>

    </div>
<br>
<br>

    <div id="gridbox" width="100%" height="500px" style="background-color:white;"></div>

</body>
</html>

Appreciate your immediate help on this issue

Thanks & Best Regards

Harish

Answer posted by dhxSupport on Aug 24, 2009 02:49

Unfortunately there is no way to place image and #text_search in the one header's cell. But you can implement custom searching input and place it like simple html:
mygrid.setHeader("Search for:,<input type='text' �/> <img src='searchBig.gif' />,,,,")

Answer posted on Aug 24, 2009 14:47

Thanks for your reply . It helped to some extent.

Best Regards

Harish