Guriddo » sasip_hyd's Replies

sasip_hyd

Guriddo

Forum Replies Created

Viewing 2 replies - 1 through 2 (of 2 total)

Author

Replies

September 21, 2015 at 1:23 pm in reply to: Jqgrid multiselect problem. #124372

sasip_hyd

Participant

Hi Tony,

Sorry for the confusion. It is a multiselect combobox. Please see http://stackoverflow.com/questions/10847644/is-there-anyway-to-include-a-multiselect-combobox-in-a-jqgrid for example

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 which is shown in the above stackoverflow link.

Regards

Sasi

September 20, 2015 at 2:55 pm in reply to: Jqgrid multiselect problem. #124356

sasip_hyd

Participant

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.


&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Maintenance Daily Log&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;css/jquery-ui.theme.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;css/ui.jqgrid.css&quot; /&gt;
&lt;link rel=&#039;stylesheet&#039; href=&#039;css/jquery-ui.css&#039;/&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; type=&quot;text/css&quot;/&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap-multiselect.css&quot; type=&quot;text/css&quot;/&gt;
&lt;style type=&quot;text/css&quot;&gt;
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%;
}
&lt;/style&gt;

&lt;script src=&quot;js/jquery-1.11.0.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&#039;js/jquery-ui.min.js&#039;&gt;&lt;/script&gt;

&lt;script src=&quot;js/i18n/grid.locale-en.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.jqGrid.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/tinymce.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap-multiselect.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$(&quot;#list&quot;).jqGrid({
url:&#039;server.php&#039;,
datatype: &quot;json&quot;,
mtype: &quot;POST&quot;,
colNames: [&quot;SL&quot;,&quot;Date&quot;, &quot;Shift&quot;, &quot;Equipment&quot;,&quot;Resources-1&quot;, &quot;Resources&quot;, &quot;Works done&quot;, &quot;Spares used&quot;, &quot;Status&quot;],
colModel: [
{name:&#039;id&#039;,index:&#039;id&#039;, width:30,classes: &#039;cvteste&#039;, hidden:true},
{ name:&#039;date&#039;,index:&#039;date&#039;,search: true,searchoptions: {searchhidden: true},editrules:{date:true,required:true},datefmt:&#039;dd-mm-Y&#039;, width:70, sortable:false,classes: &#039;cvteste&#039;,editable:true, editoptions:{size:10, dataInit:function(el){
$(el).datepicker({dateFormat:&#039;dd-mm-yy&#039;});
}
}},
{ name:&#039;shift&#039;,index:&#039;shift&#039;,search: true,searchoptions: {searchhidden: true}, edittype:&#039;select&#039;, formatter:&#039;select&#039;, editoptions:{value:&quot;G:G;A:A;B:B;C:C&quot;}, width:35,align:&quot;center&quot;,classes: &#039;cvteste&#039;,editable:true },
{name:&#039;equipment&#039;,index:&#039;equipment&#039;,width:110,classes: &#039;cvteste&#039;,editable:true, search: true,searchoptions: {searchhidden: true},edittype:&#039;select&#039;, editoptions:{dataUrl:&#039;equipments.php&#039;}},
{name:&quot;resources-1&quot;, index:&quot;resources-1&quot;,width:105,sortable:false, editable:false},
{name: &#039;resources&#039;, index: &#039;resources&#039;, width: 105, align: &#039;left&#039;, editable: true, formatter: &#039;select&#039;, edittype: &#039;select&#039;, hidden:true, editrules:{edithidden:true}, editoptions: { /*dataUrl: &#039;resources.php&#039;,
postData: function (rowid, value, cmName) {
return {
myId: rowid
}
},*/
dataUrl: function(){
var srow = jQuery(&quot;#list&quot;).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
var myUrl = &quot;resources.php&quot;;
if( srow ) {
myUrl = &#039;resources.php?myId=&#039;+srow;
}
return myUrl;
},
multiselect:true,
dataInit: function (elem) {
setTimeout(function () {
$(elem).multiselect({
//minWidth: 150, //&#039;auto&#039;,
// height: &quot;auto&quot;,
// selectedList: 2,
// checkAllText: &quot;all&quot;,
// uncheckAllText: &quot;no&quot;,
// noneSelectedText: &quot;Any&quot;,
/*open: function () {
var $menu = $(&quot;.ui-multiselect- menu:visible&quot;);
$menu.width(&quot;auto&quot;);
return;
}*/
});
}, 2000);
},
multiple: true
// defaultValue: &#039;IN&#039;
}
},
{ name: &quot;workdone&quot;, index: &quot;workdone&quot;, width: 80, sortable: false, editable: true,
//edittype: &quot;textarea&quot;
edittype:&#039;custom&#039;,
editoptions: {
custom_element: function (value, options) {
var elm = $(&quot;&lt;textarea&gt;&lt;/textarea&gt;&quot;);
elm.val(value);
// give the editor time to initialize
setTimeout(function () {
//tinymce.remove();
//var ctr = $(&quot;#&quot; + options.id).tinymce();
//if (ctr !== null) {
// ctr.remove();
//}
try {
tinymce.remove(&quot;#&quot; + options.id);
} catch(ex) {}
tinymce.init({selector: &quot;#&quot; + options.id, plugins: &quot;link&quot;});
}, 50);
return elm;
},
custom_value: function (element, oper, gridval) {
var id;
if (element.length &gt; 0) {
id = element.attr(&quot;id&quot;);
} else if (typeof element.selector === &quot;string&quot;) {
var sels = element.selector.split(&quot; &quot;),
idSel = sels[sels.length - 1];
if (idSel.charAt(0) === &quot;#&quot;) {
id = idSel.substring(1);
} else {
return &quot;&quot;;
}
}
if (oper === &quot;get&quot;) {
return tinymce.get(id).getContent({format: &quot;row&quot;});
} else if (oper === &quot;set&quot;) {
if (tinymce.get(id)) {
tinymce.get(id).setContent(gridval);
}
}
}}
},
{name:&#039;sparesused&#039;,index:&#039;sparesused&#039;,search: true,searchoptions: {searchhidden: true}, width:150, sortable:false,classes: &#039;cvteste&#039;,editable:true, editoptions:{size:100}},
{name:&#039;status&#039;,index:&#039;status&#039;,width:110,classes: &#039;cvteste&#039;,editable:true, search: true,searchoptions: {searchhidden: true},edittype:&#039;select&#039;, editoptions:{dataUrl:&#039;status.php&#039;}}
],
pager: &quot;#pager&quot;,
rowNum: 10,
rowList: [10, 20, 30],
sortname: &quot;date&quot;,
sortorder: &quot;asc&quot;,
viewrecords: true,
gridview: true,
autoencode: true,
caption: &quot;Maintenane Daily Log&quot;,
editurl: &quot;update.php&quot;
});
$(&quot;#list&quot;).jqGrid(&quot;navGrid&quot;, &quot;#pager&quot;, {add: true, edit:true}, {closeOnEscape:true, recreateForm: true, width:800},{closeOnEscape:true, recreateForm: true, width:800}
);
});
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;&lt;table id=&quot;list&quot;&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

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>

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>

$(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>

</body>

</html>

and in my resources.php I have as below

&lt;?php
if(isset($_REQUEST[&#039;myId&#039;]))
{
$rowid=$_REQUEST[&#039;myId&#039;];
require_once &#039;config.php&#039;;
$result1 = mysqli_query($con,&quot;SELECT resources FROM worksdata WHERE id=$rowid limit 1&quot;) or die(mysql_error());
$row=mysqli_fetch_assoc($result1);
$value = $row[&#039;resources&#039;];

$result=mysqli_query($con,&quot;SELECT * FROM resources&quot;)
or die(mysql_error());
echo &quot;&lt;select multiple=&#039;multiple&#039;&gt;&quot;;
while($row=mysqli_fetch_assoc($result))
{

echo &#039;&lt;option value=&quot;&#039;.$row[&#039;resource&#039;].&#039;&quot;&#039;;
if (strpos($value,$row[&#039;resource&#039;]) !== false)
echo &quot; selected=&#039;selected&#039; &quot;;

echo &#039;&gt;&#039;;
echo $row[&#039;resource&#039;];
echo &#039;&lt;/option&gt;&#039;;

}
echo &quot;&lt;/select&gt;&quot;;
}

else
{
require_once &#039;config.php&#039;;
$result=mysqli_query($con,&quot;SELECT * FROM resources&quot;)
or die(mysql_error());
echo &quot;&lt;select multiple=&#039;multiple&#039;&gt;&quot;;
while($row=mysqli_fetch_assoc($result))
{

echo &#039;&lt;option value=&quot;&#039;.$row[&#039;resource&#039;].&#039;&quot;&#039;;
echo &#039;&gt;&#039;;
echo $row[&#039;resource&#039;];
echo &#039;&lt;/option&gt;&#039;;

}
echo &quot;&lt;/select&gt;&quot;;
}
?&gt;

<?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?

This reply was modified 10 years, 7 months ago by tony. Reason: add code tags

Author

Replies

Viewing 2 replies - 1 through 2 (of 2 total)