jQWidgets Forums

Tagged: combobox, edit row, grid, jqxgrid

This topic contains 3 replies, has 2 voices, and was last updated by Gopre400 10 years, 7 months ago.

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

Author

Set Cells Values in Grid on ComboBox Change Posts

November 6, 2014 at 6:44 pm Set Cells Values in Grid on ComboBox Change #62328

Participant

Hi, I would like to set the values of cells in grid when the user selects a value from a combobox. The combobox is a column in the grid. For example lets say user selects Contractor Name, I want to set the other values in that same row (address, phone, email…)

$("#jqxgrid").jqxGrid(
                        {
                            width: '100%',
                            source: dataAdapter,
                            theme: 'darkblue',
                            pagesize: 20,
                            pageable: true,
                            autoheight: true,
                            sortable: true,
                            altrows: true,
                            enabletooltips: true,
                            editable: true,
                            showstatusbar: true,
                            editmode: 'click',
                            showaggregates: true,
                            selectionmode: 'singlecell',
                            columns: [
                                { text: 'Plan #', datafield: 'PlanHolderNbr', width: 50, editable: false },
                                {text: 'Contractor', datafield: 'PlanHolderName', width: 300, columntype: 'combobox',
                                createeditor: function (row, cellvalue, editor) {
                                    var contractorsource =
                                        {
                                            datatype: "xml",
                                            contentType: "application/json; charset=utf-8",
                                            datafields: [
                        	                        { name: 'Contractor' }
                                                ],
                                            async: false,
                                            record: 'Table',
                                            url: "CNSTWebService.asmx/GetContractorByContractorCombo"
                                        };
                                    var contractorAdapter = new $.jqx.dataAdapter(contractorsource);

                                    editor.jqxComboBox({
                                        source: contractorAdapter,
                                        displayMember: "Contractor",
                                        valueMember: "Contractor"
                                    });

                                    editor.on('change', function (event) {
                                        $("#jqxgrid").jqxGrid('setcellvalue', row, "PlanHolderPhone1", "5098675309");
                                    });

                                }
                            },
                                { text: 'Phone', datafield: 'PlanHolderPhone1', width: 100 },
                                { text: 'Fax', datafield: 'PlanHolderPhone2', width: 100 },
                                { text: 'Email', datafield: 'PlanHolderEmail', width: 200 },
                                { text: 'Contact', datafield: 'PlanHolderContact', width: 100 },
                            ]
                        });
                    }

November 7, 2014 at 10:01 am Set Cells Values in Grid on ComboBox Change #62369

Nadezhda

Participant

Hello Gopre400,

Here is an example which shows how to change cells value by selecting combobox item on the current row.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(200);

            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'date', type: 'date' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                editable: true,
                enabletooltips: true,
                selectionmode: 'singlerow',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
                  { text: 'Product', columntype: 'combobox', datafield: 'productname', width: 195 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                  { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput' },
                  {  text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput' }
                ]
            });

            $('#jqxgrid').on('cellvaluechanged', function (event) {
                if (event.args.datafield == "productname") {
                    if (event.args.newvalue == "Green Tea") {
                        var datarow = { "firstname": "Green", "lastname": "Tea", "productname": "Green Tea", "available": "true", "date": new Date("11/10/2010"), "quantity": "13", "price": "6" };
                    }
                    else if (event.args.newvalue == "Black Tea") {
                        var datarow = { "firstname": "Black", "lastname": "Tea", "productname": "Black Tea", "available": "false", "date": new Date("11/10/2010"), "quantity": "12", "price": "5" };
                    }
                    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                        var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                        var commit = $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                        $("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex);
                    }
                }
            });

        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid"></div>
</body>
</html>

Best Regards,
Nadezhda

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

November 12, 2014 at 3:52 pm Set Cells Values in Grid on ComboBox Change #62609

Gopre400

Participant

Thank you, this is helpful. Is there a way to return values from ajax call used to create combobox?
I am getting values from combobox like this…

 var contractorsource =
  {
  datatype: "xml",
  contentType: "application/json; charset=utf-8",
  datafields: [
        { name: 'Contractor' }
   ],
   async: false,
   record: 'Table',
   url: "CNSTWebService.asmx/GetContractorByContractorCombo"
 };
var contractorAdapter = new $.jqx.dataAdapter(contractorsource);

editor.jqxComboBox({
source: contractorAdapter,
editor.jqxComboBox({
     displayMember: "Contractor",
     valueMember: "Contractor"
});

Can I add more datafields, then use those values in the returned table when the contractor is selected? for example…

var contractorsource =
{
datatype: “xml”,
contentType: “application/json; charset=utf-8”,
datafields: [
{ name: ‘Contractor’ },
{ name: ‘Phone’ },
{ name: ‘Address’ }
],
async: false,
record: ‘Table’,
url: “CNSTWebService.asmx/GetContractorByContractorCombo”

};

November 12, 2014 at 9:19 pm Set Cells Values in Grid on ComboBox Change #62628

Gopre400

Participant

I am getting closer…I used cellvaluechanging function to set the values in other cells when the value of the combobox has been changed. However I need somehow get the SelectedIdex of combobox into the cellvaluechanging function…Can I do that? (see bold line)

`
columns: [
{ text: ‘Plan #’, datafield: ‘PlanHolderNbr’, width: 50, editable: false },
{ text: ‘Contractor’, datafield: ‘PlanHolderName’, width: 300, columntype: ‘combobox’,
createeditor: function (row, cellvalue, editor) {
var contractorsource =
{
datatype: “xml”,
contentType: “application/json; charset=utf-8”,
datafields: [
{ name: ‘Contractor’ },
{ name: ‘Phone1’ }
],
async: false,
record: ‘Table’,
url: “CNSTWebService.asmx/GetContractorByContractorCombo”
};
var contractorAdapter = new $.jqx.dataAdapter(contractorsource, {
loadComplete: function () {
var records = contractorAdapter.records;
$(‘body’).data(‘records’, records);
}
});

editor.jqxComboBox({
source: contractorAdapter,
displayMember: “Contractor”,
valueMember: “Contractor”
});
},
cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
if (newvalue == oldvalue) {
}
else {
var record = $(‘body’).data(‘records’)[row];
var selectedIndex = editor.jqxComboBox(“selectedIndex”);
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, “PlanHolderPhone1”, record.Phone1);
}
}
},
{ text: ‘Phone’, datafield: ‘PlanHolderPhone1’, width: 100 },
{ text: ‘Fax’, datafield: ‘PlanHolderPhone2’, width: 100 },
{ text: ‘Email’, datafield: ‘PlanHolderEmail’, width: 200 },
{ text: ‘Contact’, datafield: ‘PlanHolderContact’, width: 100 },
]

Author

Posts

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

You must be logged in to reply to this topic.