Issue is pagination icons in jqgrid are not visible. I could see that the .png images are not found in my console.
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
Also even though width is 'auto' there is a horizontal scroll bar appearing.
The data gets loaded properly and my DB pagination is working fine. on first page only hand icon is visible and when clicked goes to page 2. but on page 2 no icon is visible.
I downloaded again jqgrid but no .png icons were there in the installation
My jsp code goes as below -
<html>
<head>
<style>
div.ui-jqgrid-titlebar {
height: 10px;
}
#sidebar {
float: left;
width: 150px;
padding: 10px 10px;
// background-color:yellow
}
#container {
margin: 0px 320px 0px 170px;
text-align: center;
// background-color:red
}
</style>
<link rel="stylesheet" href="../styles/ui.all.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../styles/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../styles/ui.jqgrid.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<link href="../images/favicon.ico" type="image/x-icon" rel="shortcut icon">
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript">
//index is used to override the column name passed to the server in the query param sidx
var myColModel = [
{ name: "promId", index: 'Promotionid', width: 60 },
{ name: "promoCode", index: 'promotioncode', width: 110 },
{ name: "name", index: 'name', width: 160 },
{ name: "description", index: 'description', width: 250 },
{ name: "distCode", index: 'distributor_code', width: 110 },
{ name: "status", index: 'status', width: 110 },
{ name: "startDate", index: 'start_date', width: 100, sorttype: "date", align: "right" },
{ name: "endDate", index: 'end_date', width: 100, sorttype: "date", align: "right" },
{ name: "discount", index: 'discount', width: 90 },
{ name: "extension", index: 'extension', width: 90 }
];
$(function () {
$("#list").jqGrid({
url: 'some/url',
datatype: "json",
mtype: "GET",
colNames: ["Promo ID", "Promo Code", "Name", "Description", "Distributor Code", "Status", "Start Date", "End Date", "Discount", "Extension"],
colModel: myColModel,
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "end_date",
sortorder: "asc",
viewrecords: true,
gridview: true,
rownumber: true,
autoencode: true,
width: 'auto',
height: 'auto',
caption: "Promotion Summary"
});
});
</script>
</head>
<br></br>
<body>
<br>
<br>
<center>
<hr />
<div class="clear">
<%# include file="header.jsp"%>
</div>
</center>
<div class="sidebar">
<%# include file="/admin/User.jsp"%>
</div>
<br>
<br>
<div id="container" border="2px solid green"
style="left: 5%; position: relative;">
<div id="tableContent" width="100%">
<div>Summary</div>
<div style = "margin: 0px auto 0px 150px;">
<table id="list"><tr><td></td></tr>
</table>
<div id="pager"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I found that the images were not downloaded from the version I installed from jqgrid website. Not sure why. so I manually downloaded images from internet and worked fine.
Related
I want to make checkbox mode single in kendo treeview / ui for jquery.
But there is no official option for jquery. I found solution to scan all treeview and uncheck others one by one. But it puts me in trouble because i have 3-4 depth and over +500 items in my treeview. When i select 2nd time, it takes around 1-2 seconds and freeze all treeview for a while.
This is a demo for dummy solution that i use. But it's not smooth for my actual treeview.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section wide k-content">
<div id="demo-section-title" class="treeview-flex">
<div>
<h3>
Select nodes, folders and drag them between the TreeViews
</h3>
</div>
</div>
<div class="treeview-flex">
<div id="treeview-kendo"></div>
</div>
<div class="treeview-flex">
<div>
<h4>Drag and Drop</h4>
</div>
</div>
<div class="treeview-flex">
<div id="treeview-telerik"></div>
</div>
</div>
<script id="treeview" type="text/kendo-ui-template">
# if (!item.items && item.spriteCssClass) { #
#: item.text #
<span class='k-icon k-i-close kendo-icon'></span>
# } else if(!item.items && !item.spriteCssClass) { #
<span class="k-sprite pdf"></span>
#: item.text #
<span class='k-icon k-i-close telerik-icon'></span>
# } else if (item.items && item.spriteCssClass){ #
#: item.text #
# } else { #
<span class="k-sprite folder"></span>
#: item.text #
# } #
</script>
<script>
function traverse(nodes, callback) {
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var children = node.hasChildren && node.children.data();
callback(node);
if (children) {
traverse(children, callback);
}
}
}
function onCheck(e) {
var dataItem = this.dataItem(e.node);
var rootNodes = $("#treeview-kendo").getKendoTreeView().dataSource.data();
traverse(rootNodes, function(node) {
if (node != dataItem) {
node.set("checked", false);
}
});
}
$("#treeview-kendo").kendoTreeView({
template: kendo.template($("#treeview").html()),
dataSource: [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 8, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 9, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}],
//dragAndDrop: true,
checkboxes: {
checkChildren: true
},
check: onCheck,
loadOnDemand: true
});
</script>
<style>
#media screen and (max-width: 680px) {
.treeview-flex {
flex: auto !important;
width: 100%;
}
}
#demo-section-title h3 {
margin-bottom: 2em;
text-align: center;
}
.treeview-flex h4 {
color: #656565;
margin-bottom: 1em;
text-align: center;
}
#demo-section-title {
width: 100%;
flex: auto;
}
.treeview-flex {
flex: 1;
-ms-flex: 1 0 auto;
}
.k-treeview {
max-width: 240px;
margin: 0 auto;
}
#treeview-kendo .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
#treeview-telerik .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.demo-section {
margin-bottom: 5px;
overflow: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.rootfolder {
background-position: 0 0;
}
.folder {
background-position: 0 -16px;
}
.pdf {
background-position: 0 -32px;
}
.html {
background-position: 0 -48px;
}
.image {
background-position: 0 -64px;
}
</style>
</div>
</body>
</html>
There is an option mode:"single" for Angular.
single mode checkbox for treeview in kendo ui for Angular
But i'm looking same kendo ui for Jquery.
You don't need to manually traverse the nodes. You can leverage JQuery to get the appropriate selector and let it do it for you in the check event (documentation).
Basically what you'd do is:
Handle the check event
Get the inputs by selecting the treeview's k-checkbox-wrapper class' input
Set the checked property to false
Set the node that was checked back to true
Example:
check: function(e) {
$("#treeview .k-checkbox-wrapper input").prop("checked", false);
$(e.node).find("input").prop("checked", true);
}
Fiddle: https://dojo.telerik.com/ALEJetoD
In the jQuery-jqGrid code below, pagination is not working. I would appreciate any assistance in resolving this issue.
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<meta charset="utf-8" />
<title>jq-grid-1000000</title>
</head>
<body>
<style type="text/css">
/* set the size of the datepicker search control for Order Date*/
#ui-datepicker-div { font-size:11px; }
.ui-datepicker { z-index: 2000 }
/* set the size of the autocomplete search control*/
.ui-menu-item {
font-size: 11px;
}
.ui-autocomplete {
z-index: 2000;
font-size: 11px;
}
</style>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: "GET",
datatype: "jsonp",
page: 1,
colModel: [
{ label : "Order ID",
name: 'OrderID',
key: true,
width: 75
},
{
label: "Customer ID",
name: 'CustomerID',
width: 150
},
{
label: "Order Date",
name: 'OrderDate',
width: 150,
sorttype:'date'
},
{
label : "Ship Name",
name: 'ShipName',
width: 150
},
{
label: "Freight",
sorttype: 'number',
name: 'Freight',
width: 150
}
],
loadonce: true,
viewrecords: true,
width: 780,
height: "auto",
page: 1,
rowNum: 3,
pager: "#jqGridPager",
gridview: true,
autoencode: true
});
// activate the build in search with multiple option
$('#jqGrid').jqGrid('navGrid',"#jqGridPager", {
search: true, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
},
{}, // edit options
{}, // add options
{}, // delete options
{
multipleSearch: true,
multipleGroup : true,
}
);
});
</script>
</body>
</html>
`
The paging will not work, because you use the option loadonce: true. With this option after the first request the datatype is going local with 3 records and you do not have more rows to page.
Disable this option and your paging will work.
I have a problem in my multiselect for the code below. While adding new row when I select all items in the list of ‘resources’ column (this field is multiselect with checkbox) and save the row, all data of the row saves correctly to the database. But when the same row is retrieved for editing I see all the items of resources selected except the first one. In the above code I am using bootstrap multiselect plugin. But same is the behaviour when I use eric hynds multiselect plugin. This problem appears to be only with the first item in the list.
<html>
<head>
<title>Maintenance Daily Log</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel='stylesheet' href='css/jquery-ui.css'/>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 70%;
}
table, th, td {
font-size: 100%;
}
#editmodlist {
font-size: 70%;
}
div#editmodlist {
width: 1000px;
font-size: 130%;
}
.ui-jqgrid {font-size:0.5em;}
div .mce-tinymce {
margin-left: 5px
}
div .mce-btn button, div .mce-menu-item-normal {
font-size: 80%;
}
ul .ui-multiselect-checkboxes {
font-size: 130%;
}
#ui-datepicker-div {
font-size:120%;
}
div .ui-multiselect-header {
font-size: 100%;
}
.ui-multiselect-menu {
font-size: 150%;
width: 100%
}
button .ui-multiselect {
width: 100%;
}
</style>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/jquery-ui.min.js'></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url:'server.php',
datatype: "json",
mtype: "POST",
colNames: ["SL","Date", "Shift", "Equipment","Resources-1", "Resources", "Works done", "Spares used", "Status"],
colModel: [
{name:'id',index:'id', width:30,classes: 'cvteste', hidden:true},
{ name:'date',index:'date',search: true,searchoptions: {searchhidden: true},editrules:{date:true,required:true},datefmt:'dd-mm-Y', width:70, sortable:false,classes: 'cvteste',editable:true, editoptions:{size:10, dataInit:function(el){
$(el).datepicker({dateFormat:'dd-mm-yy'});
}
}},
{ name:'shift',index:'shift',search: true,searchoptions: {searchhidden: true}, edittype:'select', formatter:'select', editoptions:{value:"G:G;A:A;B:B;C:C"}, width:35,align:"center",classes: 'cvteste',editable:true },
{name:'equipment',index:'equipment',width:110,classes: 'cvteste',editable:true, search: true,searchoptions: {searchhidden: true},edittype:'select', editoptions:{dataUrl:'equipments.php'}},
{name:"resources-1", index:"resources-1",width:105,sortable:false, editable:false},
{name: 'resources', index: 'resources', width: 105, align: 'left', editable: true, formatter: 'select', edittype: 'select', hidden:true, editrules:{edithidden:true}, editoptions: { /*dataUrl: 'resources.php',
postData: function (rowid, value, cmName) {
return {
myId: rowid
}
},*/
dataUrl: function(){
var srow = jQuery("#list").jqGrid('getGridParam','selrow');
var myUrl = "resources.php";
if( srow ) {
myUrl = 'resources.php?myId='+srow;
}
return myUrl;
},
multiselect:true,
dataInit: function (elem) {
setTimeout(function () {
$(elem).multiselect({
//minWidth: 150, //'auto',
// height: "auto",
// selectedList: 2,
// checkAllText: "all",
// uncheckAllText: "no",
// noneSelectedText: "Any",
/*open: function () {
var $menu = $(".ui-multiselect- menu:visible");
$menu.width("auto");
return;
}*/
});
}, 2000);
},
multiple: true
// defaultValue: 'IN'
}
},
{ name: "workdone", index: "workdone", width: 80, sortable: false, editable: true,
//edittype: "textarea"
edittype:'custom',
editoptions: {
custom_element: function (value, options) {
var elm = $("<textarea></textarea>");
elm.val(value);
// give the editor time to initialize
setTimeout(function () {
//tinymce.remove();
//var ctr = $("#" + options.id).tinymce();
//if (ctr !== null) {
// ctr.remove();
//}
try {
tinymce.remove("#" + options.id);
} catch(ex) {}
tinymce.init({selector: "#" + options.id, plugins: "link"});
}, 50);
return elm;
},
custom_value: function (element, oper, gridval) {
var id;
if (element.length > 0) {
id = element.attr("id");
} else if (typeof element.selector === "string") {
var sels = element.selector.split(" "),
idSel = sels[sels.length - 1];
if (idSel.charAt(0) === "#") {
id = idSel.substring(1);
} else {
return "";
}
}
if (oper === "get") {
return tinymce.get(id).getContent({format: "row"});
} else if (oper === "set") {
if (tinymce.get(id)) {
tinymce.get(id).setContent(gridval);
}
}
}}
},
{name:'sparesused',index:'sparesused',search: true,searchoptions: {searchhidden: true}, width:150, sortable:false,classes: 'cvteste',editable:true, editoptions:{size:100}},
{name:'status',index:'status',width:110,classes: 'cvteste',editable:true, search: true,searchoptions: {searchhidden: true},edittype:'select', editoptions:{dataUrl:'status.php'}}
],
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "date",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Maintenane Daily Log",
editurl: "update.php"
});
$("#list").jqGrid("navGrid", "#pager", {add: true, edit:true}, {closeOnEscape:true, recreateForm: true, width:800},{closeOnEscape:true, recreateForm: true, width:800}
);
});
</script>
</head>
<body>
<div><table id="list"><tr><td></td></tr></table>
<div></div>
</div>
</body>
</html>
and in my resources.php I have as below
<?php
if(isset($_REQUEST['myId']))
{
$rowid=$_REQUEST['myId'];
require_once 'config.php';
$result1 = mysqli_query($con,"SELECT resources FROM worksdata WHERE id=$rowid limit 1") or die(mysql_error());
$row=mysqli_fetch_assoc($result1);
$value = $row['resources'];
$result=mysqli_query($con,"SELECT * FROM resources")
or die(mysql_error());
echo "<select multiple='multiple'>";
while($row=mysqli_fetch_assoc($result))
{
echo '<option value="'.$row['resource'].'"';
if (strpos($value,$row['resource']) !== false)
echo " selected='selected' ";
echo '>';
echo $row['resource'];
echo '</option>';
}
echo "</select>";
}
else
{
require_once 'config.php';
$result=mysqli_query($con,"SELECT * FROM resources")
or die(mysql_error());
echo "<select multiple='multiple'>";
while($row=mysqli_fetch_assoc($result))
{
echo '<option value="'.$row['resource'].'"';
echo '>';
echo $row['resource'];
echo '</option>';
}
echo "</select>";
}
?>
What may be the problem here?
Newbie with Kendo UI here, thanks for the help. Having a problem with a selected listview inside a grid popup editor window.
It displays and is selectable, but I can't get it to send the selected listview data to the JSON string
the json string sent to the server:
{"blog"=>{"id"=>"", "title"=>"New title", "content"=>"New content", "published"=>"", "img_name"=>""}}
My code, kendo-grid and kendo-listview:
<script type="text/x-kendo-tmpl" id="image_template">
<div class="product">
<img src="/assets/blog/${img_name}" width="100" />
</div>
</script>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input type="text" id="title" name="Title" data-bind="value:title">
</div>
</div>
<div class="control-group">
<label class="control-label" for="published">Published</label>
<div class="controls">
<input type="checkbox" id="published" data-bind="checked: published" />
</div>
</div>
<textarea id="editor" name="content" data-bind="value:content"></textarea>
<div id="listView"></div>
<div class="control-group">
<label class="control-label" for="img_name">Image Name</label>
<div class="controls">
<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>
</div>
</div>
</form>
</script>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "/posts";
var blogimages = [
{ "img_name": "image_one.jpg"},
{ "img_name": "image_two.jpg"},
{ "img_name": "image_three.jpg"},
{ "img_name": "image_four.jpg"},
{ "img_name": "image_five.jpg"}
];
imageSource = new kendo.data.DataSource({
data: blogimages
});
imageSource.read();
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: function(posts) {
return crudServiceBaseUrl + "/" + posts.id;
},
dataType: "json",
contentType: "application/json",
type: "PUT"
},
destroy: {
url: function(posts) {
return crudServiceBaseUrl + "/" + posts.id
},
dataType: "json",
type: "DELETE"
},
create: {
url: crudServiceBaseUrl,
dataType: "json",
contentType: "application/json",
type: "POST"
},
batch:false,
parameterMap: function(posts, type) {
if (type === "create") {
return JSON.stringify({ post: posts });
}
else if(type === "update") {
return JSON.stringify({ post: posts }, replacer);
}
}
},
pageSize: 10,
schema: {
model: {
id: "id",
fields: {
title: { editable: true, defaultValue: "New title" },
content: { editable: true, defaultValue: "New content" },
published: {editable: true},
img_name: {editable: true}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
navigatable: true,
sortable: {
mode: "single",
allowUnsort: false
},
pageable: true,
selectable: "row",
height: 490,
toolbar: ["create"],
editable: {
mode: "popup",
template: $("#popup_editor").html()
},
edit: function(e) {
$("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull"
]
});
$("#listView").kendoListView({
dataSource: imageSource,
selectable: "multiple",
change: onChange,
template: kendo.template($("#image_template").html())
}).data("kendoGrid");
},
save: function(e) {
},
columns: [
{ field: "title",title:"Title", width: "25%" },
{ field: "created_at", title:"Created", width: "20%" },
{ field: "updated_at", title:"Updated", width: "20%" },
{ field: "published", title:"Published", width: "10%" },
{ command: ["edit", "destroy"], title: " ", width: "20%" }]
});
function onChange() {
var index = this.select().index();
var dataItem = this.dataSource.at(index);
$('#img_name').val(dataItem.img_name);
}
replacer = function(key, value){
if (key=="id"||key=="created_at"||key=="updated_at"){
return undefined;
}else{
return value;
}
}
});
</script>
<style scoped>
.product
{
float: left;
width: 100px;
height: 60px;
margin: 5px;
padding: 5px;
border: 1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-image: none;
cursor: pointer;
overflow: hidden;
}
.product img
{
float: left;
width: 100px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.k-listview:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.k-listview
{
border: 0;
padding: 0 0 20px 0;
min-width: 0;
}
</style>
I can successfully send img_name data through the input text
<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>
But I can't get it to change with onChange function in the listview
Any thoughts on this?
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>Search By MRN</li>
<li>Search By Demo</li>
#*<li>Return Table</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
If you have the div of both grids set to autowidth: true, the grid should expand to the width of the parent element. In this case if the parent element of both grids is the same the grids should be the same width.
Another messy option would be to you could specify your columns widths in the first grid to add up to be equivalent widths of the second grid.
For reference you can examine the autowidth property on
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
Try completely removing searchPatient and searchEncounter divs, and see if something changes. If yes, some differences inside them are affecting the sibling div containing the resultant grids.