jQWidgets Forums

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

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

Author

Facing an issue with editor.jqxcombobox in Editable Grid Posts

April 2, 2013 at 10:53 am Facing an issue with editor.jqxcombobox in Editable Grid #18396

Syai

Participant

Hi,

Can anyone help me on this. I’ve different comboboxes in the grid where the paging is enabled. I’m loading the combobox on “createeditor”. The problem is when I goto next page and click to edit the combobox, it should load with the itmes but it is becoming blank. Below is the piece of code I’m using. Need quick help on this.

createeditor: function (row, cellvalue, editor) {


                          editor.jqxComboBox({ displayMember: 'BookName', valueMember: 'BookId', source: DataAdapter, dropDownWidth: 200 });
                          var items = editor.jqxComboBox('getItems');

                          $.each(items, function () {

                              var item = this; item.title = item.label;

                          });

}
 var bookSource =

        {

            datatype: "json",

            datafields: [

                { name: 'BookName' },

                { name: 'BookId' }

            ],

            id: 'BookId',

            url: '@Url.Action("GetBooksData", "BookStore")'

        };

//INITIALIZE THE DATA ADAPTER FOR THE BOOK SOURCE var DataAdapter = new $.jqx.dataAdapter(bookSource, { autoBind: false, async: false });

Regards,
Syai

April 2, 2013 at 10:56 am Facing an issue with editor.jqxcombobox in Editable Grid #18398

Peter Stoev

Keymaster

Hi Syai,

Your DataAdapter’s code is below the ComboBox’s function so I suppose that in the context of the “createeditor” DataAdapter is undefined.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 2, 2013 at 11:22 am Facing an issue with editor.jqxcombobox in Editable Grid #18402

Syai

Participant

Peter Stoev,

I’ve declared the source and dataadapter above the grid initialization itself. For the first time when I click on the cell of combobox, it is working fine till going to another page.

Regards,
Syai

April 2, 2013 at 11:24 am Facing an issue with editor.jqxcombobox in Editable Grid #18403

Syai

Participant

When I’m debugging, before the loading of dataadapter, the script of jquery 1.9.0 is tried to getting executed and that didn’t come out of that script. Does it make any sense? If not please let me know.

Regards

April 2, 2013 at 11:35 am Facing an issue with editor.jqxcombobox in Editable Grid #18405

Peter Stoev

Keymaster

Hi Syai,

Please, provide a sample(JS + HTML) which demonstrates your scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 2, 2013 at 12:01 pm Facing an issue with editor.jqxcombobox in Editable Grid #18408

Syai

Participant

Hi Peter,

Below is the code that i’m using. And below the code I’ve given some comments related to my problem.

@{
    ViewBag.Title = "TestPageJQGrid";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    TestPageJQGrid</h2>
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example demostrates how we can manipulate data at client
        side. The Grid plugin provides you callback functions when you add, remove or update
        a row. </title>
    
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'office';
            // 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 dateValues = ["12/31/2012", "12/31/2012", "02/20/2012", "12/31/2012", "01/12/2012", "02/20/2012", "01/12/2012", "10/12/2012", "02/20/2012"]
            var dateValues = ["31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012"]
            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];
                row["Date"] = dateValues[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                return row;
            }
            for (var i = 0; i < 10; 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: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' },
{ name: 'Date', type: 'date', format: 'dd/MM/yyyy' }
],
    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);
            var self = this;
            var supplierSource =
        {
            datatype: "json",
            datafields: [
                { name: 'TutorName' },
                { name: 'TutorId' }
            ],
            id: 'supTutorId',
            //root: 'RowsTutors',
            url: '@Url.Action("GetTutorsData", "Controller")'
        };
            //INITIALIZE THE DATA ADAPTER FOR THE SUPPLIER SOURCE
            var supplierDataAdapter = new $.jqx.dataAdapter(supplierSource, { autoBind: false, async: false });
            // initialize jqxGrid            
            $("#jqxgrid").jqxGrid(
 {
     width: 500,
     height: 350,
     pageable: true,
     source: dataAdapter,
     autoheight: true,
     theme: theme,
     editable: true,
     columns: [{
         text: 'First Name', datafield: 'firstname', width: 100
     },
 { text: 'Last Name', datafield: 'lastname', width: 100 },
 { text: 'Date', datafield: 'Date', width: 100, columntype: 'datetimeinput', width: 90, align: 'center', cellsalign: 'right', cellsformat: "dd/MM/yyyy",
     createeditor: function (row, cellvalue, editor) {
         editor.jqxDateTimeInput({ culture: 'fr-FR' });
     }
 },
 { text: 'Product', datafield: 'productname', align: 'center', cellsalign: 'center', width: 180 },
 { text: 'Quantity', datafield: 'quantity', width: 80, align: 'center', cellsalign: 'right' },
 { text: 'Unit Price', datafield: 'price', width: 90, align: 'center', cellsalign: 'right', cellsformat: 'c2' },
 { text: 'Total', datafield: 'total', width: 100, align: 'center', cellsalign: 'right', cellsformat: 'c2' },
 { text: 'Supplier', datafield: 'Tutor', columntype: 'combobox', align: 'center', width: 90,
     createeditor: function (row, cellvalue, editor) {
         debugger;
         editor.jqxComboBox({ displayMember: 'TutorName', valueMember: 'TutorId', source: supplierDataAdapter, dropDownWidth: 200 });
         debugger;
         var items = editor.jqxComboBox('getItems');
         $.each(items, function () {
             var item = this; item.title = item.label;
         });
     }
 }
 ]
 });
            $("#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, datarow, 'top');
                $('#jqxgrid').jqxGrid('gotopage', -1);
            });
            // 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);
                }
            });
        });   
    </script>
</head>
<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>
    </div>
</body>
</html>

Step 1: If you observe the createeditor of Supplier, When we click on the cell, it triggers and first debugger is getting executed and binding the required items to the combobox.

Step 2: Now I’m navigating page 2 of the grid.

Step 3: Again I clicked on the cell of “supplier column”. Here the debugger has to get executed and have to bind the items to combobox by getting from the server. This is not happening.
When I’m clicking on the cell and try to debug, the execution of script is entered into jquery-1.9.0.min.js and then to the “jqxgrid.js” and nothing is happening. The combobox is remained as blank without the items.

Regards,
Syai

April 2, 2013 at 12:37 pm Facing an issue with editor.jqxcombobox in Editable Grid #18411

Peter Stoev

Keymaster

Hi Syai,

The “createeditor” is called only once – when the editor is created. If you need a function which is called each time an editor is opened, use “initeditor”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 2, 2013 at 12:52 pm Facing an issue with editor.jqxcombobox in Editable Grid #18415

Syai

Participant

Hi Peter,

I tried with the initeditor also. I’m facing the same issue.

Regards,
Syai

April 2, 2013 at 2:27 pm Facing an issue with editor.jqxcombobox in Editable Grid #18422

Peter Stoev

Keymaster

Hi Syai,

Here’s a working sample based on your code with jQWidgets 2.8. The items in the ComboBox are dispalyed.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalize/globalize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'office';
            // 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 dateValues = ["12/31/2012", "12/31/2012", "02/20/2012", "12/31/2012", "01/12/2012", "02/20/2012", "01/12/2012", "10/12/2012", "02/20/2012"]
            var dateValues = ["31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012"]
            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];
                row["Date"] = dateValues[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                return row;
            }
            for (var i = 0; i < 20; 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: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' },
{ name: 'Date', type: 'date', format: 'dd/MM/yyyy' }
    ],
    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);
            var self = this;
         var tutorials = [{ 'TutorName': 'Name 1', 'TutorId': '1' }, { 'TutorName': 'Name 2', 'TutorId': '2' }];
         var supplierSource =
         {
            datatype: "json",
            datafields: [
                { name: 'TutorName' },
                { name: 'TutorId' }
            ],
            id: 'supTutorId',
            //root: 'RowsTutors',
            localdata: tutorials
        };
            //INITIALIZE THE DATA ADAPTER FOR THE SUPPLIER SOURCE
            var supplierDataAdapter = new $.jqx.dataAdapter(supplierSource, { autoBind: false, async: false });
            // initialize jqxGrid            
            $("#jqxgrid").jqxGrid(
           {
               width: 500,
               height: 350,
               pageable: true,
               source: dataAdapter,
               autoheight: true,
               theme: theme,
               editable: true,
               columns: [{
                   text: 'First Name', datafield: 'firstname', width: 100
               },
                   { text: 'Last Name', datafield: 'lastname', width: 100 },
                   {
                       text: 'Date', datafield: 'Date', width: 100, columntype: 'datetimeinput', width: 90, align: 'center', cellsalign: 'right', cellsformat: "dd/MM/yyyy",
                       createeditor: function (row, cellvalue, editor) {
                           editor.jqxDateTimeInput({ culture: 'fr-FR' });
                       }
                   },
                   { text: 'Product', datafield: 'productname', align: 'center', cellsalign: 'center', width: 180 },
                   { text: 'Quantity', datafield: 'quantity', width: 80, align: 'center', cellsalign: 'right' },
                   { text: 'Unit Price', datafield: 'price', width: 90, align: 'center', cellsalign: 'right', cellsformat: 'c2' },
                   { text: 'Total', datafield: 'total', width: 100, align: 'center', cellsalign: 'right', cellsformat: 'c2' },
                   {
                       text: 'Supplier', datafield: 'Tutor', columntype: 'combobox', align: 'center', width: 90,
                       createeditor: function (row, cellvalue, editor) {
                           debugger;
                           editor.jqxComboBox({ displayMember: 'TutorName', valueMember: 'TutorId', source: supplierDataAdapter, dropDownWidth: 200 });
                           debugger;
                           var items = editor.jqxComboBox('getItems');
                           $.each(items, function () {
                               var item = this; item.title = item.label;
                           });
                       }
                   }
               ]
           });
            $("#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, datarow, 'top');
                $('#jqxgrid').jqxGrid('gotopage', -1);
            });
            // 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);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='DDD' 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>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 2, 2013 at 3:19 pm Facing an issue with editor.jqxcombobox in Editable Grid #18430

Syai

Participant

Hi Peter,

I’ve gone through the flow of code executing. I found the problem while binding the data to combobox through “dataadapter”. Below is the error it is giving. Could you please help me to resolve this.

The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.

Regards,
Syai

April 2, 2013 at 4:12 pm Facing an issue with editor.jqxcombobox in Editable Grid #18433

Peter Stoev

Keymaster

Hi Syai,

1. That exception is thrown by jqxGrid when you try to do some action while the Grid’s data is not still loaded. To perform that action, bind to the “bindingcomplete” event of jqxGrid and call your property or method which raises it in the event handler.

2. Did you try my code?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 3, 2013 at 9:16 am Facing an issue with editor.jqxcombobox in Editable Grid #18490

Syai

Participant

Hi Peter,

I’ve tried the code you provided with version 2.8. The problem I faced is because of serverside paging. It is working fine now.

Thanks,
Syai

November 13, 2014 at 10:20 am Facing an issue with editor.jqxcombobox in Editable Grid #62679

vamsee

Participant

Hi Peter,
I'm using a grid that contains a editor.jqxcombobox in Editable Grid in each row. Actually the moto is that if the user enters a new data other than the data present in the combobox it should get added in the combobox and should appear for another combobox. While using the following code I'm getting an exception and data is added twice in the combo box.Here is the code.

  $("#jqxgrid").jqxGrid(
    {
        source: dataAdapter,
        width: 735,
        height: 248,
        editable: true,
        keyboardNavigation: true,
        theme: theme,
        ready: function () {
            ShowAllUnitAmoundColumns();
        },
        virtualmode: false,
        columns: [
            {
                text: 'Charge Description', columntype: 'textbox', datafield: 'ChargeDescription', width: 180, editable: false
            },
            {
                text: 'Charge Frequency', columntype: 'dropdownlist', displayfield: 'ChargeFrequency', datafield: 'ChargeFrequencyId', width: 150, editable: false
            },
    {
        text: 'Vendor Name', columntype: 'combobox', displayfield: 'VendorName1', datafield: 'Vendor1Id', width: 150, cellsrenderer: cellsrenderer, cellclassname: 'highlight',
        createeditor: function (row, value, editor) {
            _comboEditor = editor;
            editor.jqxComboBox({
                source: VendorDataAdapter, displayMember: 'vendor_name', valueMember: 'vendor_id', autoComplete: true,
                id: 'ddlVendorName1', searchMode: 'containsignorecase', autoComplete: true, itemHeight: 23, scrollBarSize: 10, dropDownWidth: 210
            });
            editor.on('click', function (event) {
                // Fix for div being rendered behind the dialog box
                $("div[id^='innerListBoxjqxWidget']").parent("div").css('z-index', '9999999999');
                //$("div[id^='innerListBoxjqxWidget']").css('background-color', 'whilte');
                //$("div[id^='innerListBoxjqxWidget']").css('color', 'white');
            });

            editor.on('change', function (event) {
                if (!_objResult) {
                    return;
                }
                // Changing the adapter source and reassigning it. - Abijeet 17th October - 17:30
                VendorDataAdapter._source.localdata.unshift({ vendor_id: _objResult.value, vendor_name: _objResult.label });
               editor.id.jqxComboBox({ source: VendorDataAdapter, displayMember: 'vendor_name', valueMember: 'vendor_id' });
                _objResult = null;
            });
            editor.on('select', function (event) {
                $("div[id^='innerListBoxjqxWidget']").parent("div").css('z-index', '9999999999');
                if (!_objResult) {
                    return;
                }
                // Changing the adapter source and reassigning it. - Abijeet 17th October - 17:30
                VendorDataAdapter._source.localdata.unshift({ vendor_id: _objResult.value, vendor_name: _objResult.label });
                $(this).jqxComboBox({ source: VendorDataAdapter, displayMember: 'vendor_name', valueMember: 'vendor_id' });
                _objResult = null;
            });
            editor.on('open', function (event) {
                // When implementing autocomplete, scrollbar is not visible, this code is to rectify that - Abijeet - 9/26/2013 3:34:39 AM
                $("div[id^='verticalScrollBarinnerListBox']").css('visibility', 'visible');
            });
        },
        geteditorvalue: function (row, cellvalue, editor) {
            // Before returning the value, make sure that you set selVendorId and selvendorname values
            // Modifying again to ensure that it works with 3.0.3
            var objResult = GetEditorValForJqxGrid(editor, cellvalue);
            selvendorname1 = objResult.label;
            selVendor1Id = objResult.value;
            return objResult;
        }
    }
 function GetEditorValForJqxGrid(editor, cellvalue) {
        var vendorName = editor.val();

        if (vendorName == "") {
            return { label: ($(editor).jqxComboBox("getItemByValue", cellvalue)).label, value: cellvalue };
        }
        var vendorLabel = editor.jqxComboBox('getItemByValue', vendorName);
        var comparator = !vendorLabel ? vendorName : vendorLabel.label;

        var itemsCbBox = _comboEditor.jqxComboBox('getItems');
        for (var i = 0; i < itemsCbBox.length; ++i) {
            if (comparator === itemsCbBox[i].label) {
                return { label: itemsCbBox[i].label, value: itemsCbBox[i].value };
            }

}
_objResult = { label: vendorName, value: vendorName + ‘_0’ };
return _objResult;
}

November 13, 2014 at 11:10 am Facing an issue with editor.jqxcombobox in Editable Grid #62689

Peter Stoev

Keymaster

Hi vamsee,

The editors are to be used as editors in the Grid. Saving the editor’s instance in some variable and trying to use it as a standalone widget is wrong approach. We have excellent demo which shows how to create and use ComboBox editor – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customcomboboxcolumn.htm?arctic. We also have Grid API for setting, getting Cell Values, Beginning or Ending the Editing so my suggestion for you is to use the Grid using the approaches shown in the demos and documentation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.