grid inline row buttons not active

[mustafaParticipant]

hello
save and edit buttons are is not active !

https://hizliresim.com/POJNmO

$("#FormGrid").jqxGrid(
	{		 
		source: dataAdapter,
		width: '100%',
		height: '500px',
		pageable: true,
		editable: true,
		showToolbar: true, 
		selectionmode: 'singlecell',
		altRows: true,
		theme: "bootstrap",
		ready: function () {
		       
		},
		pagerButtonsCount: 8,
		toolbarHeight: 35,
		renderToolbar: function (toolBar) {
		
			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 addButton = $(buttonTemplate);
			var editButton = $(buttonTemplate);
			var deleteButton = $(buttonTemplate);
			var cancelButton = $(buttonTemplate);
			var updateButton = $(buttonTemplate);
			container.append(addButton);
			container.append(editButton);
			container.append(deleteButton);
			container.append(cancelButton);
			container.append(updateButton);

			toolBar.append(container);
			addButton.jqxButton({ cursor: "pointer", enableDefault: false, height: 25, width: 25 });
			addButton.find('div:first').addClass('jqx-icon-plus');
			addButton.jqxTooltip({ position: 'bottom', content: "Add" });

			editButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false, height: 25, width: 25 });
			editButton.find('div:first').addClass('jqx-icon-edit');
			editButton.jqxTooltip({ position: 'bottom', content: "Edit" });

			deleteButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false, height: 25, width: 25 });
			deleteButton.find('div:first').addClass('jqx-icon-delete');
			deleteButton.jqxTooltip({ position: 'bottom', content: "Delete" });

			updateButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false, height: 25, width: 25 });
			updateButton.find('div:first').addClass('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('jqx-icon-cancel');
			cancelButton.jqxTooltip({ position: 'bottom', content: "Cancel" });

			var updateButtons = function (action) {
				switch (action) {
					case "Select":
						addButton.jqxButton({ disabled: false });
						 
						break;
					case "Unselect":
					 
						break;
					case "Edit":
					 
						break;
					case "End Edit":
						 
						break;

				}
			}

			var rowIndex = null;
			$("#FormGrid").on('rowSelect', function (event) {
				var args = event.args;
				rowIndex = args.index;
				updateButtons('Select');
			});
			$("#FormGrid").on('rowUnselect', function (event) {
				updateButtons('Unselect');
			});
			$("#FormGrid").on('rowEndEdit', function (event) {
				updateButtons('End Edit');
			});
			$("#FormGrid").on('rowBeginEdit', function (event) {
				updateButtons('Edit');
			});
			addButton.click(function (event) {
				if (!addButton.jqxButton('disabled')) {
					// add new empty row.
					$("#FormGrid").jqxGrid('addRow', null, {}, 'first');
					// select the first row and clear the selection.
					$("#FormGrid").jqxGrid('clearSelection');
					$("#FormGrid").jqxGrid('selectRow', 0);
					// edit the new row.
					$("#FormGrid").jqxGrid('beginRowEdit', 0);
					updateButtons('add');
				}
			});

			cancelButton.click(function (event) {
				if (!cancelButton.jqxButton('disabled')) {
					// cancel changes.
					$("#FormGrid").jqxGrid('endRowEdit', rowIndex, true);
				}
			});

			updateButton.click(function (event) {
				if (!updateButton.jqxButton('disabled')) {
					// save changes.
					$("#FormGrid").jqxGrid('endRowEdit', rowIndex, false);
				}
			});

			editButton.click(function () {
				if (!editButton.jqxButton('disabled')) {
					$("#FormGrid").jqxGrid('beginRowEdit', rowIndex);
					updateButtons('edit');

				}
			});
			deleteButton.click(function () {
				if (!deleteButton.jqxButton('disabled')) {
					$("#FormGrid").jqxGrid('deleteRow', rowIndex);
					updateButtons('delete');

				}
			});
		},

I removed this but the problem did not improve thank you

switch (action) {
					case "Select":
						addButton.jqxButton({ disabled: false });
						deleteButton.jqxButton({ disabled: false });
						editButton.jqxButton({ disabled: false });
						cancelButton.jqxButton({ disabled: true });
						updateButton.jqxButton({ disabled: true });
						break;
					case "Unselect":
					 
						break;
					case "Edit":
						addButton.jqxButton({ disabled: true });
						deleteButton.jqxButton({ disabled: true });
						editButton.jqxButton({ disabled: true });
						cancelButton.jqxButton({ disabled: false });
						updateButton.jqxButton({ disabled: false });
						break;
					case "End Edit":
						addButton.jqxButton({ disabled: false });
						deleteButton.jqxButton({ disabled: false });
						editButton.jqxButton({ disabled: false });
						cancelButton.jqxButton({ disabled: true });
						updateButton.jqxButton({ disabled: true });
						break;

				}

[HristoParticipant]

Hello mustafa,

That I saw in your example the buttons are disabled by default in the initial creation.
You should add few changes – that you mentioned in the final part of your post.
This example looks like:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-inline-editing.htm?light
There is used “double-click” to start editing one cell.
I would like to suggest you check the demo above and try to recreate it consistent with the options presented.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts