Edit Multiple Rows

[tranenParticipant]

Hi,

I would like to know if it’s possible to edit multiple rows at the same time?
In my case I have a button that when you click on it all the data need to be multiply by a number.
The data are shown in the datatable so it needs to get the new value directly (like in the edit function).
So far in your example i only see row by row.

Thanks

[ivailoParticipant]

Hi tranen,

You can update your data source first and then to use ‘updateBoundData’ to refresh the data in your table.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[tranenParticipant]

Hi ivailo,

Thanks for the answer but if i update the data source it will update all the table so why i need to use the ‘updateBoundData’?

[ivailoParticipant]

Hi tranen,

From your explanation is not very clear what’s your need. In short we don’t have method for editing multiple rows, but you can use a FOR loop + Editing function (setCellValue) through all the needed data.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[tranenParticipant]

Thanks ivailo,

I try with one value now I get the value and want to set value but it will only change the value if i click on the row and I got an error
here is the part of code I use:

` $(“#jqxbutton”).jqxButton({
theme: ‘energyblue’,
height: 30
});

$(‘#jqxbutton’).click(function () {
var value = $(“#table”).jqxDataTable(‘getCellValue’, 0, ‘value’);
value = value * 2;
console.log(value);
$(“#table”).jqxDataTable(‘setCellValue’, 0, ‘value’, value);
});

and here the error: Uncaught ReferenceError: sync is not defined jqx-all.js:7

[tranenParticipant]

I did some testing and see that i got the error if i use the edit button.
I show my code with and without.
First without the edit function:

      var source =
                {
                    localData: data,
                    dataType: "json",
                    dataFields:
                    [
                        { name: 'time', type: 'string' },
                        { name: 'value', type: 'number' },
                        { name: 'status', type: 'string' },
                    ]

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

                $("#table").jqxDataTable(
                 {
                     width: '100%',
                     pageable: false,
                     editable: true,
                     showToolbar: true,
                     height: 400,
                     source: dataAdapter,
                     columnsResize: false,
                     columns: [
                       { text: 'Date & Time', editable: false, dataField: 'time', width: '20%' },
                       { text: 'Value', dataField: 'value', width: '20%' },
                       {text: 'Status', dataField: 'status', width: '20%'},
                     ]
                
                 });
                $("#jqxbutton").jqxButton({
                    height: 30
                });

                $('#jqxbutton').click(function () {
                    var value = $("#table").jqxDataTable('getCellValue', 0, 'value');
                    value = value * 2;
                    console.log(value);
                    $("#table").jqxDataTable('setCellValue', 0, 'value', value);
                });

With this code there is no error.

Now I put the edit function:

 var source =
                {
                    localData: data,
                    dataType: "json",
                    dataFields:
                    [
                        { name: 'time', type: 'string' },
                        { name: 'value', type: 'number' },
                        { name: 'status', type: 'string' }
                    ],
                    updateRow: function (rowID, rowData, commit) {
                        commit(true);
                    }
                };
                var dataAdapter = new $.jqx.dataAdapter(source);

                $("#table").jqxDataTable(
                 {
                     width: '100%',
                     pageable: false,
                     editable: true,
                     showToolbar: true,
                     height: 400,
                     source: dataAdapter,
                     ready: function () {
                     },
                     renderToolbar: function(toolBar)
                     {
                         var toTheme = function (className) {
                             return className;
                         }
                         // appends buttons to the status bar.
                         var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
                         var buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>";
                         var editButton = $(buttonTemplate);
                         var cancelButton = $(buttonTemplate);
                         var updateButton = $(buttonTemplate);
                         container.append(editButton);
                         container.append(cancelButton);
                         container.append(updateButton);
                         toolBar.append(container);
                         editButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false,  height: 25, width: 25 });
                         editButton.find('div:first').addClass(toTheme('jqx-icon-edit'));
                         editButton.jqxTooltip({ position: 'bottom', content: "Edit"});
                         updateButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false,  height: 25, width: 25 });
                         updateButton.find('div:first').addClass(toTheme('jqx-icon-save'));
                         updateButton.jqxTooltip({ position: 'bottom', content: "Save Changes"});
                         cancelButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false,  height: 25, width: 25 });
                         cancelButton.find('div:first').addClass(toTheme('jqx-icon-cancel'));
                         cancelButton.jqxTooltip({ position: 'bottom', content: "Cancel"});
                         var updateButtons = function (action) {
                             switch (action) {
                                 case "Select":
                                     editButton.jqxButton({ disabled: false });
                                     cancelButton.jqxButton({ disabled: true });
                                     updateButton.jqxButton({ disabled: true });
                                     break;
                                 case "Unselect":
                                     editButton.jqxButton({ disabled: true });
                                     cancelButton.jqxButton({ disabled: true });
                                     updateButton.jqxButton({ disabled: true });
                                     break;
                                 case "Edit":
                                     editButton.jqxButton({ disabled: true });
                                     cancelButton.jqxButton({ disabled: false });
                                     updateButton.jqxButton({ disabled: false });
                                     break;
                                 case "End Edit":
                                     editButton.jqxButton({ disabled: false });
                                     cancelButton.jqxButton({ disabled: true });
                                     updateButton.jqxButton({ disabled: true });
                                     break;
                             }
                         }
                         var rowIndex = null;
                         $("#table").on('rowSelect', function (event) {
                             var args = event.args;
                             rowIndex = args.index;
                             updateButtons('Select');
                         });
                         $("#table").on('rowUnselect', function (event) {
                             updateButtons('Unselect');
                         });
                         $("#table").on('rowEndEdit', function (event) {
                             updateButtons('End Edit');
                         });
                         $("#table").on('rowBeginEdit', function (event) {
                             updateButtons('Edit');
                         });
                         cancelButton.click(function (event) {
                             if (!cancelButton.jqxButton('disabled')) {
                                 // cancel changes.
                                 $("#table").jqxDataTable('endRowEdit', rowIndex, true);
                             }
                         });
                         updateButton.click(function (event) {
                             if (!updateButton.jqxButton('disabled')) {
                                 // save changes.
                                 $("#table").jqxDataTable('endRowEdit', rowIndex, false);
                             }
                         });
                         editButton.click(function () {
                             if (!editButton.jqxButton('disabled')) {
                                 $("#table").jqxDataTable('beginRowEdit', rowIndex);
                                 updateButtons('edit');
                             }
                         });
                     },
                     columnsResize: false,
                     columns: [
                       { text: 'Date & Time', editable: false, dataField: 'time', width: '20%' },
                       { text: 'Value', cellsFormat: 'f', dataField: 'value', width: '20%' },
                       {text: 'Status', dataField: 'status', width: '20%',
                           columnType: 'custom',
                           createEditor: function (row, cellvalue, editor, width) {
                               var source = ["VAL", "NVE", "VED", "ESD"];
                               editor.jqxDropDownList({ source: source, displayMember: 'status', valueMember: 'status', width: width, height: '25px', dropDownHeight: 100, autoOpen: true });
                            },
                            initEditor: function (row, cellvalue, editor, celltext, width) {
                                editor.jqxDropDownList({ width: width, height: '25px' });
                                editor.val(cellvalue);
                            },
                            getEditorValue: function (row, cellvalue, editor) {
                                return editor.val();
                            }}
                     ]
                
                 });
                $("#jqxbutton").jqxButton({
                    height: 30
                });

                $('#jqxbutton').click(function () {
                    var value = $("#table").jqxDataTable('getCellValue', 0, 'value');
                    value = value * 2;
                    console.log(value);
                    $("#table").jqxDataTable('setCellValue', 0, 'value', value);
                });

With this code I got the error I describe before.
is there a way I can make it works with both function?
Thanks

[ivailoParticipant]

Hi tranen,

Look at this fiddle. Everything seems to work corect.
This “sync” mentioned in your error message is not in your presented source. Maybe it’s related with the rest of your code.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[tranenParticipant]

Thanks ivailo,

I try your code and it works for me as well. I guess my code before must have something wrong somewhere.
Thank you for your help!

[Author]

Posts