jQuery Grid Plugin - jqGridForum

06/08/2009
09:54

quintin3265

Guest

Guests

1

The “Add Row” dialog is not consistent between Internet Explorer 8 and Firefox 3.5.2 when only text fields are contained in the dialog.

To reproduce the issue, create a new grid with a colModel that only contains edittype: text columns (no selects or other elements). Create two or more fields. Add a pager so that add: true, and a plus sign appears to add rows. Then click the plus sign to add a new row and view the dialog box that appears in Firefox 3.5.2 and in IE8. Allow all other editing options to remain as default.

In Firefox 3.5.2, the box is readable and the size of the input fields is reasonable and left-justified. However, in Internet Explorer 8, the fields are right-justified, and too small to enter meaningful data into. The box functions identically otherwise if you enter data into the boxes and click “Save.”

After a few hours of investigation, I determined that the issue can be worked around by manually specifying the “size” parameter, as editoptions: {size: 60}. This causes the textboxes to be left-justified in both browsers and to be the same size as well. Note, however, that this workaround causes the (now-larger) textboxes to wrap under the other columns in the grid if inline editing is enabled, and it's difficult or impossible to specify the exact size that fits into a column for inline editing.

Ideally, I would suggest that the default appearance in the Add Row dialog be identical in both browsers.

06/08/2009
23:58

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

Hello,

When I test this case in my demo all look equal in IE8 and FF. Also do you have any other changes in the css or in the code.

Also we need to make some changes when we are in formedit module - will see what to do.

Regards

Tony

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.

07/08/2009
09:23

quintin3265

Guest

Guests

3

I searched all the CSS code and there is nowhere in the code that references any right justification. You can see for yourself the entire page's code below. The first grid is the one that causes the problems. Note that the code that's pasted corrects the issue, so you will need to remove editoptions: {size: 60} if you want to reproduce the bug.

-----------------------

<%@ Language="VBScript" %>
<% Option Explicit %>

<%
'-----------------------------------------------------------------------------
' Connect to Database
'-----------------------------------------------------------------------------
    Dim objConn, objRS, strSQL

    Set objConn = Server.CreateObject("ADODB.Connection")
    objConn.Open CPSS_DB_CONN
    Set objRS = Server.CreateObject("ADODB.Recordset")

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

This stylesheet contains:

B.black
{
    COLOR: #000000;
    FONT-WEIGHT: bold;
}
B.blue
{
    COLOR: #0000FF;
    FONT-WEIGHT: bold;
}
B.red
{
    COLOR: #FF3300;
    FONT-WEIGHT: bold;
}

BR
{
mso-data-placement: same-cell;
}

.overLIB
{
font-family: Arial, Helvetica, sans-serif, Geneva, Swiss, SunSans-Regular;
color: #000000;
    FONT-SIZE: 8pt;
}
.td
{
font-family: Arial, Helvetica, sans-serif, Geneva, Swiss, SunSans-Regular;
color: #000000;
    FONT-SIZE: 11pt;
}
.formTable
{
    BACKGROUND-COLOR: #F3F3F3;
}
.formHeader
{
    BACKGROUND-COLOR: #DCDEE0;
    FONT-WEIGHT: bold;
    FONT-SIZE: 16px;
    COLOR: #303030;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.formTitle
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 14px;
    COLOR: #303030;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.formLabel
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #303030;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.formLabelNote
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10px;
    COLOR: black;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.formText
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 12px;
    COLOR: #303030;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.errorText
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #FF3300;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.messageText
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #0000FF;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.contentTable
{
    BACKGROUND-COLOR: #F5F5F5;
}
.contentHeader
{
    BACKGROUND-COLOR: #303030;
    FONT-WEIGHT: bold;
    FONT-SIZE: 16px;
    COLOR: white;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.contentTitle
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 14px;
    COLOR: #303030;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.contentLabel
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #303030;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.contentText
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 12px;
    COLOR: black;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}
.contentTextSmall
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10px;
    COLOR: black;
    FONT-FAMILY: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
}

.appFormTabDiv
{
display: block;
float: left;
}

.appFormTabOn
{
background-color: #FFFFFF;
border-top: 1px outset #303030;
border-left: 1px outset #303030;
border-right: 1px outset #303030;
color: #FF3300;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif, Geneva, Swiss, SunSans-Regular;
font-size: 12px;
font-weight: bold;
padding: 2px;
text-align: center;
width: 100%;
height: 18px;
}
.appFormTabOff
{
background-color: #DCDEE0;
border-top: 1px outset #303030;
border-left: 1px outset #303030;
border-right: 1px outset #303030;
color: #333333;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif, Geneva, Swiss, SunSans-Regular;
font-size: 12px;
font-weight: bold;
padding: 2px;
text-align: center;
text-decoration: none;
width: 100%;
height: 18px;
}
a.appFormTabOff:Link    { color: #303030; }
a.appFormTabOff:visited { color: #303030; }
a.appFormTabOff:hover   { background-color: #FFFFFF;
              color: #FF3300; }
a.appFormTabOff:active { background-color: #FFFFFF;
              color: #FF3300; }
.appFormTabTable
{
background-color: #F3F3F3;
border-top: 1px outset #303030;
border-left: 1px outset #303030;
border-right: 1px outset #303030;

------------------

ENG0016admin.css contains:

.searchDiv
{
border: 1px dotted #666666;
padding: 3px;
}

-----------

</head>

<table id="tbl_body" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td id="nav_column">
        
        
        
        <p align="center"> </p>
      </td>
      <td>
        <div id="page_title">
          <img src="../images/redsquare.gif" width="9" height="9" alt="Red Square" />
          ENG-0016 Tailoring Administration
        </div>
        <div id="content">
          <p class="section_title" style="margin-bottom: 0;">Edit Tailoring Tools</p>
          <table width="95%" align="center" cellpadding="4" cellspacing="0" border="0">
            <tr>
              <td colspan="2" valign="middle">


          <%

'Error out if the required permissions are not present.
            If Not CBool(Session(Application_Session_Prefix & "_AssetDelPermit")) Or Not CBool(Session(Application_Session_Prefix & "_AssetAddPermit")) Or Not CBool(Session(Application_Session_Prefix & "_AssetMaintPermit")) Or Not CBool(Session(Application_Session_Prefix & "_AssetReadPermit")) Then %>
              <p><font color="red">You do not have the required permission to access this page. To administer the ENG0016 tools list, you must possess
                all four of the CM Asset Maintenence permissions: Read, Update, Add, and Delete.</font></p>
              </td></tr></table></div></td></tr></table></div>
              </body></html>
           <% Response.End
            End If
           %>



                <p><b>ENTER:</b>  <font color="forestgreen">Save data</font> in current row<br /><b>ESC/Click elsewhere:</b>  <font color="red">Discard changes</font> and do not save current row</p>
                <p> </p>
                <p>1. Define the tools available for selection. If a tool is to be available under multiple categories, it should only be listed once here.</p>
                <table id="tools"></table>
                <div id="toolsSearch" class="searchDiv"></div><br />
                <div id="toolsPager" class="scroll" style="text-align:center;"></div>
                
                <p> </p>
                <p>2. Define the category heirarchy underwhich the tools will be classified. If a project's "baseline tailoring date" falls outside the "start date" and "end date" of a particular category, that category will not be listed and will not be required for tailoring for that project.</p>
                <table id="categories"></table>
                <div id="categoriesPager" class="scroll" style="text-align:center;"></div>
                <div id="categoriesSearch" class="searchDiv"></div>
                
                <p> </p>
                <p>3. Associate the tools defined in the first grid with the categories under which they will be available for selection. A project's available selections will be determined by whether the project's "baseline tailoring date" is between a tool's start and end dates.</p>
                <table id="available"></table>
                <div id="availablePager" class="scroll" style="text-align:center;"></div>
                <div id="availableSearch" class="searchDiv"></div>
                <div id="errorDialog"></div>

                <script language="javascript" type="text/javascript">
                  var lastSel = 1;
                  var lastCategoriesSel = 1;
                  var lastAvailableSel = 1;
                  var constUpdateFrequency = 600000; //Seconds between auto-refreshes to keep-alive the session
                  var editingTools = false, editingCategories=false, editingAvailable = false;
                  var toolsValueList = '', categoriesValueList = '';

                  jQuery(document).ready(function(){
                      $.ajax({url: 'toolsValueListJSON.asp', async: false, success: toolsValueListLoaded});
                      $.ajax({url: 'categoriesValueListJSON.asp', async: false, success: categoriesValueListLoaded});

                      $("#tools").jqGrid({
                        // the url parameter tells from where to get the data from server
                        // adding ?nd='+new Date().getTime() prevent IE caching
                        url:'toolsListJSON.asp',
                        // datatype parameter defines the format of data returned from the server
                        // in this case we use a JSON data
                        datatype: "json",
                        // colNames parameter is a array in which we describe the names
                        // in the columns. This is the text that apper in the head of the grid.
                        colNames:['Tool ID','Tool Name', 'Vendor'],
                        // colModel array describes the model of the column.
                        // name is the name of the column,
                        // index is the name passed to the server to sort data
                        // note that we can pass here numbers too.
                        // width is the width of the column
                        // align is the align of the column (default is left)
                        // sortable defines if this column can be sorted (default true)
                        colModel:[
                            {name:'Tool ID',index:'tool_id', editable: false, width:55},
                            {name:'Tool Name',index:'tool_name', width:90 , editable: true, search: true, autoencode: true, editoptions: {size: 60}},
                            {name:'Vendor',index:'vendor', width:100 , editable: true, search: true, editoptions: {size: 60}}
                        ],
                        // pager parameter define that we want to use a pager bar
                        // in this case this must be a valid html element.
                        // note that the pager can have a position where you want
                        pager: jQuery('#toolsPager'),
                        postData: {exact: "tool_id"},
                        // rowNum parameter describes how many records we want to
                        // view in the grid. We use this in example.php to return
                        // the needed data.
                        rowNum:25,
                        // rowList parameter construct a select box element in the pager
                        //in wich we can change the number of the visible rows
                        rowList:[25,35,50,100],
                        // path to mage location needed for the grid
                        imgpath: 'images',
                        // sortname sets the initial sorting column. Can be a name or number.
                        // this parameter is added to the url
                        sortname: 'tool_name',
                        multiselect: false,
                        autoencode: true,
                        //viewrecords defines the view the total records from the query in the pager
                        //bar. The related tag is: records in xml or json definitions.
                        viewrecords: true,
                        editurl: 'toolsListSave.asp',
                        height: 'auto',
                        width: 600,
                        //sets the sorting order. Default is asc. This parameter is added to the url
                        sortorder: "asc",
                        caption: "Tailoring Tools",
                        onSelectRow: function(id){
                         if(id && id!==lastSel){
                            jQuery('#tools').restoreRow(lastSel);
                            lastSel=id;
                          }
                        editingTools = true;
                        jQuery('#tools').editRow(id, true, null, null, null, null, afterSubmitFuncForEditTools, editError); },
                        afterSubmit: afterSubmitFunc
                    });

                   $("#categories").jqGrid({
                        // the url parameter tells from where to get the data from server
                        // adding ?nd='+new Date().getTime() prevent IE caching
                        url:'categoriesListJSON.asp',
                        // datatype parameter defines the format of data returned from the server
                        // in this case we use a JSON data
                        datatype: "json",
                        // colNames parameter is a array in which we describe the names
                        // in the columns. This is the text that apper in the head of the grid.
                        colNames:['ID','Category Name', 'Start Date', 'End Date', 'Parent Category'],
                        // colModel array describes the model of the column.
                        // name is the name of the column,
                        // index is the name passed to the server to sort data
                        // note that we can pass here numbers too.
                        // width is the width of the column
                        // align is the align of the column (default is left)
                        // sortable defines if this column can be sorted (default true)
                        multiselect: false,
                        colModel:[
                            {name:'CategoryID',index:'tc1.category_id', editable: false, width:23, search: true},
                            {name:'CategoryName',index:'tc1.category_name', width:120 , editable: true, search: true},
                            {name:'StartDate',index:'tc1.start_date', width:70 , editable: true, search: true},
                            {name:'EndDate',index:'tc1.end_date', width:70 , editable: true, search: true},
                            {name:'ParentCategory',index:'parent_category_id', width:150 , editable: true, edittype: 'select', editoptions: {value: categoriesValueList} , search: false}
                        ],

                        /*, editoptions: {
                                dataInit:function(el){
                              $(el).datepicker(
                                 {
                                   dateFormat:'yy-mm-dd'
                               });
                            }} */

                        // pager parameter define that we want to use a pager bar
                        // in this case this must be a valid html element.
                        // note that the pager can have a position where you want
                        pager: jQuery('#categoriesPager'),
                        postData: {exact: "tc1.category_id"},
                        // rowNum parameter describes how many records we want to
                        // view in the grid. We use this in example.php to return
                        // the needed data.
                        rowNum:25,
                        // rowList parameter construct a select box element in the pager
                        //in wich we can change the number of the visible rows
                        rowList:[25,35,50,100],
                        // path to mage location needed for the grid
                        imgpath: 'images',
                        // sortname sets the initial sorting column. Can be a name or number.
                        // this parameter is added to the url
                        sortname: 'parent_category_id',
                        //viewrecords defines the view the total records from the query in the pager
                        //bar. The related tag is: records in xml or json definitions.
                        viewrecords: true,
                        autoencode: true,
                        editurl: 'categoriesListSave.asp',
                        height: 'auto',
                        width: 600,
                        //sets the sorting order. Default is asc. This parameter is added to the url
                        sortorder: "desc",
                        caption: "Tailoring Categories",
                        onSelectRow: function(id){
                         if(id && id!==lastCategoriesSel){
                            jQuery('#categories').restoreRow(lastCategoriesSel);
                            lastCategoriesSel=id;
                          }
                          editingCategories = true;
                          jQuery('#categories').editRow(id, true, null, null, null, null, afterSubmitFuncForEditCategories, editError);
                        }
                    });

                    $("#available").jqGrid({
                        // the url parameter tells from where to get the data from server
                        // adding ?nd='+new Date().getTime() prevent IE caching
                        url:'availableListJSON.asp',
                        // datatype parameter defines the format of data returned from the server
                        // in this case we use a JSON data
                        datatype: "json",
                        // colNames parameter is a array in which we describe the names
                        // in the columns. This is the text that apper in the head of the grid.
                        colNames:['Category','Tool', 'Start Date', 'End Date'],
                        // colModel array describes the model of the column.
                        // name is the name of the column,
                        // index is the name passed to the server to sort data
                        // note that we can pass here numbers too.
                        // width is the width of the column
                        // align is the align of the column (default is left)
                        // sortable defines if this column can be sorted (default true)
                        colModel:[
                            {name:'CategoryID',index:'tc.category_name', width:120 , editable: true, search: true, edittype: 'select', editoptions: {value: categoriesValueList} },
                            {name:'ToolID',index:'tt.tool_name', editable: true, search: true, edittype: 'select', editoptions: {value: toolsValueList} },
                            {name:'StartDate',index:'at.start_date', width:70 , editable: true, search: true},
                            {name:'EndDate',index:'at.end_date', width:70 , editable: true, search: true}
                        ],
                        // pager parameter define that we want to use a pager bar
                        // in this case this must be a valid html element.
                        // note that the pager can have a position where you want
                        pager: jQuery('#availablePager'),
                        // rowNum parameter describes how many records we want to
                        // view in the grid. We use this in example.php to return
                        // the needed data.
                        rowNum:25,
                        // rowList parameter construct a select box element in the pager
                        //in wich we can change the number of the visible rows
                        rowList:[25,35,50,100],
                        // path to mage location needed for the grid
                        imgpath: 'images',
                        // sortname sets the initial sorting column. Can be a name or number.
                        // this parameter is added to the url
                        sortname: 'category_id',
                        multiselect: false,
                        autoencode: true,
                        //viewrecords defines the view the total records from the query in the pager
                        //bar. The related tag is: records in xml or json definitions.
                        viewrecords: true,
                        editurl: 'availableListSave.asp',
                        height: 'auto',
                        width: 600,
                        //sets the sorting order. Default is asc. This parameter is added to the url
                        sortorder: "asc",
                        caption: "Tool/Category Associations",
                        onSelectRow: function(id){
                         if(id && id!==lastAvailableSel){
                            jQuery('#available').restoreRow(lastAvailableSel);
                            lastAvailableSel=id;
                          }
                          editingAvailable = true;
                          jQuery('#available').editRow(id, true, null, null, null, null, afterSubmitFuncForEditAvailable, editError);
                        }
                    });

                    $("#tools").navGrid($("#toolsPager"), { edit:false, add: true, del: true, search: true });
                    $("#categories").navGrid($("#categoriesPager"), { edit:false, add: true, del: true, search: true });
                    $("#available").navGrid($("#availablePager"), { edit:false, add: true, del: true, search: true });

                    $(document).click(function(E) {
                      jQuery('#tools').restoreRow(lastSel);
                      jQuery('#available').restoreRow(lastAvailableSel);
                      jQuery('#categories').restoreRow(lastCategoriesSel);

                      editingTools = false;
                      editingCategories = false;
                      editingAvailable = false;
                    });

                    jQuery.jgrid.del = {
                        caption: "Delete row",
                        msg: "Delete selected record?",
                        bSubmit: "Delete",
                        bCancel: "Cancel",
                        processData: "Deleting...",
                        top: 200,
                        left: 200,
                        afterSubmit: afterSubmitFunc
                    };

                   jQuery.jgrid.edit = {
                        addCaption: "Add row",
                        bSubmit: "Save",
                        bCancel: "Cancel",
                        top: 200,
                        width: 590,
                        afterSubmit: afterSubmitFunc
                    };


                    function afterSubmitFunc (data, id)
                    {
                      $.get('toolsValueListJSON.asp', {}, toolsValueListLoaded);
                      $.get('categoriesValueListJSON.asp', {}, categoriesValueListLoaded);
                      return showErrorFromResponseText(data.responseText);

                    }
                    //Too many things reloaded here


                    //Necessary because the prototype for the afterSubmitFunc is not the same for inline editing as for form editing
                    function afterSubmitFuncForEditTools (id, responseText)
                    {
                      showErrorFromResponseText(responseText);
                      editingTools = false;
                      $.get('toolsValueListJSON.asp', {}, toolsValueListLoaded);
                      $('#tools').trigger("reloadGrid");
                    }

                    function afterSubmitFuncForEditCategories (id, responseText)
                    {
                      showErrorFromResponseText(responseText);
                      editingCategories = false;
                      $.get('categoriesValueListJSON.as

07/08/2009
09:26

quintin3265

Guest

Guests

4

Got cut off for some reason. I'm sure you won't use all this code, but I'll paste it all so that you might spot something in it of interest:

----------------------

, {}, categoriesValueListLoaded);
                    }

                    function afterSubmitFuncForEditAvailable (id, responseText)
                    {
                      showErrorFromResponseText(responseText);
                      editingAvailable = false;
                    }

                    function showErrorFromResponseText(responseText)
                    {
                      if (responseText != '' && responseText.substr(0, 5) == "ERROR")
                      {
                        showError(responseText.substring(7));
                        return false;
                      }

                      return true; //Not sure why this is necessary
                    }

                    $("#toolsSearch").filterGrid("#tools",{gridModel: true, gridNames:true, gridToolbar: true, enableSearch: true, enableClear: true, formtype: 'vertical' });
                    $("#categoriesSearch").filterGrid("#categories",{
                      filterModel: [
                          {label:'Category ID', name: 'tc1.category_id', stype: 'text', defval: ''},
                          {label:'Category Name', name: 'tc1.category_name', stype: 'text', defval: ''},
                          {label:'Start Date', name: 'tc1.start_date', stype: 'text', defval: ''},
                          {label:'End Date', name: 'tc1.end_date', stype: 'text', defval: ''},
                          {label:'Parent Category Name', name: 'tc2.category_name', stype: 'text', defval: ''}
                        ],
                        gridToolbar: true,
                        enableSearch: true,
                        enableClear: true,
                        formtype: 'vertical'
                     });
                    $("#availableSearch").filterGrid("#available",{
                      filterModel: [
                          {label:'Category', name: 'tc.category_name', stype: 'text', defval: ''},
                          {label:'Tool', name: 'tt.tool_name', stype: 'text', defval: ''},
                          {label:'Start Date', name: 'at.start_date', stype: 'text', defval: ''},
                          {label:'End Date', name: 'at.end_date', stype: 'text', defval: ''}
                        ],
                        gridToolbar: true,
                        enableSearch: true,
                        enableClear: true,
                        formtype: 'vertical'
                     });

                    function editError(request)
                    {
                      showError(request.responseText);
                    }

                    function showError(errorMessage)
                    {
                    $('#errorDialog').html('<table><tr><td style="padding-right: 3px;"><img src="../styles/images/error.png" alt="Error" /></td><td>' + errorMessage + '</td></tr></table>');
                      $('#errorDialog').dialog('open');
                      if (!$('#errorDialog').dialog('isOpen'))
                        $("#errorDialog").dialog({
                          show: 'scale',
                          hide: 'scale',
                          buttons: { "OK": function() { $(this).dialog("close"); } },
                          title: "Save Error",
                          modal: true
                        });
                    }

                  function keepAlive()
                  {
                    if (!editingTools)
                      $('#tools').trigger("reloadGrid");

                    if (!editingCategories)
                      $('#categories').trigger("reloadGrid");

                    if (!editingAvailable)
                      $('#available').trigger("reloadGrid");
                  }

                  //Keep the connection alive so that, during protracted editing sessions, the user isn't
                  //logged out of the CPP and loses his or her work.
                  $(document).everyTime(constUpdateFrequency, keepAlive);

                  function toolsValueListLoaded(data, textStatus)
                  {
                    toolsValueList = data;
                    $('#available').setColProp('ToolID', {editoptions: {value: toolsValueList }});
                    $('#available').trigger("reloadGrid");
                  }

                  function categoriesValueListLoaded(data, textStatus)
                  {
                    categoriesValueList = data;
                    $('#categories').setColProp('ParentCategory', {editoptions: {value: categoriesValueList }});
                    $('#available').setColProp('CategoryID', {editoptions: {value: categoriesValueList }});
                    $('#categories').trigger("reloadGrid");
                    $('#available').trigger("reloadGrid");
                  }

                  /* function pickDates(id, gridName)
                  {
                   //alert("#"+id+"_tc1.start_date","#" + gridName)
                   jQuery("#"+id+"_tc1.start_date","#" + gridName).datepicker({dateFormat:"yyyy-mm-dd"});
                  } */

                });

                </script>
              </td>
            </tr>
            </table>

        </div>
      </td>
    </tr>

<tr>
    <td id="nav_column"> </td>
    <td>
      <div id="update">Last Updated:
        August 15, 2009
      </div>
    </td>
    </tr>
</table>
<div id="copyright">
    
</div>

    <div id="contact">
     
    </div>

</div>
</body>
</html>
<%
'-----------------------------------------------------------------------------
' Clean up database connections
'-----------------------------------------------------------------------------
    Set objRS = Nothing
    objConn.Close
    Set objConn = Nothing

07/08/2009
10:12

quintin3265

Guest

Guests

5

After looking into this for a while, I wonder if many of these issues have to do with having multiple grids on one page. Here's another one to prove my point: put three grids on a page, and then click the "delete" button on either of the bottom two grids without having selected a row. They go grey and don't display the error message.

Yet, when you click "delete" without selecting a row in the first grid, it displays an error message without issue.

07/08/2009
10:30

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

6

Hello,

I think that this bug is corrected

http://github.com/tonytomov/jq.....e8c774edb3

Which version do you use?

Regards

Tony

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.

07/08/2009
13:53

quintin3265

Guest

Guests

7

I just downloaded the changes from the last few days to ensure that the bug wasn't the result of an old version. Unfortunately, it appears as if the changes that were made didn't resolve the issue of the dialog not appearing when no row is selected to delete.

10/08/2009
05:09

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

8

Hello,

Could you please post the entry page.

You can use http://jsbin.com/

Regards

Tony

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.

11/08/2009
13:57

quintin3265

Guest

Guests

9

As you requested, I posted the code at

http://jsbin.com/owire.

But there are so many include files that it's impossible to actually view the document. Hopefully, the code will give you some idea of what's going on, or it can be copied elsewhere with a different configuration.

13/08/2009
00:35

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

10

Hello,

Sorry the link does not work for me.

Regards

Tony

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.