Datatable – Inline edit

[SwapnilParticipant]

Hi Peter,
Couple of issues I am facing with an inline editable DataTable with add, edit, delete cancel buttons.
Validation : I have on couple of columns. When I enter wrong value in one of the columns, it does validate it. But if there is error and I try to read the value from that row, it does not return me the values for entire row I entered (the wrong values).
Page scrolls: When I click Add/Cancel button the page scrolls to the start of Add button.
Button style does not update: I have buttons for various function instead of the icons. If I click Add, it will add a new row and it will disable the Add button, and when I click cancel it will enable the Add button but it will not change the CSS class on that and it still appears to be disabled. this is because after clicking Cancel button, the CSS class of Add button still shows “jqx-fill-state-hover”

Please help me fix these issue.
Thanks,
Swapnil.

    $("#datatable").jqxDataTable(
    {
        width: 880,
        source: dataAdapter,
        theme: theme,
        height: 680,
        pageable: true,
        pageSize: 20,
		autoRowHeight: false,
        editable: true,
        showToolbar: true,
        altrows: true,
        pagerButtonsCount: 5,
        toolbarHeight: 40,
        renderToolbar: function(toolBar)
        {
            // appends buttons to the status bar.
            var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
            var addButton = $(getButtonTemplate("Add"));
            var editButton = $(getButtonTemplate("Edit"));
            var deleteButton = $(getButtonTemplate("Delete"));
            var cancelButton = $(getButtonTemplate("Cancel"));
            container.append(addButton);
            container.append(editButton);
            container.append(deleteButton);
            container.append(cancelButton);
            toolBar.append(container);
            addButton.jqxButton({theme: theme});
            editButton.jqxButton({theme: theme});
            deleteButton.jqxButton({theme: theme});
            cancelButton.jqxButton({theme: theme});

			var updateButtons = function (action) {
                switch (action) {
                    case "Select":
						addButton.jqxButton({ disabled: false });
						deleteButton.jqxButton({ disabled: false });
						editButton.jqxButton({ disabled: false });
						cancelButton.jqxButton({ disabled: true });
						break;
					case "Unselect":
						addButton.jqxButton({ disabled: false });
						deleteButton.jqxButton({ disabled: true });
						editButton.jqxButton({ disabled: true });
						cancelButton.jqxButton({ disabled: true });
						break;
					case "Edit":
						addButton.jqxButton({ disabled: true });
						deleteButton.jqxButton({ disabled: true });
						editButton.jqxButton({ disabled: true });
						cancelButton.jqxButton({ disabled: false });
						break;
					case "End Edit":
						addButton.jqxButton({ disabled: false });
						deleteButton.jqxButton({ disabled: false });
						editButton.jqxButton({ disabled: false });
						cancelButton.jqxButton({ disabled: true });
						break;
                }
            }
            var rowIndex = null;
            $("#carrierpostingdatatable").on('rowSelect', function (event) {
                var args = event.args;
                rowIndex = args.index;
                updateButtons('Select');
            });
            $("#carrierpostingdatatable").on('rowUnselect', function (event) {
                updateButtons('Unselect');
            });
            $("#carrierpostingdatatable").on('rowEndEdit', function (event) {
                updateButtons('End Edit');
            });
            $("#carrierpostingdatatable").on('rowBeginEdit', function (event) {
                updateButtons('Edit');
            });
            addButton.click(function (event) {
                if (!addButton.jqxButton('disabled')) {
					if(checkEmptyValues()) {
						//get the scroll Y coordinate
						var yscroll = getYScrollingPosition();
						// add new empty row.
						var username = context.userFirstName() + ' ' + context.userLastName();
						var insertData = {	'userAddedName': username,
											'dateAdded': new Date()};
						$("#carrierpostingdatatable").jqxDataTable('addRow', null, insertData, 'first');
						// select the first row and clear the selection.
						$("#carrierpostingdatatable").jqxDataTable('clearSelection');
						$("#carrierpostingdatatable").jqxDataTable('selectRow', 0);
						// edit the new row.
						$("#carrierpostingdatatable").jqxDataTable('beginRowEdit', 0);
						//set back the scroll position
						setTimeout(function (){window.scrollTo(0, yscroll);},40);
					}
                }
            });
            editButton.click(function () {
                if (!editButton.jqxButton('disabled')) {
                    $("#carrierpostingdatatable").jqxDataTable('beginRowEdit', rowIndex);
                }
				updateButtons('Edit');
            });
            deleteButton.click(function () {
                if (!deleteButton.jqxButton('disabled')) {
                    $("#carrierpostingdatatable").jqxDataTable('deleteRow', rowIndex);
                }
				updateButtons('Select');
            });
            cancelButton.click(function (event) {
                if (!cancelButton.jqxButton('disabled')) {
                    //get the scroll Y coordinate
                    var yscroll = getYScrollingPosition();
                    // cancel changes.
                    $("#carrierpostingdatatable").jqxDataTable('endRowEdit', rowIndex, true);
                    //set back the scroll position
                    setTimeout(function (){window.scrollTo(0, yscroll);},40);
                }
				updateButtons('End Edit');
            });
         },
        columns: [
			{ text: 'Carrier Code', dataField: 'carrierCode', validation: validateCarrier, width: 110,
				cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
									return trimValue(value).toUpperCase();
								}
			},
			{ text: 'Days To Match', dataField: 'dayMatch', cellsFormat:'n', validation: daysRange, cellsAlign: 'right', align: 'right', width: 110},
			{ text: 'User Added', editable: false, dataField: 'userAddedName', width: 225},
			{ text: 'Date Added', editable: false, cellsFormat: 'MM/dd/yyyy', dataField: 'dateAdded', width: 100},
			{ text: 'Last Upd User', editable: false, dataField: 'lastUserUpdName', width: 225},
			{ text: 'Last Upd Date', editable: false, cellsFormat: 'MM/dd/yyyy', dataField: 'lastUpd', width: 110}
        ]
    });

   function getButtonTemplate(buttonName) {
        return "<button class='btn' type='button' style='float:left;padding:5px;margin:5px;width:60px;'>" + buttonName + "</button>";
    }

[Peter StoevKeymaster]

Hi Swapnil,

If you wish, you can use the jQuery’s addClass, removeClass methods to dynamically add/remove CSS classes.

Best Regards,
Peter Stoev

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

[SwapnilParticipant]

Hi Peter,
Thanks.
What about the Validation error row details? how can I get those if there is error.
Also How to stop the page scroll on click of ADD/Cancel?
Thanks,
Swapnil.

[SwapnilParticipant]

Hi Peter, one more question, how I can reload the data table with new data? I am using local data binding.
Thanks,
Swapnil.

[Peter StoevKeymaster]

Hi Swapnil,

– Setting the source property to a new dataAdapter instance will reload the DataTable with new data.
– On focus, each HTML Element is brought into view by the web browser. If you want to stop that default behavior, when you bind to the click event, in the click event handler call event.preventDefault() and event.stopPropagation() methods of the Event Object.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[SwapnilParticipant]

Peter,
event.preventDefault() and event.stopPropagation()
I tried both these methods but none worked. It still scrolls.

I have one more issue with this table. I have validation on first column and when there is only one row in table the error message is not visible. When I see the dom it seems like the left property on div is set to -200 and because of that its not visible.
What should I do to bring it up?

Thanks,
Swapnil.

[Peter StoevKeymaster]

Hi Swapnil,

1. I do not know how you implemented these. It is possible that something more is required in your scenario. If the default Focus behavior is not overriden, the page will scroll on focus change.
2. Would you give me an example?

Best Regards,
Peter Stoev

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

[SwapnilParticipant]

Hi Peter,

2. It happen for every row which is last in my data table.
Below is the simple function which i have for validation of the first column.(Datatable code is in first post.)
Thanks,
Swapnil.

function validateCarrier(cell, value){
		if(trimValue(value) == ''){
			return {message: "Please enter a Carrier Code.", result: false};
		}
                if(checkUniqueCarrier(value, cell.row) > 0) {
			return {message: "Carrier "+ value +" already exists. Please correct.", result: false};
		}
		if(!carrierExistInDB(value)) {
			return {message: "Carrier "+ value +" is not valid. Please correct.", result: false};
		}
        return true;
    }

[Author]

Posts