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.