I am working on a jqGrid for two different but similar searches on a site. The idea is to have two different divs on a popup window. One that has search fields and the other that displays the results. The functionality is fine, but the aesthetics are bugging me a little bit. For one thing the grid comes up as a different size in one. I use very similar code for both pop up windows however...
<div>
<div id="searchPatient" class="float-left">
<ul>
<li><a href="#searchByMRN">Search By MRN</a></li>
<li><a href="#searchByDemographics">Search By Demo</a></li>
@*<li><a href="#retTable">Return Table</a></li>*@
</ul>
@Html.Partial("_SearchByMRN")
@Html.Partial("_SearchByDemographic")
@*@Html.Partial("_RetTable")*@
</div>
<div class="content-wrapper clear-fix float-left" style="height: 1px; padding: 10px;">
Search For Patient Return Results
<table id="list" class="scroll"></table>
</div>
<div id="resultDiv" style="float: right; clear:both">
</div>
</div>
$(document).ready(function () {
$("#list").jqGrid({
shrinkToFit: false,
autowidth: true,
datatype: 'jsonstring',
mtype: 'POST',
colNames: [
'Last Name',
'First Name',
'DOB',
'Gender',
'EMPIID',
'MedipacId',
'EPCID'
],
colModel: [
{ name: 'Last_Name', width: 115, align: 'left' },
{ name: 'First_Name', width: 115, align: 'left' },
{ name: 'DOB', width: 115, align: 'left' },
{ name: 'GENDER', width: 115, align: 'left' },
{ name: 'EMPIID', width: 115, align: 'left' },
{ name: 'medipacId', width: 145, align: 'left' },
{ name: 'EPCID', width: 145, align: 'left' }
],
...//unnecessary settings and what-not
)};
)};
That code sets up this window...
<div>
<div id="searchEncounter" class="float-left">
@using (Html.BeginForm("searchEncounterByCriteria", "SearchEncounter", new { popId = popId }, FormMethod.Post, new { id = "SearchPatID" })) {
<ul>
<li>First Name</li>@Html.TextBox("fNameTB", null, new { id = "fNameTB" })
<li>Last Name</li>@Html.TextBox("lNameTB", null, new { id = "lNameTB" })
<li>MRN</li>@Html.TextBox("MRN", null, new { id = "MRN" })
<li>Hospital Fin</li>@Html.TextBox("HospFin", null, new { id = "HospFin" })
</ul>
<br />
<p><input id="sPat" type="submit" value="search For This Patient" class="button" style="float: left; width:auto"/></p>
}
</div>
<div class="content-wrapper clear-fix float-left" style="height: 1px; padding: 10px;">
Search For Encounter Return Results
<table id="list" class="scroll"></table>
</div>
<div id="resultDivSE" style="float: right; clear:both">
</div>
</div>
$(document).ready(function () {
$("#list").jqGrid({
shrinkToFit: false,
autowidth: true,
datatype: 'jsonstring',
mtype: 'POST',
colNames: [
'MRN',
'Hospital Fin',
'First Name',
'Last Name',
'Date of birth',
'Completed Pathway',
'Completed Pathway Reason',
'PCP Appointment',
'Specialist Appointment',
'Admit Date'
],
colModel: [
{ name: 'MRN', width: 125, align: 'left' },
{ name: 'Hospital_Fin', width: 145, align: 'left' },
{ name: 'First_Name', width: 115, align: 'left' },
{ name: 'Last_Name', width: 115, align: 'left' },
{ name: 'Date_of_birth', width: 145, align: 'left' },
{ name: 'Completed_Pathway', width: 125, align: 'left' },
{ name: 'Completed_Pathway_Reason', width: 165, align: 'left' },
{ name: 'PCP_Appointment', width: 115, align: 'left' },
{ name: 'Specialist_Appointment', width: 125, align: 'left' },
{ name: 'Admit_Date', width: 185, align: 'left' }],
...//superfluous settings that have nothing to do with Grid...
)};
)};
That code sets up this window...
Now when debugging using chrome I find out that the widths are being set. How they are doing it I don't know. I do know that the element.style {} is being set to
element.style {
width: 870px;
}
In the second case... And in the first case it is being set too...
element.style {
width: 340px;
}
The actual code says
<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_list" dir="ltr" style="width: 870px;">
in the second case and
<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_list" dir="ltr" style="width: 340px;">
In the first case.
I am not sure why this is occuring and how to change it? What is determining how the width is being set?
Any ideas or advice on how to set widths more consistently? I want the first grid to be as wide as the second one.
Thanks
