Column custom editor not setting ID value from drop down on new Blank Row

[rcm01Participant]

I have a grid with a custom editor of type dropdownlist. The drop down list columns correspond 1 to 1 with columns in the grid data source (i.e. valueMember = OrderID and datasource has OrderID) . If I add a new blank row to the grid with an object matching the grids data source (meaning the same data fields) the drop down list fails to set the data column that corresponds to the valueMember while it sets the data column corresponding to the displayMember correctly.

This only happens on a new blank row. The drop down works perfectly on rows loaded during grid initialization. Also, in the case where I initialize a grid with blank rows (i.e. like the spread sheet demo) the drop down set the value correctly.

[Peter StoevKeymaster]

Hi rcm01,

In case you have an issue with our product, please provide a sample which demonstrates it according to the: http://www.jqwidgets.com/community/topic/welcome-to-jqwidgets-forum/.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rcm01Participant]

In working through this my initial statement that the existing row was being updated was incorrect. My assumption was that when using the custom editor that the ID from the drop down would be set in the data set. However, this looks like it has to be done in a custom function like I have below. Obviously I’m not pulling the ID from the drop down and instead passing a hard coded five. So my question now is this the correct way to do this or is there a more efficient way?

@{
    ViewBag.Title = "Index";
}
@section scripts {
    <script type="text/javascript" src="~/scripts/jqwidgets/jqx-all.js"></script>
    <link rel="stylesheet" type="text/css" href="~/scripts/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            //debugger;
            var myDropDownData = {};
            myDropDownData[0] = { TestColumnID: 1, TestColumnName: "DD1" };
            myDropDownData[1] = { TestColumnID: 2, TestColumnName: "DD2" };
            
            var theme = "";
            // prepare the data
            var data = {};
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            var generaterow = function (i) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                if (i % 2 == 0)
                {
                    row["TestColumnID"] = myDropDownData[0].TestColumnID;
                    row["TestColumnName"] = myDropDownData[0].TestColumnName;
                }
                else
                {
                    row["TestColumnID"] = myDropDownData[1].TestColumnID;
                    row["TestColumnName"] = myDropDownData[1].TestColumnName;
                }
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                return row;
            }
            for (var i = 0; i < 2; i++) {
                var row = generaterow(i);
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "local",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'TestColumnID', type: 'int' },
                    { name: 'TestColumnName', type: 'string'},
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    commit(true);
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    commit(true);
                },
                updaterow: function (rowid, newdata, 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 failed.
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                height: 350,
                source: dataAdapter,
                editable: true,
                theme: theme,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  {
                      text: 'Test Column', datafield: 'TestColumnName', width: 50, columntype: 'dropdownlist',  createeditor: function (row, column, editor) {
                          // assign a new data source to the dropdownlist.
                          editor.jqxDropDownList({ source: myDropDownData, displayMember: "TestColumnName", valueMember: "TestColumnID" });
                      }
                  },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $("#jqxgrid").on('cellvaluechanged', function (event) { ProcessValueChange(event); });
            $("#addrowbutton").jqxButton({ theme: theme });
            $("#addmultiplerowsbutton").jqxButton({ theme: theme });
            $("#deleterowbutton").jqxButton({ theme: theme });
            $("#updaterowbutton").jqxButton({ theme: theme });
            // update row.
            $("#updaterowbutton").on('click', function () {
                var datarow = generaterow();
                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);
                }
            });
            // create new row.
            $("#addrowbutton").on('click', function () {
                //var datarow = generaterow();
                var commit = $("#jqxgrid").jqxGrid('addrow', null, {});
            });
            // create new rows.
            $("#addmultiplerowsbutton").on('click', function () {
                $("#jqxgrid").jqxGrid('beginupdate');
                for (var i = 0; i < 10; i++) {
                    var datarow = generaterow();
                    var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                }
                $("#jqxgrid").jqxGrid('endupdate');
            });
            // delete row.
            $("#deleterowbutton").on('click', function () {
                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('deleterow', id);
                }
            });
            $("#processGridbutton").on('click', function () { ProcessGrid(); } );
        });
        function ProcessGrid()
        {
            debugger;
            var gridData = $("#jqxgrid").jqxGrid('getrows');
            for (var i = 0; i < gridData.length; i++)
            {
                alert("Row:" + i + " TestColumnID: " + gridData[i].TestColumnID + "TestColumnName: " + gridData[i].TestColumnName);
            }
        }
        function ProcessValueChange(event)
        {
            debugger;
            var column = args.datafield;
            var row = args.rowindex;
            var value = args.newvalue;
            var oldvalue = args.oldvalue;
            $("#jqxgrid").jqxGrid('setcellvalue', row, "quantity", 5);
            var gridData = $("#jqxgrid").jqxGrid('getrows');
            gridData[row].TestColumnID = 5;
        }
    </script>
}
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style="float: left;" id="jqxgrid">
        </div>
        <div style="margin-left: 10px; float: left;">
            <div>
                <input id="addrowbutton" type="button" value="Add New Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" />
            </div>
            <div style="margin-top: 10px;">
                <input id="deleterowbutton" type="button" value="Delete Selected Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="updaterowbutton" type="button" value="Update Selected Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="processGridbutton" type="button" value="Process Updates and Additions" />
            </div>
        </div>
    </div>
</body>

[Author]

Posts