Title: questions on ComboGrid
Post by: tokick4 on May 02, 2013, 11:03:48 AM
I have been working with the combo grid and what I am trying to accomplish is this: I have a data grid and I used to demo as a template which works the problem is when I bring up a new entry form to enter data into the data grid I need for one of the inputs to be a combo grid of which I have gotten to work. My problem is that when the submit of the form is processed the value of the combogrid is not saving what was selected. The other question i have is can the selection of the combogird that has three fields in it populate another input field. (http://www.cdocsgo.com/pictures/pic1.jpg) (http://www.cdocsgo.com/pictures/pic2.jpg) So when the id is selected the id and the description is both saved into the datagrid on refresh. <div id="comments"><p>Comments</p>
<table id="dg" title="Code Violations" class="easyui-datagrid" style="width:700px;height:250px"
url="get_violations.php?id1=<?php echo $detail_inspection['id1']?>"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" sigleSelect="true">
<thead>
<tr>
<th field="code_number" width="50">Code Section</th>
<th field="code_description" width="300">Description</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newViolation()">New Violation</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editViolation()">Edit Violation</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeViolation()">Remove Violation</a>
</div> <!--end toolbar div-->
<div id="dlg" class="easyui-dialog" style="width: 500px; height:200px; padding:10px 20px"
closed="true" buttons="#dlg-buttons">
form <div class="ftitle">Code Violations</div>
<form id="fm" method="post" novalidat>
<div class="fitem">
<input id="inspectionId" name="inspectionId"/> <br/>
<label>Code Number</label>
<!--<input name="code_number" class="easyui-validatebox" required="true">-->
<input id="cc" name="cc"/>
</div>
<div class="fitem">
<label>Description</label>
<input name="description" class="easyui-validatebox" required="true">
</div>
</form>
(http://www.cdocsgo.com/pictures/codeViolationFormTable.jpg) Script <script type="text/javascript">
var url;
function newViolation(){
$('#dlg').dialog('open').dialog('setTitle','New Code Violation');
$('#fm').form('clear');
url = 'save_violation.php';
}
function editViolation(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit Violation');
$('#fm').form('load', row);
url = 'update_Violation.php?id='+row.id;
}
}
function saveViolation(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = JSON.parse(result);
if (result.success){
$('#dlg').dialog('close');//closes the dialog window
$('#dg').datagrid('reload');// reload the violations
}else{
$.messager.show({
title:'Error',
msg: result.msg
});
}
}
});
}
function removeViolation(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to remove this Violation?', function(r){
if (r){
$.post('remove_vailation.php',{id:row.id}, function(result){
if(result.success){
$('#dg').datagrid('reload');// reload the violation data
}else{
$.messager.show({// show error message
title: 'Error',
msg: result.msg
});
}
},'json');
}
});
}
}
<script>
$(function(){
$('#cc').combogrid({
panelWidth:500,
url: 'get_codes.php',
idField: ' id_code_violations',
textField: 'code_number',
mode:'remote',
fitColumns:true,
columns:[[
{field:'id_code_violation',title:'No.',width:25},
{field:'code_number', title:'Code Number', width: 100},
{field:'code_description', title:'Description', width: 400}
]]
});
$("input [name='mode']").change(function(){
var mode = $(this).val();
$('#cc').combogrid({
mode:mode
});
});
});
</script>
Pictures showing problems where the code_number from the combo grid is not posting the id number that is selected (http://www.cdocsgo.com/pictures/problemCombogrid.jpg) Any amount of help will be greatly appreciated
Title: Re: questions on ComboGrid
Post by: stworthy on May 02, 2013, 08:40:34 PM
Try to replace the combogrid name with 'code_number'. <input id="cc" name="code_number">
Title: Re: questions on ComboGrid
Post by: tokick4 on May 03, 2013, 03:21:58 AM
stworthy,
Thank you for responding. I replaced the input name but it will not pass the value to the input still, when I look at it in Firefox the post still show just like the picture above. How can I pass the values from the combogrid to the form probably would be the better question. I am new to this gird use.
What I am trying is to pick Code Number from New Code Violation combogrid and then would like for the Code Number and Description to populate the form. Description > Form Description.
Thanks
Jon
Title: Re: questions on ComboGrid
Post by: stworthy on May 03, 2013, 06:39:16 AM
There are some mistakes with your code: $('#cc').combogrid({
panelWidth:500,
url: 'get_codes.php',
idField: ' id_code_violations', // here is the wrong assigned value
textField: 'code_number',
mode:'remote',
fitColumns:true,
columns:[[
{field:'id_code_violation',title:'No.',width:25},
{field:'code_number', title:'Code Number', width: 100},
{field:'code_description', title:'Description', width: 400}
]]
});
Please replace it with: $('#cc').combogrid({
panelWidth:500,
url: 'get_codes.php',
idField: 'id_code_violation', // the correct value
textField: 'code_number',
mode:'remote',
fitColumns:true,
columns:[[
{field:'id_code_violation',title:'No.',width:25},
{field:'code_number', title:'Code Number', width: 100},
{field:'code_description', title:'Description', width: 400}
]]
});
Please refer to the attached example, it works fine.
Title: Re: questions on ComboGrid
Post by: tokick4 on May 05, 2013, 04:43:45 PM
Stworthy,
Thanks for point that out I totally missed that.
Thanks
Jon
|