I use a template to create a button column (please see below).
{headerText: "", key: "ContactID", dataType: "number", template: "<input type=\"button\" value=\"edit\" data-id=\"${ContactID}\" onclick=\"OnEditCell(this)\"/>", width: "50px" },
I have a problem that I cannot use the tab key to tab into the column button to invoke the event in edit mode. I must use the mouse to click to fire the event. I have tried different editorOption but still could not resolve this. Could you please help? thanks
Hello,
I've tried setting the template and I'm able to navigate using the tab key to the custom button and I can press it with the space bar key
Could you please attach a sample demonstrating the issue?
regards
Lyubo
Hi Lyubo,
It seems that I cannot attach a zip file (my whole project) to this response. Anyway, I attached a screenshot and my code below.
Steps 1. Click on the Display name cell to make it in edit mode
Step 2. tab
<code>
<%@ Page Language="VB" AutoEventWireup="false" Inherits="WebApplication1._Default" Codebehind="Default.aspx.vb" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>igGrid Demo</title>
<link href="http://cdn-na.infragistics.com/jquery/20122/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20122/latest/css/structure/infragistics.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20122/latest/css/structure/jquery.ui.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20122/latest/css/structure/jquery.ui.all.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20122/latest/css/structure/jquery.ui.base.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20122/latest/css/structure/jquery.ui.core.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20122/latest/css/structure/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20122/latest/css/structure/jquery.ui.slider.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20122/latest/css/structure/jquery.ui.theme.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20122/latest/css/structure/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js" type="text/javascript"></script> <script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.js" type="text/javascript"></script> <script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script> <%--<script src="http://localhost/ig_ui12.1/js/modules/infragistics.templating.js" type="text/javascript"></script>--%> <%--<script src="infragistics.ui.grid.columnmoving.js" type="text/javascript" ></script>--%> <%--<script src="infragistics.ui.grid.filtering.js" type="text/javascript" ></script>--%> <script src="modernizr-2.6.2.js" type="text/javascript" ></script>
<!--Data source--> <script src="dataSource.js" type="text/javascript"> </script>
<style type="text/css">
.comboItemContainer { width: 280px; white-space: normal; }
.typeID { float: left; width: 100px; } .typeName { float: left; width: 90px;
} .typeNameValue { font-weight: normal; float: left; width: 90px;
} .borderSet { border-bottom-color: Black; border-bottom-width: 1px; border-bottom-style: Solid; } #saveAction { left: 750px; position: relative; }
#grid1 tr { height: 20px; }
#grid1 tr td { white-space: nowrap; }
</style> <script type="text/javascript">
var contactTitleDataJSON = [ { "Title": "Superintendent", "Grade": "Manager", "Region": "North America" }, { "Title": "Admin", "Grade": "Office", "Region": "Europe" }, { "Title": "Agent", "Grade": "Operation", "Region": "Asia" }, { "Title": "Engineer", "Grade": "Operation", "Region": "Other" } ]; $.ig.loader({ scriptPath: "http://cdn-na.infragistics.com/jquery/20122/latest/js/", cssPath: "http://cdn-na.infragistics.com/jquery/20122/latest/css/", resources: 'igGrid.*' });
function onEditRowStarted(event, ui) { }
function onEditCellStarted(event, ui) { }
function onButtonClick(id) { alert(id); }
function onDataRendered() { } function onDataDirty(event, ui) { return false; } function onSaveChanges() { $.ajax({ url: "/Default.aspx/UpdateContact", type: "post" }); return false; }
function OnEditCell() { alert("tab click"); } $("#grid1").live("iggridupdatingdatadirty", onDataDirty);
$("#saveChanges").live('igbuttonclick', onSaveChanges); $.ig.loader(function () { $('#grid1').igGrid({ virtualization: false, virtualizationMode: 'continuous', autoGenerateColumns: false, width: '600px', height: '400px', avgRowHeight: 30, adjustVirtualHeights: true, autoCommit: false, columns: [ { headerText: "Company ID", key: "CompanyID", width: "50px", dataType: "string" }, { headerText: "DisplayName", key: "DisplayName", width: "120px", dataType: "string", maxLength: 255 }, { headerText: "", key: "ContactID", dataType: "number", template: "<input type=\"button\" value=\"edit\" data-id=\"${ContactID}\" onclick=\"OnEditCell(this)\"/>", width: "50px" }, { headerText: "Prefix", key: "Prefix", width: "50px", dataType: "string" }, { headerText: "IsMainContact", key: "IsMainContact", width: "80px", dataType: "bool", format: "checkbox" }, { headerText: "Title", key: "Title", width: "100px", dataType: "string" }, { headerText: "Tel", key: "Tel", width: "100px", dataType: "string" }, { headerText: "Email", key: "Email", width: "150px", dataType: "string" }, { headerText: "Notes", key: "Notes", width: "50px", dataType: "string" }, { headerText: "LastModified?", key: "LastModified", width: "50px", dataType: "date", format: "dd/MM/yyyy" } ], //dataSource: "/GetData.ashx", dataSource: namedData, primaryKey: 'ContactID', features: [ { name: 'Updating', editRowStarting: onEditRowStarted, editCellStarting: onEditCellStarted, enableAddRow: true, enableDeleteRow: true, startEditTriggers: "click", editMode: "cell", columnSettings: [ { columnKey: "DisplayName", readOnly: false, }, { columnKey: "ContactID", readOnly: false, editorType: null }, { columnKey: "LastModified", editorType: 'datepicker' }, { columnKey: "Title", editorType: 'combo', required: true, editorOptions: { mode: "dropdown", dataSource: contactTitleDataJSON, readOnly: true, dropDownWidth: 280, headerTemplate: "<div class='comboItemContainer'><div class='typeID borderSet' style='background-color: #3FC2FA;'>Title</div><div class='typeName borderSet' style='background-color: #3FC2FA;'>Grade</div><div class='typeNameValue borderSet' style='background-color: #3FC2FA;'>Region</div></div>", itemTemplate: "<div class='comboItemContainer'><div class='typeID borderSet'>${Title}</div><div class='typeName borderSet'>${Grade}</div><div class='typeNameValue borderSet'>${Region}</div></div>"
} }, { columnKey: "Notes", editorType: 'string' } ] }, { name: "Selection", mode: "cell", multipleSelection: false }, { name: 'Resizing', deferredResizing: false, allowDoubleClickToResize: true } ], dataRendered: onDataRendered
}); }); </script> <style type="text/css"> body { font-size:12px; } </style> </head> <body> <form runat="server"> <table id="grid1"></table> <br /> <div id="saveAction"> <asp:HiddenField ID="contactValues" runat="server" /> </div> </form> </body> </html>
</code>
you will see that if we tab into the button cell, it will change to a text editor. I cannot invoke the button click event. If I change the readonly to true, I cannot tab into the button cell at all.
Hello aschoi,
When you set a template to the column it will only be applied to the cell when it’s not in edit mode.
By default tabbing would enter edit mode of the next cell so in your case you’d want to prevent that and set the focus to the button instead.
One possible solution would be to use the “editCellStarted” event and in it force the cell with the button out of edit mode and set the focus to the cell.
Then to not break the tabbing navigation you could handle the keydown event of the button and on tabbing enter edit mode of the next cell.
So for example that would look like this:
editCellStarted: function (evt, ui) {
if (ui.columnKey == "Name") {
var cell = $("#grid1").igGrid("cellAt", ui.columnIndex, ui.rowID);
$("#grid1").igGridUpdating("endEdit");
cell.children[0].focus();
}
Basically check if you’ve entered the column with the button template, end the editing manually and set the focus to the button that’s inside the cell.
And for the button’s keydown event it could look like this:
function KeyDownTest(e,btn) {
if (e.keyCode == 9) {
var rowInd = $(btn).parent().parent()[0].rowIndex;
var cellInd = $(btn).parent()[0].cellIndex+1;
$("#grid1").igGridUpdating("startEdit", rowInd, cellInd);
e.preventDefault();
I’ve attached a sample for your reference. Let me know if this would work for your scenario.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support