Detail window now shows no height

[suvalkon]

HI

All of a sudden my detail window has no height.
See following code as per example. It did show height at some stage but now I don't know what has made it come out with no height?

var gridDetailModel = {
      pageModel: { type: "local", rPP: 5, strRpp: "" },
      dataModel: {
            location: "local",
            sorting: "local"
        },
      colModel: [
            { title: "Job No.", width: 80, dataIndx: "jobNumber", editable: false },
         { title: "Truck No.", width: 40, dataType: "string", dataIndx: "drivercode", align: "center", editable: false },
         { title: "Truck Name", width: 100, dataType: "string", dataIndx: "driverName", align: "center", editable: false },
         { title: "Company Name", width: 150, dataType: "string", dataIndx: "companyName", align: "left", editable: false },
         { title: "Address", width: 120, dataType: "string", dataIndx: "address", align: "left", editable: false},
         { title: "Suburb", width: 150, dataType: "string", dataIndx: "suburbcode", align: "center", editable: false },
         { title: "Type", width: 80, dataType: "string", dataIndx: "typeid", align: "center", editable: false },
         { title: "Comments", width: 150, dataType: "string", dataIndx: "description", align: "left", editable: false },
         { title: "Date Ready", width: 80, dataType: "date", dataIndx: "readyDate", align: "center", editable: false },         
         { title: "Time Ready", width: 80, dataType: "string", dataIndx: "readyTime", align: "center", editable: false },
         { title: "Time CloseOff", width: 80, dataType: "string", dataIndx: "closeTime", align: "center", editable: false },
         { title: "Status", width: 80, dataType: "string", dataIndx: "status", align: "center", editable: false },
         { title: "<font color='Red'><b>*MUSTDO</b></font>", width: 40, dataType: "string", dataIndx: "mustdo", align: "center", editable: false }
         
        ],
      flexHeight: true,
      resizable: true,
      sortable: false,
      editable: false,
        width: "auto",
      //height: 150,


Also question:

If you have to do some further editing based on JSON after Javascript validations (once you click Update button), how can you leave the row in Update mode after any alerts about any other validations that took place on the database (web service).
If I click the Update it return the error but I don't know how to leave the Update button on in that row which has the problem?

[paramvir]

you have comma (,) after the last property width: "auto", in gridDetailModel which can pose problem in IE older versions. Also you don't need resizable: true when flexHeight is true and width is auto.

removeClass and commit methods remove the editability and refresh the row which brings the update button back to edit button.
So you don't call these methods as long as you get errors from the server.

[suvalkon]

There are other properties after the width....
I have tried all combinations but can't understand why it just displays the heading and no detail.
It almost seems that it is due to some of the properties I have changed for the main grid.

flexHeight: true,
      resizable: true,
      sortable: false,
      editable: false,
        width: "auto",
      //height: 150,
        //autoSizeInterval: 500,
      track: true, //to turn on the track changes.
        numberCell: { show: false },
        showTop: false,
        showBottom: false,
      hoverMode: 'cell',

[suvalkon]

And I forgot here is a snippet of the JSON return after update.
The removeClass is above in the standard logic as in you demo in the update event.
See below code.
Are you saying not to do the remove class until you are sure what comes back from the JSON?

if (!isDirty) {
         var url,
            rowData = $Maingrid.pqGrid("getRowData", { rowIndx: rowIndx }),
            recIndx = $Maingrid.pqGrid("option", "dataModel.recIndx");

         $Maingrid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
         $Maingrid.pqGrid("showLoading");
.......
.......
.......

success: function (jdata) {
               var s1 = jdata.msg.msgSeverity,
                  s2 = jdata.msg.msgCust,
                  s3 = jdata.msg.msgMain;
               if (s1 == "F") {
                  //alert(s3);
                  // SHOW THE ERROR IN THE STANDARD ERROR MESSAGE AREA
                  errfmt = '<font color="red"><b>' + s3 + '</b><br></font>'
                  $("#msg").html(errfmt);
                  $Maingrid.pqGrid("rollback");
                  $Maingrid.pqGrid("refreshDataAndView");
                  $Maingrid.pqGrid("hideLoading");
               } else {
                  //console.log(s1 + " " + s3);
                  $Maingrid.pqGrid('option', 'dataModel.data', jdata.despjobdetout.djno);
                  $Maingrid.pqGrid("refreshDataAndView");
                  $Maingrid.pqGrid("hideLoading");
                  location.reload(true); //this reloads the whole page (nasty but the best we can do at this stage) !!!!!!!!!!!!!!!!!!!!!!!
                  //$("#grid_array").pqGrid("refreshRow", {rowInx: rowIndx} );
                  //$("#grid_array").pqGrid('option', 'dataModel.data', jdata.despjobdetout.djno);
                  //$("#grid_array").pqGrid("refreshDataAndView");
               }
               
               //delete button (if present)
               $Maingrid.find("button.delete_btn").button({ icons: { primary: 'ui-icon-close'} })
               .unbind("click")
               .bind("click", function (evt) {
                  if (isEditing($Maingrid)) {
                     return false;
                  }
                  var $tr = $(this).closest("tr"),
                     rowIndx = $Maingrid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
                  MaindeleteRow(rowIndx, $Maingrid);
               });
               //edit button
               $Maingrid.find("button.edit_btn").button({ icons: { primary: 'ui-icon-pencil'} })
               .unbind("click")
               .bind("click", function (evt) {
                  if (MainisEditing($Maingrid)) {
                     return false;
                  }
                  var $tr = $(this).closest("tr"),
                     rowIndx = $Maingrid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
                  MaineditRow(rowIndx, $Maingrid);
                  return false;
               });

[paramvir]

Please post a complete test case and a screenshot of the issue if you want me to check what's wrong. Your detail row might not be displaying if you have any error on server side. Please check the web browser console and implement dataModel.error method to find it out.

Yes, remove the class and commit the changes only when you are sure about success on the server side.

[suvalkon]

The interesting thing by hitting F-12 debugger the window dispays (but not always). When the screen height is shortened sometimes it displays
See Attachment despatchjobs.pdf.
Some are opened OK and othesr not as you can see on the example.
If I take the debug away none of them open OK.

As you can see there are no debugger errors.
Datamodel is local so dataModel.error won't apply will it?

This behaviour started happening I think when I tried to fix the main grid with minWidth and show horizontal scroll so it could fit to the right of the Navigation menu.
(Again see attached example).

I have included the whole code for you to look at.
The <div> in the HTML is...

<div id="grid_array" style="margin: 10px;">
</div>
<!--script tag used to define detail template-->
<script id="tmpl" type="text/pq-template">
    <div class="pq-tabs" style="width:auto;">
        <ul>
            <li><a href="#tabs-1">Job Details</a></li>
         <!--<li><a href="#tabs-2">Replace Example</a></li>-->
        </ul>
        <div id="tabs-1">
        </div>
      <!-- THE FOLLOWING TAB WOULD BE A REPLACEMENT OF TAGS EXAMPLE -->
      <!--<div id="tabs-2">
            <p><b>Order Date:</b> <#=OrderDate#></p>
            <p><b>Required Date:</b> <#=RequiredDate#></p>
            <p><b>Shipped Date:</b> <#=ShippedDate#></p>
        </div>-->
    </div>
</script>

[paramvir]

The js file is insufficient to reproduce your issue unless it's complete and contains all dependencies. I tested the properties used by you like flexHeight for both main and detail grid but it works fine.

To narrow down the cause of issue, try to test your script on isolated page without bootstrap or any other library ( js and css files ). Please also cofirm the version of jQuery and jQueryUI you have been using.

Also check it without use of jQueryUI tabs for detail grid.

[suvalkon]

It was working with tabs in the first instance and I need to get it working with different tabs for what is needed with different information for each job#.
I have tried to run without bootstrap and none of the css files have changed( I checked the file dates) but it makes no difference.
Is it because there is no vertical scroll bar on the primary grid?
I have tried to make one but can't get it to do it?

Here is the cshtml file details.

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="description" content="Mainstream Freight specialising in Shipping, Logistics and Containers"/>
<!--     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> -->
    <title>
         My Mainstream
      </title>
    <link rel="stylesheet" href="resources/css/redmond/jquery-ui-1.10.4.custom.min.css" type="text/css" media="all" />
<!--      <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css" /> -->
<!--     <link rel="stylesheet" href="resources/css/webstyle.css" type="text/css" media="all" /> -->
<!--      <link rel="stylesheet" href="resources/css/base.css" type="text/css" media="all"> -->
      <!--PQ Grid files-->
      <link rel="stylesheet" href="resources/paramquery-2.1.0/pqgrid.min.css" type="text/css" media="all" />
      <!--PQ Grid Office theme-->
      <link rel="stylesheet" href="resources/paramquery-2.1.0/themes/office/pqgrid.css" type="text/css" media="all" />
      <link href="/resources/css/bootstrap.css" rel="stylesheet"/>
     <script src="resources/javascript/jquery-1.11.0.min.js" type="text/javascript"></script>
<!--      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
     <script src="resources/javascript/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
   <!-- <script src="resources/javascript/jQuery.XDomainRequest.js?v=2" type="text/javascript"></script>-->

<!--      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> -->
<script src="resources/paramquery-2.1.0/pqgrid.min.js" type="text/javascript"></script>
   <script src="resources/javascript/moment.js" type="text/javascript"></script>
   <script src="/resources/javascript/bootstrap.min.js"></script>
<!--    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> -->
  <!-- <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> -->
  <script type="text/javascript" src="resources/timepicker/jquery.timepicker.js"></script>
       <link rel="stylesheet" type="text/css" href="resources/timepicker/jquery.timepicker.css" />