[rcm01Participant]

Thanks Peter. I think my question 1 was more related to what I think is a possible bug. I misspoke when I said Data Source ,I meant the data loaded in the grid. The above somewhat follows the spreadsheet demo using unbound data structure and with the exception of the check box and the drop down.

If you test the above code, you cannot successfully enter the Grid in Edit Mode using the tab key to move from field “Text 2”. If you enter the Grid with a mouse click then the tab key works correctly as you described. So my question is really about whether it’s possible to tab into Grid and get the correct Edit behavior.

[rcm01Participant]

Hello AR; If you are still having the issue and I understand what you want to do, I did this with a jscript function that passes a json object to the controller. I call the function from a button I labled “Process Grid” on the htlm page. In the function I create an object that contains several properties including one that is called “rows”. I create rows by calling $(“#myGrid”).jqxGrid(‘getrows’). After the object is built I call JSON.stringify(myTransferObject) to create a JSON variable to pass to the controller.

This is some pseudo code (a.k.a. not tested) to give you an example of the parts.

function processGrid()
{
    var parentPrimaryKey = document.getElementById('ParentPrimaryKey').vlaue;
    var rows = $("#myGrid").jqxGrid('getrows');
    var myTransferObject = {
        ParentPrimaryKey: parentPrimaryKey
      , Rows: rows
    }
    var myTransferObjectJson = JSON.stringify(myTransferObject);
    $.ajax({
       url: "myContrller/addrows"
    ,  type: post
    ,  dataType: "json"
    ,  data: myTransferObjectJson
    ,  contentType: "application/json; charset=utf-8"
    ,  success:  function(data){ doSuccess(); }
    ,  error: function(data){ doError(); }
}

[rcm01Participant]

One more note concerning this. I did correct the column setting from autOpen to autoOpen. When this is set correctly, the gap I mentioned above prevents you from selecting a value with a mouse click since focus is lost.

[rcm01Participant]

Here’s the code

@{
    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" />
    <link rel="stylesheet" type="text/css" href="~/scripts/jqwidgets/styles/jqx.metro.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            //debugger;
            var myDropDownData = {};
            myDropDownData[0] = { ddID: 1, ddName: "A1" };
            myDropDownData[1] = { ddID: 2, ddName: "B1" };
            myDropDownData[2] = { ddID: 3, ddName: "C1" };
            var blankSource =
            {
                unboundmode: true,
                totalrecords: 15,
                datafields: [
                    { name: 'Column1', type: 'string' },
                    { name: 'Column2', type: 'string' }
                ]
            }
            var dataAdapter = new $.jqx.dataAdapter(blankSource);
            $("#jqxgrid").jqxGrid(
            {
                width: 920,
                source: dataAdapter,
                theme: "metro",
                selectionmode: 'singlecell',
                editable: true,
                autoheight: true,
                columnsresize: true,
                columns: [
                     { text: "Column 1", datafield: "Column1" }
                    , {
                        text: "Column 2"
                        , width: 100
                        , datafield: "Column2"
                        , columntype: 'dropdownlist'
                        , createeditor: function (row, column, editor) {
                            // assign a new data source to the dropdownlist.
                            //editor.jqxDropDownList({ source: myDropDownData, displayMember: "ddName", valueMember: "ddID" });
                            var list = ['a1', 'b2', 'b3'];
                            editor.jqxDropDownList({ source: list, autOpen: true });
                        }
                        , cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                            if (newvalue == "") return oldvalue;
                        }
                    }
                ]
            });
        });
    </script>
}
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style="float: left;" id="jqxgrid"></div>
    </div>
</body>

[rcm01Participant]

I ran into something similar when I would refresh the grid based on a selection from a dropdownlist. In my case each time I would change the dropdown list I was calling the same function to set the grid data. What I didn’t understand was that each time I called the function I was Adding another jqxGrid object to the #div vs. replacing the existing jqxGrid data set. So it would work the first time and fail subsequent times. My first solution was when entering this function to use the destroy to completely remove the existing div and it’s contents from the DOM then add the div tag back in. I’ve subsequently determined that setting a formatData function parameter on the DataAdapter allows me to get the value of the dropdown. Now the function checks to see if the jqxGrid has a source and if it does the jqxGrid(‘refresh’) is called.

[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>

[rcm01Participant]

I’m still getting an error which I’ve narrowed down to an issue with the property “renderer”. If I comment out the property, the second and subsequent selections work without a problem. If renderer is set, only the first selection works. Here’s the error that’s thrown

Unhandled exception at line 154, column 17 in http://localhost:41236/package
0x800a138f – Microsoft JScript runtime error: Unable to get value of the property ‘Title’: object is null or undefined
If there is a handler for this exception, the program may be safely continued

Also, I tried moving stuff around and defining the property in the initial instantiation under document ready as well as in the GetPackageDocs method. So I’m wondering do I need to move the function for renderer to another property like loadComplete as a work around.

Here’s the code at the moment.

@model IEnumerable<ALHCOS.Models.Package>
@{
    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">
     //prepare the data for the PackageDoc List
     var PackageDocSource =
     {
         datatype: "json",
         datafields: [
            { name: 'PackageDocID', type: 'string' },
            { name: 'Number', type: 'string' },
            { name: 'Title', type: 'string' },
         ],
         url: 'Package/GetPackageDocs',
         data: { n: 0 }
     }
     $(document).ready(function () {
         // prepare the data for Package Dropdown
         var source =
         {
             datatype: "json",
             datafields: [
             { name: 'PackageID', type: 'string' },
             { name: 'PackageName', type: 'string' }
             ],
             url: 'Package/GetPackages'
         };
         var dataAdapter = new $.jqx.dataAdapter(source);
         $("#myPackage").jqxDropDownList({ source: dataAdapter, width: '200px', height: '25px', displayMember: "PackageName", valueMember: "PackageID" });
         $("#LBXPackageDoc").jqxListBox({
              displayMember: 'Title', valueMember: 'PackageDocID', width: 200, height: 200
             //, renderer: function (index, label, value) {
             //    var datarecord = this.source.records[index];
             //    var displayText = datarecord.Title + " " + datarecord.Number;
             //    return displayText;
             //}
         });
         //Events
         $("#myPackage").on('select',
             function (event) {
                 var args = event.args;
                 var item = $("#myPackage").jqxDropDownList('getItem', args.index);
                 if (item != null) {
                     alert("Package is set: " + item.value);
                     PackageDocSource.data = { n: item.value }
                     GetPackageDocs();
                 }
             }
         );
     }
     );
    function GetPackageDocs() {
	    // prepare the data for the Package Docs List
        var adapter = new $.jqx.dataAdapter(PackageDocSource);
	    //dataAdapter2.dataBind();
   
        alert("in GetPackageDocs" + "\n" + PackageDocSource.data.n);
        $("#LBXPackageDoc").jqxListBox({
            source: adapter
            //, renderer: function (index, label, value) {
            //    var datarecord = this.source.records[index];
            //    var displayText = datarecord.Title + " " + datarecord.Number;
            //    return displayText;
            //}
        });
	
    }
 </script>
}
<div id="myPackage"></div>
<div id="LBXPackageDoc"></div>
		

[Author]

Posts