Grid- Dropdownlist issue

[KeshavanParticipant]

Hi,

I have a grid (with 2 column types as ‘dropdownlist’), the 2nd and 3rd column (after Id column) have col type ‘dropdownlist’,

while all is ok, the 3rd column(2nd ‘dropdownlist’ col type ) doesn’t show Names and shows up only values.

I interchanged the 2nd and 3rd column, the problem now swaps to the last dropdown col type in list.

it’s identical code, i have the specific part of code below, is it focus problem ?? Please help.

Thanks,

Keshavan

var source3 =
{
datatype: “json”,
datafields:
[
{ name: ‘MemberEmployeeId’ },
{ name: ‘CompanyId’, value: ‘CompanyId’, values: { source: dataAdapater1.records, value: ‘CompanyId’, name: ‘CompanyName’} },
{ name: ‘DepartmentId’, value: ‘DepartmentId’, values: { source: dataAdapater2.records, value: ‘DepartmentId’,
name: ‘DepartmentName’
}
},
{ name: ‘Employeecode’ },
{ name: ‘EmployeeName’ },
{ name: ‘MobileNo’ },
{ name: ‘EmailId’ },
{ name: ‘Active’ }
],
id: ‘MemberEmployeeId’,
url: ‘MemberEmployee/GetEmployees’,

var dataAdapater3 = new $.jqx.dataAdapter(source3);
$(“#jqxgrid”).jqxGrid
({
width: 945,
height: 350,
source: dataAdapater3,
theme: ‘ui-smoothness’,
editable:true,
selectionmode: ‘singlecell’,
editmode: ‘click’,
rowdetails: true,
rowsheight: 20,
sortable: true,
pageable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
altrows: true,
columns:
[
{ text: ‘Company’, datafield: ‘CompanyId’, columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: ‘CompanyName’, valueMember: ‘CompanyId’, source: dataAdapater1 })
}
},
{ text: ‘Department’, datafield: ‘DepartmentId’, columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: ‘DepartmentName’, valueMember: ‘DepartmentId’, source: dataAdapater2 })
}
},
{ text: ‘Code’, datafield: ‘EmployeeCode’, width: 60 },
{ text: ‘Name’, datafield: ‘EmployeeName’, width: 170 },
{ text: ‘Mobile No’, datafield: ‘MobileNo’, width: 110 },
{ text: ‘Email’, datafield: ‘EmailId’, width: 150 },
{ text: ‘If Active’, datafield: ‘Active’, width: 80 }
]
});

[Peter StoevKeymaster]

Hi Keshavan,

We are unable to run the provided code. Please, provide a complete sample which demonstrates your issue. In addition, provide details which version of jQWidgets you use.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[KeshavanParticipant]

Hi,

Please find the complete code below,

the version -jQWidgets v2.7.0 Release, Feb-08-2013

Thanks,

Keshavan

This example shows CRUD with Db

$(document).ready(function () {
// prepare data from external Company entity
var source1 =
{
datatype: “json”,
datafields:
[
{ name: ‘CompanyId’ },
{ name: ‘CompanyName’ }
],
id: ‘CompanyId’,
url: ‘Company/GetPartCompanies’,
async: false
};
var dataAdapater1 = new $.jqx.dataAdapter(source1, { autoBind: true });
// prepare data from external Department entity
var source2 =
{
datatype: “json”,
datafields:
[
{ name: ‘DepartmentId’ },
{ name: ‘DepartmentName’ }
],
id: ‘DepartmentId’,
url: ‘Department/GetPartDepartments’,
async: false
};
var dataAdapater2 = new $.jqx.dataAdapter(source2, { autoBind: true });
var data = {};
var depId = -1;
var compId = 1;
// source for main grid
var generaterow = function (id) {
var row = {};
row[“MemberEmployeeId”] = id;
row[“CompanyId”] = 1;
row[“DepartmentId”] = 1;
row[“EmployeeCode”] = ” “;
row[“EmployeeName”] = ” “;
row[“MobileNo”] = ” “;
row[“EmailId”] = ” “;
row[“Active”] = 1;
return row;
};
var source3 =
{
datatype: “json”,
datafields:
[
{ name: ‘MemberEmployeeId’ },
{ name: ‘CompanyId’, value: ‘CompanyId’, values: { source: dataAdapater1.records, value: ‘CompanyId’, name: ‘CompanyName’} },
{ name: ‘DepartmentId’, value: ‘DepartmentId’, values: { source: dataAdapater2.records, value: ‘DepartmentId’,
name: ‘DepartmentName’
}
},
{ name: ‘Employeecode’ },
{ name: ‘EmployeeName’ },
{ name: ‘MobileNo’ },
{ name: ‘EmailId’ },
{ name: ‘Active’ }
],
id: ‘MemberEmployeeId’,
url: ‘MemberEmployee/GetEmployees’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘MemberEmployee/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.

commit(true);
alert(“Commit done …… “);
alert(rowdata.MemberEmployeeId);
alert(rowdata.DepartmentId);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
$.ajax({
dataType: ‘json’,
cache: false,
url: ‘/MemberEmployee/Delete/5’,
type: “POST”,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.statusText);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
/* if (depId != undefined && depId != -1) {
rowdata.Department = depId;
depId = -1;
}*/
/* if (compId != undefined && compId != -1) {
rowdata.CompanyId = compId;
compId = -1;
}*/
$.ajax(
{
cache: false,
dataType: ‘json’,
url: ‘MemberEmployee/Update’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
alert(success);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
}
);
}
}
};
var dataAdapater3 = new $.jqx.dataAdapter(source3);
$(“#jqxgrid”).jqxGrid
({
width: 945,
height: 350,
source: dataAdapater3,
theme: ‘ui-smoothness’,
editable:true,
selectionmode: ‘singlecell’,
editmode: ‘click’,
rowdetails: true,
rowsheight: 20,
sortable: true,
pageable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
altrows: true,
columns:
[
{ text: ‘Company’, datafield: ‘CompanyId’, columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: ‘CompanyName’, valueMember: ‘CompanyId’, source: dataAdapater1 })
}
},
{ text: ‘Department’, datafield: ‘DepartmentId’, columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: ‘DepartmentName’, valueMember: ‘DepartmentId’, source: dataAdapater2 })
}
},
{ text: ‘Code’, datafield: ‘EmployeeCode’, width: 60 },
{ text: ‘Name’, datafield: ‘EmployeeName’, width: 170 },
{ text: ‘Mobile No’, datafield: ‘MobileNo’, width: 110 },
{ text: ‘Email’, datafield: ‘EmailId’, width: 150 },
{ text: ‘If Active’, datafield: ‘Active’, width: 80 }
]
});

$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();

// update row.

$(“#updaterowbutton”).bind(‘click’, function () {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});

})

[Peter StoevKeymaster]

Hi,

Below is a working sample with jQWidgets 2.8

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is illustrated how to create a Grid with column which displays values from foreign data source. The DropDownList editor associated to the column is populated from the foreign data source.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var countries = [
                 { value: "AF", label: "Afghanistan" },
                 { value: "AL", label: "Albania" },
                 { value: "DZ", label: "Algeria" },
                 { value: "AR", label: "Argentina" },
                 { value: "AM", label: "Armenia" },
                 { value: "AU", label: "Australia" },
                 { value: "AT", label: "Austria" },
                 { value: "AZ", label: "Azerbaijan" },
                 { value: "BS", label: "Bahamas" },
                 { value: "BH", label: "Bahrain" },
                 { value: "BD", label: "Bangladesh" },
                 { value: "BB", label: "Barbados" },
                 { value: "BY", label: "Belarus" },
                 { value: "BE", label: "Belgium" },
                 { value: "BZ", label: "Belize" },
                 { value: "BJ", label: "Benin" },
                 { value: "BM", label: "Bermuda" },
                 { value: "BR", label: "Brazil" },
                 { value: "BN", label: "Brunei" },
                 { value: "BG", label: "Bulgaria" },
                 { value: "CM", label: "Cameroon" },
                 { value: "CA", label: "Canada" },
                 { value: "CL", label: "Chile" },
                 { value: "CN", label: "China" },
                 { value: "CO", label: "Columbia" },
                 { value: "CR", label: "Costa Rica" },
                 { value: "HR", label: "Croatia (Hrvatska)" },
                 { value: "CU", label: "Cuba" },
                 { value: "CY", label: "Cyprus" },
                 { value: "CZ", label: "Czech Republic" },
                 { value: "DK", label: "Denmark" },
                 { value: "TP", label: "East Timor" },
                 { value: "EC", label: "Ecuador" },
                 { value: "EG", label: "Egypt" },
                 { value: "ER", label: "Eritrea" },
                 { value: "EE", label: "Estonia" },
                 { value: "ET", label: "Ethiopia" },
                 { value: "FI", label: "Finland" },
                 { value: "FR", label: "France" },
                 { value: "DE", label: "Germany" },
                 { value: "GR", label: "Greece" },
                 { value: "HK", label: "Hong Kong" },
                 { value: "HU", label: "Hungary" },
                 { value: "IS", label: "Iceland" },
                 { value: "IN", label: "India" },
                 { value: "ID", label: "Indonesia" },
                 { value: "IR", label: "Iran" },
                 { value: "IQ", label: "Iraq" },
                 { value: "IE", label: "Ireland" },
                 { value: "IL", label: "Israel" },
                 { value: "IT", label: "Italy" },
                 { value: "JM", label: "Jamaica" },
                 { value: "JP", label: "Japan" },
                 { value: "MX", label: "Mexico" },
                 { value: "MC", label: "Monaco" },
                 { value: "MA", label: "Morocco" },
                 { value: "NL", label: "Netherlands" },
                 { value: "NZ", label: "New Zealand" },
                 { value: "NE", label: "Niger" },
                 { value: "NG", label: "Nigeria" },
                 { value: "KP", label: "North Korea" },
                 { value: "NO", label: "Norway" },
                 { value: "PA", label: "Panama" },
                 { value: "PE", label: "Peru" },
                 { value: "PH", label: "Philippines" },
                 { value: "PL", label: "Poland" },
                 { value: "PT", label: "Portugal" },
                 { value: "RO", label: "Romania" },
                 { value: "RU", label: "Russia" },
                 { value: "SA", label: "Saudi Arabia" },
                 { value: "SK", label: "Slovak Republic" },
                 { value: "SI", label: "Slovenia" },
                 { value: "ZA", label: "South Africa" },
                 { value: "KR", label: "South Korea" },
                 { value: "ES", label: "Spain" },
                 { value: "SE", label: "Sweden" },
                 { value: "CH", label: "Switzerland" },
                 { value: "TN", label: "Tunisia" },
                 { value: "TR", label: "Turkey" },
                 { value: "UA", label: "Ukraine" },
                 { value: "AE", label: "United Arab Emirates" },
                 { value: "UK", label: "United Kingdom" },
                 { value: "US", label: "United States" }
            ];
            var countriesSource =
            {
                 datatype: "array",
                 datafields: [
                     { name: 'label', type: 'string' },
                     { name: 'value', type: 'string' }
                 ],
                 localdata: countries
            };
            var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                autoBind: true
            });
            var names = [
                 { value: "1", label: "Name 1" },
                 { value: "2", label: "Name 2" },
                 { value: "3", label: "Name 3" },
                 { value: "4", label: "Name 4" },
                 { value: "5", label: "Name 5" },
                 { value: "6", label: "Name 6" },
                 { value: "7", label: "Name 7" },
                 { value: "8", label: "Name 8" },
                 { value: "9", label: "Name 9" }
            ];
            var namesSource =
            {
                datatype: "array",
                datafields: [
                    { name: 'label', type: 'string' },
                    { name: 'value', type: 'string' }
                ],
                localdata: names
            };
            var namesAdapter = new $.jqx.dataAdapter(namesSource, {
                autoBind: true
            });
            // prepare the data
            var gridSource =
            {
                datatype: "array",
                localdata: 
                [
                    { countryCode: "UK", nameId: "1" },
                    { countryCode: "US", nameId: "2" },
                    { countryCode: "DE", nameId: "3" },
                    { countryCode: "FR", nameId: "4" },
                    { countryCode: "IN", nameId: "5" },
                    { countryCode: "HK", nameId: "6" }
                ],
                datafields: [
                    // name - determines the field's name.
                    // value - the field's value in the data source.
                    // values - specifies the field's values.
                    // values.source - specifies the foreign source. The expected value is an array.
                    // values.value - specifies the field's value in the foreign source. 
                    // values.name - specifies the field's name in the foreign source. 
                    // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
                    { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
                    { name: 'Name', value: 'nameId', values: { source: namesAdapter.records, value: 'value', name: 'label' } },
                    { name: 'countryCode', type: 'string' },
                    { name: 'nameId', type: 'string' }
               ],
            
            };
            var gridAdapter = new $.jqx.dataAdapter(gridSource);
            $("#jqxgrid").jqxGrid(
            {
                width: 400,
                source: gridAdapter,
                theme: theme,
                selectionmode: 'singlecell',
                autoheight: true,
                editable: true,
                columns: [
                    {
                        text: 'Country', width: 200, datafield: 'countryCode', displayfield: 'Country', columntype: 'dropdownlist',
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
                        }      
                    },
                    {
                        text: 'Name', datafield: 'nameId', displayfield: 'Name', columntype: 'dropdownlist',
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: namesAdapter, displayMember: 'label', valueMember: 'value' });
                        }
                    }
                 ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="font-size: 13px; "margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[KeshavanParticipant]

Hi Peter,

I upgraded to latest version (2.8) and followed your sample code, Issue still persists .

I have pasted my full code, request you to have a look in to pasted code .

Thanks,

Keshavan

This example shows CRUD with Db

$(document).ready(function () {
// prepare data from external Company entity
var source1 =
{
datatype: “json”,
datafields:
[
{ name: ‘CompanyId’ },
{ name: ‘CompanyName’ }
],
id: ‘CompanyId’,
url: ‘Company/GetPartCompanies’,
async: false
};
var dataAdapater1 = new $.jqx.dataAdapter(source1, { autoBind: true });
// prepare data from external Department entity
var source2 =
{
datatype: “json”,
datafields:
[
{ name: ‘DepartmentId’ },
{ name: ‘DepartmentName’ }
],
id: ‘DepartmentId’,
url: ‘Department/GetPartDepartments’,
async: false
};
var dataAdapater2 = new $.jqx.dataAdapter(source2, { autoBind: true });
var data = {};
var depId = -1;
var compId = 1;
// source for main grid
var generaterow = function (id) {
var row = {};
row[“MemberEmployeeId”] = id;
row[“CompanyId”] = 1;
row[“DepartmentId”] = 1;
row[“EmployeeCode”] = ” “;
row[“EmployeeName”] = ” “;
row[“MobileNo”] = ” “;
row[“EmailId”] = ” “;
row[“Active”] = 1;
return row;
};
var source3 =
{
datatype: “json”,
datafields:
[
{ name: ‘MemberEmployeeId’ },
{ name: ‘CompanyId’, value: ‘CompanyId’, values: { source: dataAdapater1.records, value: ‘CompanyId’, name: ‘CompanyName’} },
{ name: ‘DepartmentId’, value: ‘DepartmentId’, values: { source: dataAdapater2.records,
value: ‘DepartmentId’,name:’DepartmentName’ }},
{ name: ‘Employeecode’ },
{ name: ‘EmployeeName’ },
{ name: ‘MobileNo’ },
{ name: ‘EmailId’ },
{ name: ‘Active’ }
],
id: ‘MemberEmployeeId’,
url: ‘MemberEmployee/GetEmployees’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘MemberEmployee/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.

commit(true);
alert(“Commit done …… “);
alert(rowdata.MemberEmployeeId);
alert(rowdata.DepartmentId);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
$.ajax({
dataType: ‘json’,
cache: false,
url: ‘/MemberEmployee/Delete/5’,
type: “POST”,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.statusText);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
/* if (depId != undefined && depId != -1) {
rowdata.Department = depId;
depId = -1;
}*/
/* if (compId != undefined && compId != -1) {
rowdata.CompanyId = compId;
compId = -1;
}*/
$.ajax(
{
cache: false,
dataType: ‘json’,
url: ‘MemberEmployee/Update’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
alert(success);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
}
);
}
}
};
var dataAdapater3 = new $.jqx.dataAdapter(source3);
$(“#jqxgrid”).jqxGrid
({
width: 945,
height: 350,
source: dataAdapater3,
theme: ‘ui-smoothness’,
editable:true,
selectionmode: ‘singlecell’,
editmode: ‘click’,
rowdetails: true,
rowsheight: 20,
sortable: true,
pageable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
altrows: true,
columns:
[
{ text: ‘Company’, datafield: ‘CompanyId’, columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: ‘CompanyName’, valueMember: ‘CompanyId’, source: dataAdapater1 })
}
},
{ text: ‘Department’, datafield: ‘DepartmentId’, displayfield:’DepartmentName’, columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor)
{
editor.jqxDropDownList({ displayMember: ‘DepartmentName’, valueMember: ‘DepartmentId’, source: dataAdapater2 })
}
},
{ text: ‘Code’, datafield: ‘EmployeeCode’, width: 60 },
{ text: ‘Name’, datafield: ‘EmployeeName’, width: 170 },
{ text: ‘Mobile No’, datafield: ‘MobileNo’, width: 110 },
{ text: ‘Email’, datafield: ‘EmailId’, width: 150 },
{ text: ‘If Active’, datafield: ‘Active’, width: 80 }
]
});
$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();

// update row.

$(“#updaterowbutton”).bind(‘click’, function () {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});

})

[Author]

Posts