Datainit is giving null - jqgrid

Question

Can somebody please help me understand why the dataInit function wouldn't have a value for the field. I have the following added to the categories column in my grid.
dataInit: function (elem)
{
var v = $(elem).val();
alert("In data init val is " + v);
$(elem).trigger('change');
}
I get a null value in the alert and the trigger function doesn't fire either.

Answer 1

If this question about editoptions and using server data. I have got the answer. This is happen because your data is not local but from server. Using server(not local data), browser need several time to load into the select element and change to the selected option as in row.
So, the $(elem).val(); from dataInit is null because it is still null on that time, u have to wait about 100 ms(on my case).
Here my code, the case is about loading provinces with its cities on .
dataInit: function (elem) {
$(elem).ready(loadCities);
},
I create function loadCities function out of jqgrid definition
function loadCities() {
setTimeout('$.ajax({type: "GET",data: "", url: "<?php echo base_url();?>index.php/cities/cities_select_options_by_prov_and_store/"+$("#province").val()+"/"+$("#id").val(), success: function(data){ $("#city").html(data);}})',100);
}
here are my complete code
var gridStores = jQuery('#gridStores');
function loadCities() {
setTimeout('$.ajax({type: "GET",data: "", url: "<?php echo base_url();?>index.php/cities/cities_select_options_by_prov_and_store/"+$("#province").val()+"/"+$("#id").val(), success: function(data){ $("#city").html(data);}})',100);
}
var resetCitiesValues = function () {
gridStores.setColProp('#city', { editoptions: { value: ':- Choose Province First -'} });
};
gridStores.jqGrid({
url:'<?php echo base_url();?>index.php/stores/stores_json',
datatype: 'json',
colNames:['ID','Name'],
colModel:[
{name:'id',index:'stores.id', hidden:true,editable:true},
{name:'province',index: 'provinces.name', width:100,stype:'text',sorttype:'text',editable:true,editrules:{required:true},edittype:"select",editoptions:{dataUrl:'<?php echo base_url();?>index.php/provinces/provinces_select_options',
dataInit: function (elem) {
$(elem).ready(loadCities);
},
dataEvents: [{type: 'change',fn: function(e) {$.ajax({type: "GET",data: "", url: "<?php echo base_url();?>index.php/cities/cities_select_options/"+$(this).val(), success: function(data){ $("#city").html(data);}})}}]}},
{name:'city',index: 'cities.name', width:100,stype:'text',sorttype:'text',editable:true,editrules:{required:true},edittype:"select", editoptions:{ value: ':- Choose Province First -', defaultValue:'- Choose City -'}},
],
width:'600',
rownumbers: true,
rownumWidth: 40,
rowNum:10,
rowList : [20,30,50],
viewrecords: true,
pager: '#pagerStores',
sortname: 'stores.id',
sortorder: "desc",
searchOn:"false",
editurl: "<?php echo base_url();?>index.php/stores/edit"
});
jQuery("#gridStores").jqGrid('navGrid','#pagerStores',
{
edit:true,
add:true,
del:true,
search:false,
refresh:true,
recreateForm:true,
viewPagerButtons:false
},
{
closeAfterEdit:true,
closeAfterAdd:true,
reloadAfterSubmit:true,
editData: {<?php echo $this->security->get_csrf_token_name()?>: '<?php echo $this->security->get_csrf_hash() ?>'},
recreateForm:true,
viewPagerButtons:false
},
{
closeAfterEdit:true,
closeAfterAdd:true,
reloadAfterSubmit:true,
editData: {<?php echo $this->security->get_csrf_token_name()?>: '<?php echo $this->security->get_csrf_hash() ?>'}
},
{
delData: {<?php echo $this->security->get_csrf_token_name()?>: '<?php echo $this->security->get_csrf_hash() ?>'},
},
{
caption: "Search",
Find: "Find",
Reset: "Reset",
sopt : ['eq', 'cn'],
matchText: " match",
rulesText: " rules",
stringResult: true
}
);
jQuery("#gridStores").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});

Answer 2

I have the same problem too. In order to accomplish this: jqgrid incorrect select drop down option values in edit box in dataInit and dataEvents v = $(elem).val(); and var v = parseInt($(e.target).val(), 10); give me back null. If i put in v the right values all the other works fine!

Answer 3

The elem is now already an object, so JQuery is not needed to get its properties.
Just use var v = elem.value;