jQWidgets Forums

This topic contains 3 replies, has 3 voices, and was last updated by Peter Stoev 10 years, 6 months ago.

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

Author

Set DropDownList selected value from other column Posts

September 23, 2014 at 6:28 am Set DropDownList selected value from other column #59885

Participant

Hi all.

In my grid, there is a combo box and a drop down list and I am trying to get value the drop down list(Supplying Location) to be selected based on values from the combo box(Item Code).

$("#itemLocationListGrid").jqxGrid({
  sortable: true,
  filterable: true,
  pageable: true, 
  source: dataAdapter,
  width: '100%',
  autorowheight:true,
  columnsresize: true,
  pageable: true,
  virtualmode: true,
  rendergridrows: function()
  {
    return dataAdapter.records;     
  },
  editable: true,
  columnsheight: 50,
  columns: [
   {text: 'Item Code', datafield: 'itemLocationItemCode', width: 150, align: 'center', columntype: 'combobox', nullable: true,
    createeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
      dropDownItemCodeGridCreateEditor(row, cellvalue, editor, celltext, cellwidth, cellheight);
    },
    initeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
     dropDownItemCodeGridInitEditor(row, cellvalue, editor, celltext, cellwidth, cellheight);
    },
    validation: function(cell, value) {
      var obj = {
       //Dont change        //dataField in ur grid
       item_code: 'itemLocationItemCode',
       item_name: 'itemLocationItemName',
       item_uom: 'itemLocationItemSmallestUomName',
       validateYN: 'validateYN',
       item_category: 'itemLocationCategoryCode'
     };
     var gridId = 'itemLocationListGrid';
      return dropDownItemGridValidatation(cell, value, gridId, obj);
     }
    },
    {text: 'Item Name', columntype: 'textbox', datafield: 'itemLocationItemName', align:'center', width: 200}, 
    {text: 'UOM', columntype: 'textbox', datafield: 'itemLocationItemSmallestUomName', width: 100, align:'center'}, 
    {text: 'Supplying Location', datafield: 'itemLocationSupplyingLocationCode', align: 'center', width: 180, columntype: 'dropdownlist',   
     displayfield: 'itemLocationSupplyingLocationCode',  valueMember: "ID", 
     initeditor: function(row, value, editor) {
      editor.jqxDropDownList({
        source: dropdownListAdapterStore, 
	displayMember: "masterLocationCode", 
	valueMember: "masterLocationCode", 
	placeHolder: "Please Select",
	renderer: function (index, label, value) 
	{
	  var datarecord = dropdownListAdapterStore.records[index];
	  return datarecord.masterLocationCode + " - " + datarecord.masterLocationDescription;
	}
     });
     }
    }, 
  ]
});

When user clicks on Item Code, cellendedit event will be fired and it set value on Supplying Location based on what user has entered in Item Code. I only managed set the value in the drop down list. When user clicks on Supplying Location, the value that has been set earlier is not being selected and user will have to select on it again.

Is it possible to set selected value on drop down list from other column in the grid?

Thank you.

September 23, 2014 at 8:59 am Set DropDownList selected value from other column #59899

admin

Keymaster

Hi jamieoro,

Cascading DropDownLists can be implemented by using this approach: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cascadingediting.htm?arctic

Best Regards,
Peter Stoev

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

September 24, 2014 at 6:50 am Set DropDownList selected value from other column #59961

jamieoro

Participant

Hi Peter.

Can I set the certain value to be selected in City? For example, user selects France in Country, Paris will be set and selected in City.

$("#jqxgrid").on('cellendedit', function(event) {
   var editingFields = event.args.datafield;

   if(editingFields == 'Country')
   {
     var selectedValue = event.args.value;
     var rowIndex = event.args.rowindex;
				
     if(selectedValue == 'France')
     {
	$("#jqxgrid").jqxGrid('setcellvalue', rowIndex, 'City', 'Paris');
     }
  }
});

City is set to Paris but when user clicks on City, Paris is not selected.

Thanks!

September 24, 2014 at 7:06 am Set DropDownList selected value from other column #59963

Peter Stoev

Keymaster

Hi jamieoro,

This works fine on my side:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to implement cascading comboboxes in
        jqxGrid.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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.pager.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/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = '[{ "Country": "Belgium", "City": "Brussels"}, {"Country": "France", "City": "Paris"}, {"Country": "USA", "City": "Washington"}]';
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'Country', type: 'string' },
                    { name: 'City', type: 'string' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 300,
                source: dataAdapter,
                selectionmode: 'singlecell',
                editable: true,
                autoheight: true,
                columns: [
                    {
                        text: 'Country', datafield: 'Country', width: 150, columntype: 'combobox',
                        cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                            if (newvalue != oldvalue) {
                                $("#jqxgrid").jqxGrid('setcellvalue', row, "City", "Select a city...");
                            };
                        }
                    },
                    {
                        text: 'City', datafield: 'City', width: 150, columntype: 'combobox',
                        initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            var country = $('#jqxgrid').jqxGrid('getcellvalue', row, "Country");
                            var city = editor.val();

                            var cities = new Array();
                            switch (country) {
                                case "Belgium":
                                    cities = ["Bruges", "Brussels", "Ghent"];
                                    break;
                                case "France":
                                    cities = ["Bordeaux", "Lille", "Paris"];
                                    break;
                                case "USA":
                                    cities = ["Los Angeles", "Minneapolis", "Washington"];
                                    break;
                            };

                            editor.jqxComboBox({ autoDropDownHeight: true, source: cities });
                            if (city != "Select a city...") {
                                var index = cities.indexOf(city);
                                editor.jqxComboBox('selectIndex', index);
                            }
                        }
                    }
                ]
            });
            $("#jqxgrid").on('cellendedit', function (event) {
                var editingFields = event.args.datafield;

                if (editingFields == 'Country') {
                    var selectedValue = event.args.value;
                    var rowIndex = event.args.rowindex;

                    if (selectedValue == 'France') {
                        $("#jqxgrid").jqxGrid('setcellvalue', rowIndex, 'City', 'Paris');
                    }
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.