Dropdownlist in JqxGrid

[lalit singhParticipant]

Hi,

I am using jqxwidget 3.2.1 version, earlier I was having IE 8 version, it was working fine. but after when I upgraded from IE 8 to IE 10, dropdownlist is not working. is there any specific thing I am missing?

Regards,

Lalit Singh

[lalit singhParticipant]

Hi ,

please find the attached image, I am getting error on click of dropdownlist on IE 10 , m using latest version 3.2.1.

it shows error on “b.listBox._arrange” on click of dropdownlist on IE 10. below is piece of code from dropdownlist.js

`({height:b.dropDownHeight});b.container.height(parseInt(b.dropDownHeight)+25)}b.listBox._arrange();b.listBox._updatescrollbars()}if(c==”searchMode”)

regards,

lalit singh

[Peter StoevKeymaster]

Hi Lalit Singh,

Please, provide a sample which demonstrates your issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[lalit singhParticipant]

Hi Peter,

below is the sample code

// prepare the data
var source =
{
datatype: “array”,
localdata: data,
//sort: customsortfunc,
datafields: [

{ name: ‘KeyProjectId’, type: ‘string’ },
{ name: ‘ListOfProjects’, type: ‘string’ },
{ name: ‘Source’, value: ‘fir_source’, type: ‘string’, values: { source: sourceAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘Defend’, value: ‘fir_defend’, type: ‘string’, values: { source: defendAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘Segments’, value: ‘segmentCode’, values: { source: segmentsAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘SubSegments’, value: ‘subsegmentCode’, values: { source: subsegmentsAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘Segments’, value: ‘fir_segment’, type: ‘string’, values: { source: segmentsAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘SubSegments’, value: ‘fir_subsegment’, type: ‘string’, values: { source: subsegmentsAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘Potential’, type: ‘number’ }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{

width: 1000,
source: dataAdapter,
editable: true,
selectionmode: ‘singlerow’,
sortable: true,
editmode: ‘selectedcell’,
columnsresize: true,
autoheight: true,
theme: ‘redmond’,
pageable: true,

columns: [
{ text: ‘KeyProjectId’, datafield: ‘fir_keyprojectId’, displayfield: ‘KeyProjectId’, columntype: ‘textbox’ },
{ text: ‘List Of Projects’, datafield: ‘ListOfProjects’, displayfield: ‘ListOfProjects’, columntype: ‘textbox’, width: 200 },
{ text: ‘Source’, datafield: ‘fir_source’, displayfield: ‘Source’, columntype: ‘dropdownlist’, width: 150,
createeditor: function (row, value, editor) {editor.jqxDropDownList({ autoDropDownHeight: true, source: sourceAdapter, displayMember: ‘label’, valueMember: ‘value’ });}
},
{ text: ‘Defend’, datafield: ‘fir_defend’, displayfield: ‘Defend’, columntype: ‘dropdownlist’, width: 150,
createeditor: function (row, value, editor) {editor.jqxDropDownList({ autoDropDownHeight: true, source: defendAdapter, displayMember: ‘label’, valueMember: ‘value’ });}
},
{ text: ‘Segments’, datafield: ‘fir_segment’, displayfield: ‘Segments’, columntype: ‘dropdownlist’, width: 150,
createeditor: function (row, value, editor) {editor.jqxDropDownList({ autoDropDownHeight: true, source: segmentsAdapter, displayMember: ‘label’, valueMember: ‘value’ });},
cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {if (newvalue != oldvalue) {$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, “SubSegments”, “Please Choose:”);};}
},
{ text: ‘SubSegments’, datafield: ‘fir_subsegment’, displayfield: ‘SubSegments’, columntype: ‘dropdownlist’, width: 150,
initeditor: function (row, column, editor, celltext, cellwidth, cellheight) {
// assign a new data source to the combobox.
//var selectedSegments = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “fir_segment”);
var selectedSegments = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “Segments”);
var subseg = editor.val();
var fillsubsegment = new Array();
switch (selectedSegments) {
case “Beverage”:
fillsubsegment = [‘Alcoholic Drinks’, ‘Carbonated Soft Drinks’, ‘Hot Drinks’, ‘Ingredients FL’, ‘Juices and Nectars’, ‘Powder Soft Drinks’, ‘Special Soft Drinks’, ‘Unknown Beverages’];
break;
case “Body Care”:
fillsubsegment = [‘AntiP/Deo’, ‘Body Care Mass Perfume’, ‘Body Wash’, ‘Hair Care’, ‘Oral Care (BC)’, ‘Skin Care’, ‘Soap bar’];
break;
};
editor.jqxDropDownList({ autoDropDownHeight: true, source: fillsubsegment });
if (subseg != “Please Choose:”) {
var index = fillsubsegment.indexOf(subseg);
editor.jqxDropDownList(‘selectIndex’, index);
}

},
// update the editor’s value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.

if (newvalue == “”) return oldvalue;
//$(“#fillsubsegment”).on(‘change’, createeditor )
}
}]
});

I have 3 dropdownlist columns, when I click on this, it shows below error on IE 10

SCRIPT5007: Unable to get property ‘_arrange’ of undefined or null reference
jqxdropdownlist.js, line 7 character 33286
HTML1527: DOCTYPE expected. The shortest valid doctype is “<!DOCTYPE html>”.
about:blank, line 1 character 1
SCRIPT5007: Unable to get property ‘_arrange’ of undefined or null reference
jqxdropdownlist.js, line 7 character 33286
SCRIPT5007: Unable to get property ‘_arrange’ of undefined or null reference
jqxdropdownlist.js, line 7 character 33286
SCRIPT5007: Unable to get property ‘_arrange’ of undefined or null reference
jqxdropdownlist.js, line 7 character 33286
SCRIPT5007: Unable to get property ‘visibleItems’ of undefined or null reference
jqxgrid.edit.js, line 7 character 22533
SCRIPT5007: Unable to get property ‘_arrange’ of undefined or null reference
jqxdropdownlist.js, line 7 character 33286

I am unable to attach , screenshot in this blog show pasted above error lines.
Regards,

Lalit Singh

[lalit singhParticipant]

Hi Peter,
again pasting…..
I am using , string array to populate dropdownlist using adapter,below is the sample code
var arrsource = new Array();
arrsource[0] = ({ value: “0”, label: “Solicited” })
arrsource[1] = ({ value: “1”, label: “Proactive” })

var arrdefend = new Array();
arrdefend[0] = ({ value: “0”, label: “Defend” })
arrdefend[1] = ({ value: “1”, label: “Attack” })

var strsourcefield = {
datatype: “array”,
datafields: [
{ name: ‘label’, type: ‘string’ }

],
localdata: arrsource
}

var strdefendsource = {
datatype: “array”,
datafields: [
{ name: ‘label’, type: ‘string’ }

],
localdata: arrdefend
}

var segmentsAdapter = new $.jqx.dataAdapter(strsegmentsource, { autoBind: true });

var subsegmentsAdapter = new $.jqx.dataAdapter(strsubsegmentsource, { autoBind: true });

var sourceAdapter = new $.jqx.dataAdapter(strsourcefield, { autoBind: true });

var defendAdapter = new $.jqx.dataAdapter(strdefendsource, { autoBind: true });
// prepare the data
var source =
{
datatype: “array”,
localdata: data,
//sort: customsortfunc,
datafields: [

{ name: ‘KeyProjectId’, type: ‘string’ },
{ name: ‘ListOfProjects’, type: ‘string’ },
{ name: ‘Source’, value: ‘fir_source’, type: ‘string’, values: { source: sourceAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘Defend’, value: ‘fir_defend’, type: ‘string’, values: { source: defendAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘Segments’, value: ‘segmentCode’, values: { source: segmentsAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘SubSegments’, value: ‘subsegmentCode’, values: { source: subsegmentsAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘Segments’, value: ‘fir_segment’, type: ‘string’, values: { source: segmentsAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘SubSegments’, value: ‘fir_subsegment’, type: ‘string’, values: { source: subsegmentsAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘Potential’, type: ‘number’ }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{

width: 1000,
source: dataAdapter,
editable: true,
selectionmode: ‘singlerow’,
sortable: true,
editmode: ‘selectedcell’,
columnsresize: true,
autoheight: true,
theme: ‘redmond’,
pageable: true,

columns: [
{ text: ‘KeyProjectId’, datafield: ‘fir_keyprojectId’, displayfield: ‘KeyProjectId’, columntype: ‘textbox’ },
{ text: ‘List Of Projects’, datafield: ‘ListOfProjects’, displayfield: ‘ListOfProjects’, columntype: ‘textbox’, width: 200 },
{ text: ‘Source’, datafield: ‘fir_source’, displayfield: ‘Source’, columntype: ‘dropdownlist’, width: 150,
createeditor: function (row, value, editor) {editor.jqxDropDownList({ autoDropDownHeight: true, source: sourceAdapter, displayMember: ‘label’, valueMember: ‘value’ });}
},
{ text: ‘Defend’, datafield: ‘fir_defend’, displayfield: ‘Defend’, columntype: ‘dropdownlist’, width: 150,
createeditor: function (row, value, editor) {editor.jqxDropDownList({ autoDropDownHeight: true, source: defendAdapter, displayMember: ‘label’, valueMember: ‘value’ });}
},
{ text: ‘Segments’, datafield: ‘fir_segment’, displayfield: ‘Segments’, columntype: ‘dropdownlist’, width: 150,
createeditor: function (row, value, editor) {editor.jqxDropDownList({ autoDropDownHeight: true, source: segmentsAdapter, displayMember: ‘label’, valueMember: ‘value’ });},
cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {if (newvalue != oldvalue) {$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, “SubSegments”, “Please Choose:”);};}
},
{ text: ‘SubSegments’, datafield: ‘fir_subsegment’, displayfield: ‘SubSegments’, columntype: ‘dropdownlist’, width: 150,
initeditor: function (row, column, editor, celltext, cellwidth, cellheight) {
// assign a new data source to the combobox.
//var selectedSegments = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “fir_segment”);
var selectedSegments = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “Segments”);
var subseg = editor.val();
var fillsubsegment = new Array();
switch (selectedSegments) {
case “Beverage”:
fillsubsegment = [‘Alcoholic Drinks’, ‘Carbonated Soft Drinks’, ‘Hot Drinks’, ‘Ingredients FL’, ‘Juices and Nectars’, ‘Powder Soft Drinks’, ‘Special Soft Drinks’, ‘Unknown Beverages’];
break;
case “Body Care”:
fillsubsegment = [‘AntiP/Deo’, ‘Body Care Mass Perfume’, ‘Body Wash’, ‘Hair Care’, ‘Oral Care (BC)’, ‘Skin Care’, ‘Soap bar’];
break;
};
editor.jqxDropDownList({ autoDropDownHeight: true, source: fillsubsegment });
if (subseg != “Please Choose:”) {
var index = fillsubsegment.indexOf(subseg);
editor.jqxDropDownList(‘selectIndex’, index);
}

},
// update the editor’s value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.

if (newvalue == “”) return oldvalue;
//$(“#fillsubsegment”).on(‘change’, createeditor )
}
}]
});

I have 3 dropdownlist columns, when I click on this, it shows below error on IE 10

SCRIPT5007: Unable to get property ‘_arrange’ of undefined or null reference
jqxdropdownlist.js, line 7 character 33286
HTML1527: DOCTYPE expected. The shortest valid doctype is “<!DOCTYPE html>”.
about:blank, line 1 character 1
SCRIPT5007: Unable to get property ‘_arrange’ of undefined or null reference
jqxdropdownlist.js, line 7 character 33286
SCRIPT5007: Unable to get property ‘_arrange’ of undefined or null reference
jqxdropdownlist.js, line 7 character 33286
SCRIPT5007: Unable to get property ‘_arrange’ of undefined or null reference
jqxdropdownlist.js, line 7 character 33286
SCRIPT5007: Unable to get property ‘visibleItems’ of undefined or null reference
jqxgrid.edit.js, line 7 character 22533
SCRIPT5007: Unable to get property ‘_arrange’ of undefined or null reference
jqxdropdownlist.js, line 7 character 33286

I am unable to attach , screenshot in this blog show pasted above error lines.
Regards,

Lalit Singh

[Peter StoevKeymaster]

Hi lalit singh,

I am unable to run the sample which you provided. It is missing parts without which, it can’t run. Please, use http://jsfiddle.net/ for providing a sample next time. Also have in mind that you should not call Grid methods, set properties within Grid callback functions such as cellvaluechanging. The reason is simple, you re-render the Grid while the Grid is rendering itself and you break its functionality by doing that.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[lalit singhParticipant]

Hi Peter,

thanks for your response. can you look at it http://jsfiddle.net/ufNDr/ please. I have updated my sample page here.

regards,

lalit singh

[lalit singhParticipant]

Hi Peter,

This is latest posted . http://jsfiddle.net/ufNDr/7/

regards,

lalit singh

[Peter StoevKeymaster]

Hi lalit singh,

The sample does not show a Grid or any issue. Here’s what I mean by sample in jSFiddle: http://jsfiddle.net/jqwidgets/HgGqs/

Hope its clear now.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[lalit singhParticipant]

Hi Peter,

Please find this link , http://jsfiddle.net/5Y959/

Hope this is what you want it to be.

please let me know what is the issue, as I am stucked in middle of work.

Regards,

lalit singh

[Peter StoevKeymaster]

Hi Lalit,

Cannot read property ‘dataAdapter’ of undefined. Your sample tries to use dataAdapter and it is undefined.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[lalit singhParticipant]

Hi Peter,

Yes, I am using dataadapter to bind dropdownlist, as it has to be come from database. can you provide solution for this. or let me know what information you want from me.

or else you can suggest any modification please.

regards,

lalit singh

[Peter StoevKeymaster]

Hi Lalit,

“dataAdapter” is a variable in your code which is undefined and as it is undefined and you try to use it, it throws an error. Please, check it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[lalit singhParticipant]

Hi Peter,

I checked , dataAdapter is having records,

please show me line of my sample code exactly , what needs to be put in.

regards,

lalit singh

[lalit singhParticipant]

Hi Peter,

will you please help me, i checked dataAdapter is retrieve records.

Regards,

lalit singh

[Author]

Posts