jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

jqgrid showing unwanted lines if I want to show a form with table (tr and tds) inside a cell

Tags: jgrid form table tr td

19/03/2012
00:02

sai530

Member

Members

Forum Posts: 3

Member Since:
19/03/2012

Offline

I have a grid in which one of the column needs to show a form from database that was created by the user. so this form differs from a row to another row and this is just for showing how the form looks like. no need of allowing user to edit it. I think jqgrid got confused with the td and tr elements inside the form when tried to display this. so its breaking when it sees the td inside my cell and is showing some horizontal lines and stuff which wasn't actually there inside the actual form. Is there a way that I can let jqgrid to ignore my table and make sure it wont use the tds and trs inside my form. Thanks in Advance

19/03/2012
13:42

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Which version is used?

In which browser is this?

Can you post some simple code?

How look exactly your form?

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

19/03/2012
13:56

sai530

Member

Members

Forum Posts: 3

Member Since:
19/03/2012

Offline

Tony, Thanks for your prompt response. I'm using jqGrid 4.1.2 . Here is my sample code

        var grid = $('#grid').jqGrid(
        {
            datatype: 'local',
            colNames: ['Form'],
            colModel: [
                        { name: 'Notes', index: 'Form', width: 140, align: 'left' }
                               ],
             height: 'auto',
            pager: $('#grid_pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            viewrecords: true,
            imgpath: '/scripts/themes/steel/images',
            emptyrecords: 'No records to view',
            hoverrows: false,
             autowidth: true,
            forceFit: true
           }).navigation('#grid_pager', { edit: false, add: false, del: false, refresh: false, search: false });
                return grid;

I want to display below code into the form column of the grid ( which is from database column retrieved from c# code)

<form action="https://www.google.com"

method=get>
<table width="468" border="0"
cellspacing="0" cellpadding="0" height="60">
<tr>

   <td valign="bottom"
background="http://123.gif">

<table width="460" border="0" cellspacing="0" cellpadding="0" align="center"
height="60">
        <tr>
          <td height="25"></td>
        </tr>
        <tr>

          <td>
<p align="right"><font size="2" face="Times New Roman, Times, serif">
<font color="#FFFFFF">one             </font>

    <input type="text" name="one" size="13">

   <font color="#FFFFFF">Zipcode </font>
</font><font face="Times New Roman, Times, serif" color="#FFFFFF">:</font><font face="Times New Roman, Times, serif">
              </font>

             <input type="text" name="two" size="5">

<input type=hidden name=fif value="1024">

<input type="submit" name="Submit" value="test">
            </p>
          </td>
        </tr>
      </table>
    </td>
</tr>
</table>
</form>

21/03/2012
21:37

sai530

Member

Members

Forum Posts: 3

Member Since:
19/03/2012

Offline

I think I know the issue. Jqgrid table has a style which is applying the style for my table inside the form. Avoid applying parents css to my table. now everything works. no more unwanted lines :).

sai530 said:

Tony, Thanks for your prompt response. I'm using jqGrid 4.1.2 . Here is my sample code
        var grid = $('#grid').jqGrid(
        {
            datatype: 'local',
            colNames: ['Form'],
            colModel: [
                        { name: 'Notes', index: 'Form', width: 140, align: 'left' }
                               ],
             height: 'auto',
            pager: $('#grid_pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            viewrecords: true,
            imgpath: '/scripts/themes/steel/images',
            emptyrecords: 'No records to view',
            hoverrows: false,
             autowidth: true,
            forceFit: true
           }).navigation('#grid_pager', { edit: false, add: false, del: false, refresh: false, search: false });
                return grid;
I want to display below code into the form column of the grid ( which is from database column retrieved from c# code)

<form action="https://www.google.com"

method=get>
<table width="468" border="0"
cellspacing="0" cellpadding="0" height="60">
<tr>

   <td valign="bottom"
background="http://123.gif">

<table width="460" border="0" cellspacing="0" cellpadding="0" align="center"
height="60">
        <tr>
          <td height="25"></td>
        </tr>
        <tr>

          <td>
<p align="right"><font size="2" face="Times New Roman, Times, serif">
<font color="#FFFFFF">one             </font>

    <input type="text" name="one" size="13">

   <font color="#FFFFFF">Zipcode </font>
</font><font face="Times New Roman, Times, serif" color="#FFFFFF">:</font><font face="Times New Roman, Times, serif">
              </font>

             <input type="text" name="two" size="5">

<input type=hidden name=fif value="1024">

<input type="submit" name="Submit" value="test">
            </p>
          </td>
        </tr>
      </table>
    </td>
</tr>
</table>
</form>

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
41 Guest(s)

Currently Browsing this Page:
1 Guest(s)