jQuery UI Widgets › Forums › Grid › Dynamic dropdownList value within JqxGrid
Tagged: angular grid, createeditor, data adapter, dropdownlist editor, grid, jquery grid, jqxDataAdapter, jqxgrid, source, XML
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 8 years, 11 months ago.
-
Author
-
I need to create a grid from a xml, columns are defined within xml. one of the columns are as dropdownlist and source of data for dropdownlist is also defined within xml.
The xml is defined as below ———————————————<Request USER=”routemanager” APPLICATION=”ERL-COMMRESI”
URL=”http://erldev.wm.com/erlxt/commitLocationService”>
<COLUMN_HEADERS>
<COLUMN hidden=”FALSE” width=”250″ type=”string” datafield=”NAME”>Customer
Name</COLUMN>
<COLUMN hidden=”FALSE” width=”1″ type=”string” datafield=”GEOCODE_MATCH”>Geocode
Match</COLUMN>
<COLUMN hidden=”FALSE” width=”5″ type=”string” datafield=”HOUSE”>House
#</COLUMN>
<COLUMN hidden=”FALSE” width=”64″ type=”string” datafield=”STREET”>Street
Name</COLUMN>
<COLUMN hidden=”FALSE” width=”30″ type=”string” datafield=”CITY”>City
</COLUMN>
<COLUMN hidden=”FALSE” width=”2″ type=”string” datafield=”STATE”>State
</COLUMN>
<COLUMN hidden=”FALSE” width=”12″ type=”string” datafield=”ZIP_CD”>Zip
Code</COLUMN>
<COLUMN hidden=”TRUE” width=”4″ type=”string” datafield=”COUNTRY_CD”>Country
Code</COLUMN>
<COLUMN hidden=”FALSE” width=”4″ type=”string” datafield=”COMPANY_CD”>CC
</COLUMN>
<COLUMN hidden=”FALSE” width=”24″ type=”string” datafield=”NUMBER”>Customer
Number</COLUMN>
<COLUMN hidden=”FALSE” width=”30″ type=”string” datafield=”ID”>Customer
ID(S)</COLUMN>
<COLUMN hidden=”FALSE” width=”250″ type=”string” datafield=”PREMISE_ID”>Premise
ID</COLUMN>
<COLUMN hidden=”FALSE” width=”10″ type=”string” datafield=”OPERATION_AREA_CD”>Operation
Area</COLUMN>
<COLUMN hidden=”FALSE” width=”30″ type=”string” datafield=”LOB_DESC”>LOB
</COLUMN>
<COLUMN hidden=”FALSE” width=”4″ type=”string” datafield=”ROUTE_TYPE”>Route
Type</COLUMN>
<COLUMN hidden=”FALSE” width=”21″ type=”string” datafield=”ERL_X”>ERL_X
</COLUMN>
<COLUMN hidden=”FALSE” width=”21″ type=”string” datafield=”ERL_Y”>ERL_Y
</COLUMN>
<COLUMN hidden=”FALSE” width=”1″ type=”string” datafield=”SIDE_OF_STREET”>Side
Of Street</COLUMN>
<COLUMN hidden=”FALSE” width=”38″ type=”string” datafield=”ROADS_UID”>ROADS
UID</COLUMN>
<COLUMN hidden=”FALSE” width=”30″ type=”string” datafield=”LOCATOR”>Locator
</COLUMN>
<COLUMN hidden=”FALSE” width=”50″ type=”string” datafield=”ERL_GEOCODE”>eRL
Geocode</COLUMN>
<COLUMN hidden=”FALSE” width=”50″ type=”string” datafield=”EXTERNAL_GEOCODE”>OCS
Geocode</COLUMN>
<COLUMN hidden=”FALSE” width=”50″ type=”string” datafield=”DRIVER_CONFIRMATION”>Driver
Confirmation</COLUMN>
<COLUMN hidden=”FALSE” width=”5″ type=”string” datafield=”CORRECTED_HOUSE”>Corrected
House #</COLUMN>
<COLUMN hidden=”FALSE” width=”64″ type=”string” datafield=”CORRECTED_STREET”>Corrected
Street</COLUMN>
<COLUMN hidden=”FALSE” width=”30″ type=”string” datafield=”CORRECTED_CITY”>Corrected
City</COLUMN>
<COLUMN hidden=”FALSE” width=”2″ type=”string” datafield=”CORRECTED_STATE”>Corrected
State</COLUMN>
<COLUMN hidden=”FALSE” width=”12″ type=”string” datafield=”CORRECTED_ZIP_CD”>Corrected
Zip Code</COLUMN>
<COLUMN hidden=”FALSE” width=”21″ type=”string” datafield=”CORRECTED_ERL_X”>Corrected
ERL_X</COLUMN>
<COLUMN hidden=”FALSE” width=”21″ type=”string” datafield=”CORRECTED_ERL_Y”>Corrected
ERL_Y</COLUMN>
<COLUMN hidden=”FALSE” width=”50″ type=”string” datafield=”CORRECTED_ERL_GEOCODE”>Corrected
eRL Geocode</COLUMN>
<COLUMN hidden=”FALSE” width=”1″ type=”string”
datafield=”CORRECTED_SIDE_OF_STREET”>Corrected Side Of Street</COLUMN>
<COLUMN hidden=”FALSE” width=”38″ type=”string” datafield=”CORRECTED_ROADS_UID”>Corrected
ROADS UID</COLUMN>
<COLUMN hidden=”FALSE” width=”30″ type=”string” datafield=”CORRECTED_LOCATOR”>Corrected
Locator</COLUMN>
<COLUMN hidden=”TRUE” width=”5″ type=”string”
datafield=”DRVR_CONFIRMED_STOP_LOCS_REQD”>DRIVER CONFIRMATION REQUIRED FLAG</COLUMN>
<COLUMN hidden=”FALSE” width=”5″ type=”string” datafield=”CERTIFICATION”
columntype=”dropdownlist”>Certification</COLUMN>
</COLUMN_HEADERS>
<STOPS DRVR_CONFIRMED_STOP_LOCS_REQD=”TRUE”>
<STOP>
<DRVR_CONFIRMED_STOP_LOCS_REQD>TRUE</DRVR_CONFIRMED_STOP_LOCS_REQD>
<NAME>TEAM SOL LLC</NAME>
<GEOCODE_MATCH>U</GEOCODE_MATCH>
<HOUSE>432</HOUSE>
<STREET>LITTLE YORK RD</STREET>
<CITY>HOUSTON</CITY>
<STATE>TX</STATE>
<ZIP_CD>77076-1125</ZIP_CD>
<COUNTRY_CD>US</COUNTRY_CD>
<COMPANY_CD>N/A</COMPANY_CD>
<NUMBER>204171</NUMBER>
<ID>150350183009</ID>
<PREMISE_ID>M11898644</PREMISE_ID>
<OPERATION_AREA_CD>2881</OPERATION_AREA_CD>
<LOB_DESC>COMMERCIAL</LOB_DESC>
<ROUTE_TYPE>FC</ROUTE_TYPE>
<ERL_X>197595.2367</ERL_X>
<ERL_Y>2477542.716</ERL_Y>
<CERTIFICATION>NOT CERTIFIED</CERTIFICATION>
<ERL_GEOCODE>29.870183, -95.376409</ERL_GEOCODE>
</STOP>
<STOP>
<DRVR_CONFIRMED_STOP_LOCS_REQD>FALSE</DRVR_CONFIRMED_STOP_LOCS_REQD>
<NAME>ADVANCE AUTO PARTS</NAME>
<GEOCODE_MATCH>U</GEOCODE_MATCH>
<HOUSE>310</HOUSE>
<STREET>COMMERCE CIRCLE</STREET>
<CITY>SACRAMENTO</CITY>
<STATE>CA</STATE>
<ZIP_CD>95818</ZIP_CD>
<COUNTRY_CD>US</COUNTRY_CD>
<COMPANY_CD>502</COMPANY_CD>
<NUMBER>74280</NUMBER>
<ID>150776163009</ID>
<PREMISE_ID />
<OPERATION_AREA_CD>2905</OPERATION_AREA_CD>
<LOB_DESC>COMMERCIAL</LOB_DESC>
<ROUTE_TYPE>FC</ROUTE_TYPE>
<ERL_X />
<ERL_Y />
<CERTIFICATION>CERTIFIED</CERTIFICATION>
<ERL_GEOCODE></ERL_GEOCODE>
</STOP>
<STOP>
<DRVR_CONFIRMED_STOP_LOCS_REQD>FALSE</DRVR_CONFIRMED_STOP_LOCS_REQD>
<NAME>THE HAVEN</NAME>
<GEOCODE_MATCH>U</GEOCODE_MATCH>
<HOUSE>3333</HOUSE>
<STREET>SUNRISE BLVD</STREET>
<CITY>RANCHO CORDOVA</CITY>
<STATE>CA</STATE>
<ZIP_CD>95742-7326</ZIP_CD>
<COUNTRY_CD>US</COUNTRY_CD>
<COMPANY_CD>502</COMPANY_CD>
<NUMBER>74217</NUMBER>
<ID>150350183009</ID>
<PREMISE_ID>M11898644</PREMISE_ID>
<OPERATION_AREA_CD>2905</OPERATION_AREA_CD>
<LOB_DESC>COMMERCIAL</LOB_DESC>
<ROUTE_TYPE>FC</ROUTE_TYPE>
<ERL_X />
<ERL_Y />
<CERTIFICATION>NOT CERTIFIED</CERTIFICATION>
<ERL_GEOCODE></ERL_GEOCODE>
</STOP>
<STOP>
<DRVR_CONFIRMED_STOP_LOCS_REQD>FALSE</DRVR_CONFIRMED_STOP_LOCS_REQD>
<NAME>HERTZ</NAME>
<GEOCODE_MATCH>U</GEOCODE_MATCH>
<HOUSE>6455</HOUSE>
<STREET>FRANKLIN BLVD</STREET>
<CITY>SACRAMENTO</CITY>
<STATE>CA</STATE>
<ZIP_CD>95822</ZIP_CD>
<COUNTRY_CD>US</COUNTRY_CD>
<COMPANY_CD>502</COMPANY_CD>
<NUMBER>74208</NUMBER>
<ID>150206933006</ID>
<PREMISE_ID>M11875569</PREMISE_ID>
<OPERATION_AREA_CD>2905</OPERATION_AREA_CD>
<LOB_DESC>COMMERCIAL</LOB_DESC>
<ROUTE_TYPE>FC</ROUTE_TYPE>
<ERL_X />
<ERL_Y />
<CERTIFICATION>NOT CERTIFIED</CERTIFICATION>
</STOP>
<STOP>
<DRVR_CONFIRMED_STOP_LOCS_REQD>FALSE</DRVR_CONFIRMED_STOP_LOCS_REQD>
<NAME>HERTZ</NAME>
<GEOCODE_MATCH>U</GEOCODE_MATCH>
<HOUSE>1025</HOUSE>
<STREET>16TH STREET</STREET>
<CITY>SACRAMENTO</CITY>
<STATE>CA</STATE>
<ZIP_CD>95814</ZIP_CD>
<COUNTRY_CD>US</COUNTRY_CD>
<COMPANY_CD>502</COMPANY_CD>
<NUMBER>74207</NUMBER>
<ID>150206693006</ID>
<PREMISE_ID>M11875568</PREMISE_ID>
<OPERATION_AREA_CD>2905</OPERATION_AREA_CD>
<LOB_DESC>COMMERCIAL</LOB_DESC>
<ROUTE_TYPE>FC</ROUTE_TYPE>
<ERL_X />
<ERL_Y />
<CERTIFICATION>NOT CERTIFIED</CERTIFICATION>
<ERL_GEOCODE></ERL_GEOCODE>
</STOP>
<STOP>
<DRVR_CONFIRMED_STOP_LOCS_REQD>TRUE</DRVR_CONFIRMED_STOP_LOCS_REQD>
<NAME>SENEX WELDING AND FABRICATION LL</NAME>
<GEOCODE_MATCH>U</GEOCODE_MATCH>
<HOUSE>3920</HOUSE>
<STREET>UNDERWOOD RD</STREET>
<CITY>LA PORTE</CITY>
<STATE>TX</STATE>
<ZIP_CD>77571-3900</ZIP_CD>
<COUNTRY_CD>US</COUNTRY_CD>
<COMPANY_CD>502</COMPANY_CD>
<NUMBER>125367</NUMBER>
<ID>143584213007</ID>
<PREMISE_ID>M10175432</PREMISE_ID>
<OPERATION_AREA_CD>173</OPERATION_AREA_CD>
<LOB_DESC>COMMERCIAL</LOB_DESC>
<ROUTE_TYPE>FC</ROUTE_TYPE>
<ERL_X />
<ERL_Y />
<CERTIFICATION>NOT CERTIFIED</CERTIFICATION>
<ERL_GEOCODE></ERL_GEOCODE>
</STOP>
</STOPS>
<ENUM>
<CERTIFICATION>
<OPTION VALUE=”CERTIFIED”>CERTIFIED</OPTION>
<OPTION VALUE=”REVIEWED”>REVIEWED</OPTION>
<OPTION VALUE=”NOT_CERTIFIED”>NOT CERTIFIED</OPTION>
</CERTIFICATION>
</ENUM>
</Request>————————————————————————–
JS Code ——————————————————————
//create DropDown List
function createDropDownList(requestXml,datafield){
//alert(datafield);
var dataSrc = new Array();
var enumeration = $(requestXml).find(‘ENUM’);
var element = $(enumeration).find(datafield);
var cnt=0;
$(element).find(‘OPTION’).each(function (){
record = {};
record[“value”]=$(this).attr(‘VALUE’);
record[“display”]=$(this).text();
dataSrc[cnt] = record;
cnt++;
});
//alert(dataSrc);
return dataSrc;}
……..
$(xmlDoc).find(‘COLUMN’).each( function (){
datafields.push({name : $(this).attr(‘datafield’), map: ‘m\\:properties>d\\:’+$(this).attr(‘datafield’), type: $(this).attr(‘type’) } );
if($(this).attr(‘hidden’) == ‘TRUE’){
columns.push({text : $(this).text(), datafield : $(this).attr(‘datafield’), hidden : true });
}else{
if($(this).attr(‘columntype’) == ‘dropdownlist’){
var dataSrcArray = createDropDownList(xmlDoc,$(this).attr(‘datafield’));
console.log(dataSrcArray);
var source = {
datatype: “array”,
datafields: [
{ name: ‘value’, type: ‘string’ },
{ name: ‘display’, type: ‘string’ }
],
localdata:dataSrcArray
}
var dataAdapter = new $.jqx.dataAdapter(source, {autoBind: true});
columns.push({
text : $(this).text(),
datafield : ‘dropdown’,
width:$(this).attr(‘width’),
columntype: ‘dropdownlist’,
cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
var newHTML = defaulthtml + “<div class=’jqx-icon-arrow-down jqx-icon’ style=’width: 16px; height: 16px; top: -30%; left: 40%;’></div>”;
return newHTML;
},
createeditor: function (row, value, editor) {
editor.jqxDropDownList({
source: dataAdapter,
displayMember: ‘display’,
//placeHolder: ‘?’,
dropDownHeight: 105,
valueMember: ‘value’
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.if (newvalue == “”) return oldvalue;
}
});
}else{
columns.push({text : $(this).text(), datafield : $(this).attr(‘datafield’), width:$(this).attr(‘width’) });
}}
—————————————————————————
can you please help?Hello samratsaha2,
This can be achieved, but you would have to create two separate data adapter instances – one for loading the grid and one for the dropdownlist editor. Although showcasing a more complex scenario, the demo Keys/Values Column may be helpful to you as a reference.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar,
do I have to create two different data source or dropdown datasource should be associated with grid datasource, can you pls give a example code /snippet to give an idea.Hi samratsaha2,
You can use only one data source (XML file), but there have to be two different jqxDataAdapter instances – one for each widget. The demo Custom Column Editor shows something similar to what you may need to implement.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.