Dropdownlist on JqxGrid

[lalit singhParticipant]

Hi,

I am feeling strange to write this question , earlier I was using IE 8 version , the dropdownlist on jqx grid was working. but after updating IE to IE10, dropdownlist is not opening its content on click of it. Below is the code I am using. Please help me where I am wrong. Note : Code has not been changed.

function BindDropDownList(datasegments, datasubsegments) {
//segment data population
if (datasegments && datasegments.length > 0) {

strsegment = new Array();
for (var i = 0; i < datasegments.length; i++) {
strsegment[i] = ({ value: datasegments[i].fir_segmentcode, label: datasegments[i].fir_name })
}

strsegmentsource = {
datatype: “array”,
datafields: [
{ name: ‘label’, type: ‘string’ },
// { name: ‘value’, type: ‘string’ }
],
localdata: strsegment
};

//strsegment = strsegment.substring(0, strsegment.length – 1);
}
//subsegment data population
if (datasubsegments.results && datasubsegments.results.length > 0) {

strsubsegment = new Array();
for (var i = 0; i < datasubsegments.results.length; i++) {

strsubsegment[i] = ({ value: datasubsegments.results[i].fir_subsegmentcode, label: datasubsegments.results[i].fir_name })
}

strsubsegmentsource = {
datatype: “array”,
datafields: [
{ name: ‘label’, type: ‘string’ },
// { name: ‘value’, type: ‘string’ }
],
localdata: strsubsegment
};
// strsubsegment = strsubsegment.substring(0, strsubsegment.length – 1);
}

}

var data = {};
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: ‘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’ }
],

///////grid population //////

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

width: 1000,
source: dataAdapter,
editable: true,
selectionmode: ‘singlerow’,
//selectionmode: ‘singlecell’,
sortable: true,
//editmode: ‘selectedrow’,
//enabletooltips: true,
//selectionmode: ‘multiplecellsadvanced’,
editmode: ‘selectedcell’,
columnsresize: true,
autoheight: true,
theme: ‘redmond’,
pageable: true,
// scrollmode: ‘logical’,
//ready: function () { $(“#jqxgrid”).jqxGrid(‘sortby’, ‘source’, ‘asc’); },

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, “fir_subsegment”, “Choose..”);
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, “SubSegments”, “Please Choose:”);
};
}
},
{
text: ‘SubSegments’, datafield: ‘fir_subsegment’, displayfield: ‘SubSegments’, columntype: ‘dropdownlist’, width: 150,
//text: ‘SubSegments’, datafield: ‘fir_subsegment’, displayfield: ‘SubSegments’, columntype: ‘combobox’, width: 250,
//createeditor: function (row, column, editor) {
//initeditor: function (row, column, editor) {
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;
case “Fine Fragrances”:
fillsubsegment = [‘Fine Men Fragrances’, ‘Fine Women Fragrances’];
break;
case “Home Care”:
fillsubsegment = [‘Air Care’, ‘Industrial Products’, ‘Laundry Condit and Add’, ‘Laundry Detergent’, ‘Surface Care’];
break;
case “Natural Ingredient”:
fillsubsegment = [‘Natural Ingredient’];
break;
case “Not Assigned”:
fillsubsegment = [‘Not Assigned’];
break;
case “Savory Foods”:
fillsubsegment = [‘Animal Food’, ‘Fats and Oils’, ‘Prepared Meals’, ‘Proteins’, ‘Snacks’, ‘Soups and Sauces’, ‘Unknown Savory’];
break;
case “Sweet Goods”:
fillsubsegment = [‘Bakery and Cereals’, ‘Confectionery’, ‘Dairy’, ‘Desserts’, ‘Dietary, Nutritionals and Soy’, ‘Oral Care’, ‘Pharma’, ‘Tobacco’, ‘Unknown Sweet Goods’];
break;
case “Synthetic Ingredient”:
fillsubsegment = [‘Synthetic Ingredient’];
break;
};
//editor.jqxComboBox({ source: list, promptText: “Please Choose:” });
//editor.jqxDropDownList({ autoDropDownHeight: true, source: fillsubsegment, promptText: “Choose:” });
editor.jqxDropDownList({ autoDropDownHeight: true, source: fillsubsegment });
if (subseg != “Please Choose:”) {
var index = fillsubsegment.indexOf(subseg);
editor.jqxDropDownList(‘selectIndex’, index);
}
//editor.jqxComboBox({ autoDropDownHeight: true, source: fillsubsegment });
//if (subseg != “Please Choose:”) {
// var index = fillsubsegment.indexOf(subseg);
// editor.jqxComboBox(‘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 )
}
},

{
text: ‘Potential’, datafield: ‘Potential’, displayfield: ‘Potential’, width: 200, align: ‘right’, cellsalign: ‘right’
//validation: function (cell, value) {
// if (value < 0 || value > 1000) {
// return { result: false, message: “Potential value should be less than 1000 ” };
// }
// return true;
//},
//createeditor: function (row, cellvalue, editor) {
// editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
//}
}

]
});

[Author]

Posts