I just typed up another post and halfway through I figured out my problem. Let's see if it happens again.
I need to be able to update another drop down if a given one is selected. My problem is the secondary drop down isn't loaded the first time; nothing happens on the page. If the user selects the same element a second time, then everything works fine.
I'm programatically generating a bunch of ComboBoxes:
var item = new Ext.form.ComboBox({
store: store,
id: input.id,
name: input.id,
displayField: 'description',
valueField: 'id',
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select one...',
typeAhead: false,
editable: true,
allowBlank: allowBlank,
selectOnFocus:true,
fieldLabel: input.label,
listeners: {
scope: this,
'select': checkDependencies
},
autoHeight: true
});
My problem occurs when I try to update the dependent drop down. Here's the function that gets called when the user selects an option:
function checkDependencies(el, ev){
debug(el);
debug(el.value);
var val = el.value;
if (Ext.isArray(dependencies[val])) {
var id = dependencies[val]['changeId'];
var input = Ext.getCmp(id);
var vals = dependencies[val]["vals"];
input.store.removeAll();
gridForm.doLayout();
debug("num elements: " + vals.length);
input.autoHeight = true;
for (var i=0;i<vals.length;i++) {
input.store.add(vals[i]);
}
gridForm.doLayout(false,true);
}
}
It hits all the debug lines. There are elements in the list, but like I said, the first time the user selects an element it doesn't work, but subsequent selections work fine.
I ended up putting doLayouts eveywhere, but it didn't seem to help.
Try setting queryMode: 'local' on the secondary box, and in your checkDependencies, doing input.lastQuery = ''.
Related
I am using jqGrid 4.3 I need to populate one select with the option of the other select.
I have One .jsp consulta.jsp in this file I do the first database query and this is OK. I can populate this select in jqGrid. but I have problems when I try to populate the second select or select that depend on the select of Estado. I have tried a lot of ways but I don't know which is the problem.
var estados = httpGet('url/consulta.jsp');
var estados_limpio = estados.trim();
estados_limpio = estados_limpio.substring(0,estados_limpio.length-1);
{ name: 'Estado',
index: 'Estado',
width: anchoP(ancho, 10),
align: 'left',
editable:true,
edittype:"select",
editoptions:
{value:estados_limpio}, //THIS DATA LOADS OK.
dataEvents: [
{
type: 'change',
fn: function(e){
var thisval = $(e.target).val();
//IN THE BELOW LINE I HAVE PROBLEMS I TRY TO LOAD THE DATA IN DIFERENT WAYS BUT IT WAS IMPOSIBLE
$.get('http://URL/consulta_motivo2.jsp?id_motivo='+thisval, function(data) {
var res = $(data).html();
$("#"+rowid+"_Motivo").html(res);
});
}
}
]
},
{ name: 'id_motivo_consulta',
index: 'id_motivo_consulta',
hidden: true
},
{ name: 'Motivo',
index: 'Motivo',
width: anchoP(ancho, 20),
align: 'left',
editable: true,
edittype: 'select',
editoptions: {value:motivos}
}
When I execute the file consulta.jsp It return me this:
A:Asignada;C:Confirmada;L:Cancelada;N:No asistio;R:Reprograma;
and this is Ok.
When I execute the file consulta_motivo2.jsp It return me this:
<SELECT>
<OPTION>data</OPTION>
</SELECT>
The jsp Query is OK. The problem is in load Motivo data
Your problem is maybe that your response from consulta_motivo2.jsp contain select tag. In order to put the html content in already created select you will need to have only option tag and data.
Look at this Guriddo jqGrid example which do exactly what you try to do
I need to apply special css for selected combo values so I want to add class in combo.el therefore I wanted to use onRender method of combobox but not sure How to write. I am not getting hold in listener so Can any one please help me to solve this.
I tried :
H1 = {
xtype: 'combobox',
valueField: 'title',
displayField: 'title',
parentGrid : me,
dataIndex:header.getAttribute("DATAINDEX"),
queryMode: 'local',
multiSelect: true,
delimiter : ";",
isFilterDataLoaded: false,
listeners:{
focus: me.onComboFilterFocus,
//onRender : me.onRender // Not getting hold here.
}
}
Replace Listeners code with below lines.
listeners:{
focus : function(me, eOpts)
{
},
render : function (me, eOpts)
{
// You can add alert or debugger here..
// alert('Hi');
// In case if you want to debug this in IE or Chrome add debugger
// debugger;
}
}
If I use 'x-form-search trigger' as iconCls in a button, the search(magnifying glass) icon appears as an image inside of the button. How do I make the icon the button and not an image inside the button?
Or is there any other way to get the search icon as a button?
Instead of adding a button with search icon you can write a trigger click function and than on click of the search icon i.e a trigger of the combo you can write your logic or call a function
Below is the example
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
onTrigger1Click: function(event) {
alert('WRITE YOUR LOGIC HERE');
},
});
I working on a kendo ui grid. The grid is not-editable as default.
In the toolbar is a 'edit' button. When the user clicks on it, the grid should be editable in batch mode like this.
The only solution to get this work is remove and recreate the grid/datasource with new properties (editable:true etc).
This works as expected. Now I want to set the focus on the first row/cell, so that the user can see that the grid is editable now (in the example below the row becomes an input field).
Any suggestions for this?
Here is a fiddle for this.
$('.k-grid-edit').on('click', function (e) {
e.preventDefault();
// remove old grid
$('#grid').html('');
// recreate grid with edit: true and new datasource
$('#grid').kendoGrid({
dataSource: dataSourceInEdit,
editable: true,
columns: [{
field: 'TableId',
title: 'Id',
width: 50
}, {
field: 'Area',
title: 'Area'
}, {
field: 'Table',
title: 'Table',
width: 60
}, {
command: 'destroy',
title: ' ',
width: 100
}]
}).data("kendoGrid");
}); // end edit
Okay, I got it:
These 2 lines make it happen:
var grid = $("#rt_tableGrid").data("kendoGrid");
grid.editRow($("#rt_tableGrid tr:eq(1)"));
Certainly only on my local script, in the Fiddle I cant´t get it to work.
Although in the Docu is written: Requires "inline" or "popup"
Documentation here
The custom_value of place_id is set to whichever row I click first. Subsequent clicked rows will all use that same value, regardless of their actual value. Why?
example:
place_id foo_name bar_value
10 blah abc
11 blah2 fgr
click the row with the place_id of 10 and click "edit" and the form that appears will have 10 for the place_id value. Make a change and save it then click the next row down. The form will still have the place_id of 10 though all other values will be correct.
My code:
The column place_id looks like this:
{name:'place_id', index:'place_id', editable: true, edittype:'custom',
editoptions: { custom_element:myelem,custom_value:myval }}
The myval function is:
function myval(elem){
return elem.val();
}
What I need is for the myval to be set to the correct place_id for the row being edited. I looked at the elem object in Firebug and I see that it always has the value of whichever row was first clicked but I don't understand why nor do I see where I can grab the correct value from. Any suggestions are appreciated (I tried asking on the jqgrid forums but nothing came of it so I'm turning to stackoverflow).
*Edit: If I use edittype:'text' rather than edittype:'custom' I get the correct values displayed and passed but then the column is editable and it should only be visible but not editable.
Full code:
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'/foo/bar/results',
datatype: 'json',
mtype: 'POST',
colNames:['Place ID', 'Site ID', 'Site Name', 'API ID', 'M Type'],
colModel :[
{name:'place_id', index:'place_id', key: true, sorttype:'integer',
width:70, editable: true, edittype:'custom',
editoptions: {custom_element:myelem,custom_value:myval }},
{name:'site_id', index:'site_id', sorttype:'integer', width:70,
editable: true, edittype: 'select', editrule: {required: true},
editoptions:{value:getSites(), size:30}},
{name:'site_name', index:'site_name', width:150, editable: false,
editrule: {required: true}, editoptions: {size:30}},
{name:'api_id', index:'api_id', sorttype:'integer', width:75,
editable: true, edittype: 'text', editrules: {required: true},
editoptions:{size:30}},
{name:'m_type', index:'m_type', width:150, editable: true,
edittype: 'select', editrules: {required: true},
editoptions:{value:{'one':'one','two':'two','three':'three',
'four':'four'},size:30}}
],
editurl:'/foo/bar/editinfo',
height: 'auto',
width: 'auto',
pager: '#pager',
viewrecords: true,
loadonce: true,
rowNum:20,
rowList:[20,40,60,80,100],
caption: 'Meter Listing'
});
// Edit functionality
$("#editfields").click(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) {
jQuery('#list').setGridParam({datatype:'json'});
jQuery("#list").jqGrid('editGridRow',gr,
{editCaption: 'Edit Place Details',height:550,
closeAfterEdit:true,width:600,reloadAfterSubmit:true});
} else {
alert("Please select a row");
}
});
});
function myelem(value,options){
return $('<input type="text" value="'+value+'" disabled="disabled"/>');
}
function myval(elem){
return elem.val();
}
edit2:
getSites:
function getSites(){
<?php
$sites = "0:Select";
foreach ($this->sites as $k => $v){
$sites = $sites . ";" . $v['site_id'] . ":" . $v['site_name'];
}
?>
return "<?= $sites ?>";
}
Could you try to include key: true in the definition of the place_id column. You can remove id from the data which you send from the server.
If it will not help, then you should post a full code example which reproduce your problem and I will try to find a workaround.
UPDATED: Sometime there are a simple solution for complex problems. One additional parameter of editGridRow function solve your problem:
recreateForm: true
Without using of the parameter the function myelem will be called only one time at the first edit of the selected row. Then the form will be cached and not recreated. So you will be edit always the same row. After including of the parameter recreateForm: true the form will be created every time.
By the way I set some general settings which I use in all jqGrids per extending jQuery.jgrid.defaults, jQuery.jgrid.edit, jQuery.jgrid.view, jQuery.jgrid.del and jQuery.jgrid.nav. For example I use always
jQuery.extend(jQuery.jgrid.edit, {
closeAfterAdd: true,
closeAfterEdit: true,
recreateForm: true,
//...
});
Then I don't need set this parameters later. During writing of the answer Add multiple input elements in a custom edit type field about custom editing I has also the settings, so I didn't see any problems.