.hi.i am a newbie to javascript and webpages especially when it comes to grid i completely get out of my brain.so kindly please help me with a solution .
my problem
i am using jqgrid from guriddo in my web page.the problem is that when i set the datasource with nothing and input values to grid,the multiselect option of the grid works abnormally that when i click the checkbox on one row some other rows are also selected simultaneously.but when i load data using json or array,it works fine.
my code
<!DOCTYPE html>
<html lang=”en”>
<head>
<!– The jQuery library is a prerequisite for all jqSuite products –>
<script type=”text/ecmascript” src=”jquery.min.js”></script>
<!– We support more than 40 localizations –>
<script type=”text/ecmascript” src=”grid.locale-en.js”></script>
<!– This is the Javascript file of jqGrid –>
<script type=”text/ecmascript” src=”jquery.jqGrid.min.js”></script>
<!– This is the localization file of the grid controlling messages, labels, etc.
<!– A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom –>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”jquery-ui.css” />
<!– The link to the CSS that the grid needs –>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”ui.jqgrid.css” />
<meta charset=”utf-8″ />
<title>jqGrid Loading Data – Million Rows from a REST service</title>
</head>
<body><table id=”jqGrid”></table>
<script type=”text/javascript”>
var applicationGrid = $(“#jqGrid”),
myData = [];$(document).ready(function () {
$(“#jqGrid”).jqGrid({
url: ‘data.json’,
// we set the changes to be made at client side using predefined word clientArray
editurl: ‘clientArray’,
datatype: “json”,
colNames: [‘id’, ‘Product’, ‘qty’, ‘free’,’closed’],
colModel: [
{ name: ‘id’, hidden: true },
{ name: ‘Product’, width: 750 },
{ name: ‘Qty’, width: 200 ,align: ‘center’ },
{ name: ‘Free’, width: 200, align: ‘center’ },
{name:’closed’,index:’closed’,width:110,align:’center’,editable: true, formatter: ‘checkbox’,
edittype:”checkbox”,editoptions:{value:”Yes:No”,defaultValue:”Yes”},formatoptions: {disabled : false}},],
loadonce: true,
viewrecords: true,
width: 780,
height: 200,
rowNum: 10,
pager: “#jqGridPager”,
multiselect: true,});
$(‘#jqGrid’).navGrid(‘#jqGridPager’,
// the buttons to appear on the toolbar of the grid
{ edit: true, add: true, del: true, search: false, refresh: false, view: false, position: “left”,
cloneToTop: false },
// options for the Edit Dialog
{
editCaption: “The Edit Dialog”,
recreateForm: true,
checkOnUpdate : true,
checkOnSubmit : true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText
}
},
// options for the Delete Dailog
{
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText
}
});
});
$(window).on(“resize”, function () {
var newWidth = $(“#jqGrid”).closest(“.ui-jqgrid”).parent().width();
applicationGrid.jqGrid(“setGridWidth”, newWidth, true);
});function addRow(){
var row={id:”0″,Product:”MYPROduct”,Qty:”1″,Free:”1″};myData = [{id:”0″,Product:”MYPROduct”,Qty:”1″,Free:”1″}];
//jQuery(“#jqGrid”).addRowData(“3″, {Product:”Product”});
jQuery(“#jqGrid”).addRowData(“3″, {id:”0”,Product: $(“#Pro”).val(),Qty:$(“#qty”).val(),Free:”0″});}
</script>Product : <input type=”text” id=”Pro” size=”35%” >
Qty : <input type=”text” id=”qty” size =”15%”>
<input type=”submit” id =”btn” onclick=”addRow()” value=”Add” ></body>
</html>
i believe i will receive some guidance soon. advance thanks for help.
Hello,
I think that the problem you have is that you have missed to set the key:true option in the grid.
This option indicates which column will act as id row. For local data sources this is obligatory.
Try with the following settings:
|
1 2 3 4 5 6 |
colModel : [ { name: ‘id’, hidden: true, key : true }, ... ], ... |
Please let me know if this solves your problem.
I have a problem in my multiselect for the code below. In the form edit mode it is able to save all selected items to the database. But while in the edit mode the first item does not show checked even though it is saved in the database. This problem appears to be only with the first item in the list. I also tried to use eric hynds multiselect. The same problem there also.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<?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?
Hello,
I’m not sure that I understand your problem.
What does multiselect plugin do? we do not know this plugin.
I’m confused to understand this:
In the form edit mode it is able to save all selected items to the database. But while in the edit mode the first item does not show checked
You speak that everything is ok in form edit, but in edit mode this have problems – what is the true?
You have a custom code with custom element – check your custom code again – what you expect and what is in real use.
Kind Regards
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
