jQWidgets jqxTreeGrid cellEndEdit Event
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTreeGrid is used for representing data in a tree-like structure. This widget is useful for displaying multi-column of hierarchical data, data paging, sorting and filtering, data editing, column resizing, fixed columns, conditional formatting, aggregates, and rows selection. These widgets also read and display the data from any type of data sources such as XML, JSON, Array, CSV, or TSV.
The cellEndEdit event is triggered when a cell editing of the specified jqxTreeGrid is ended. This event will work when ‘editSingleCell’ sub property set to true inside of the ‘editSettings’ property
Syntax:
$('#jqxTreeGrid').on('cellEndEdit', function (event) { // Argument of the Event var args = event.args; // Key of the row var rowKey = args.key; // Data of the row var row = args.row; // Data field of the cell var columnDataField = args.dataField; // Display field of the column var columnDisplayField = args.displayField; // Value of the cell var value = args.value; });
Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>
Example: The below example illustrates the jQWidgets jqxTreeGrid cellEndEdit event.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "jqwidgets/styles/jqx.base.css" type = "text/css" /> < script type = "text/javascript" src = "scripts/jquery.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxcore.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxdata.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxbuttons.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxscrollbar.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxlistbox.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxdropdownlist.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxdatatable.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxtreegrid.js" > </ script > </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > jQWidgets jqxTreeGrid cellEndEdit Event </ h3 > < div id = "jqxTreeGrid" style = "margin: 25px;" > </ div > < div id = "log1" ></ div > < div id = "log2" ></ div > < script type = "text/javascript" > $(document).ready(function () { var A = [{ "ID": 1, "Employee_Name": "Amit", "Company": "w3wiki", "Designation": "Content Writer", "expanded": true, A1: [{ "ID": 2, "Employee_Name": "Sumit", "Company": "Amazon", "Designation": "Software Engineer", }, { "ID": 3, "Employee_Name": "Vivek", "Company": "Apple", "Designation": "Product Manager", "expanded": true, A1: [{ "ID": 4, "Employee_Name": "Soni", "Company": "Flipkart", "Designation": "HR", }] }] }]; var Data_Source = { dataFields: [{ name: 'ID' }, { name: 'Employee_Name' }, { name: 'Company' }, { name: 'Designation' }, { name: 'A1', type: 'array' }, { name: 'expanded' }], hierarchy: { root: 'A1' }, id: 'ID', localData: A }; var Data = new $.jqx.dataAdapter(Data_Source); $("#jqxTreeGrid").jqxTreeGrid({ source: Data, editable: true, editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: true }, ready: function () { $("#jqxTreeGrid").jqxTreeGrid( 'expandRow', '1'); $("#jqxTreeGrid").jqxTreeGrid( 'expandRow', '3'); }, columns: [{ text: 'Employee_Name', align: 'center', dataField: 'Employee_Name', width: 140 }, { text: 'Company', align: 'center', dataField: 'Company', width: 150 }, { text: 'Designation', align: 'center', dataField: 'Designation', width: 150 }] }); $('#jqxTreeGrid').on('cellEndEdit', function (event) { var Arguments = event.args; var Row_Key = Arguments.key; var Column_Name = Arguments.dataField; $("#log1").html(JSON.stringify( "The stopped cell editing row is: " + Row_Key)) $("#log2").html(JSON.stringify( "The stopped cell editing column name is: " + Column_Name)) }); }); </ script > </ center > </ body > </ html > |
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/jquery-treegrid-api.htm
Contact Us