jQuery UI Widgets Forums Grid Dynamic dropdownList value within JqxGrid

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Dynamic dropdownList value within JqxGrid #78228

    samratsaha2
    Participant

    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?

    Dynamic dropdownList value within JqxGrid #78269

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Dynamic dropdownList value within JqxGrid #78412

    samratsaha2
    Participant

    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.

    Dynamic dropdownList value within JqxGrid #78429

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.