Develop Reference

Extjs Catch pick event (combobox)

Using ExtJS 4.2.3. I have FORM with combobox field and some values inside on choose. I need to catch event when user pick 1 of the value in combobox.
Asking for help with syntax, as example to get ALERT on picking DATA3 value.
Name of combobox field - "document_type".
Example of code on ExtJS:
documentForm_window = Ext.create("Ext.window.Window", {
title: (document_GUID == null) ? "[Create]" : "[Edit]",
width: 500,
modal: true,
layout: "fit",
items: [{
xtype: "form",
frame: true,
waitMsgTarget: true,
listeners: {
afterrender: function (form) {
if (document_GUID != null) {
form.getForm().load({
url: Ext.state.Manager.get("MVC_url") + "/Document/Get",
method: "GET",
params: { document_GUID: document_GUID },
waitMsg: "[loading]",
timeout: 300,
failure: function (form, action) {
if (action.result) Ext.Msg.alert("[Error1]!", action.result.errorMessage);
else Ext.Msg.alert("[Error2]!", "[Error3]!");
}
});
}
}
},
defaults: {
anchor: "100%",
msgTarget: "side",
labelWidth: 145,
allowBlank: false
},
items: [{
xtype: "combo",
name: "document_type",
fieldLabel: "<b>[Type]<font color='Red'>*</font></b>",
displayField: "document_type_name",
valueField: "document_type",
queryMode: "local",
triggerAction: "all",
editable: false,
store: document_store
}, {
xtype: "textfield",
name: "contract_number",
fieldLabel: "<b>[TestData]</b>"
}],
formBind: true,
buttons: [{
text: (document_GUID == null) ? "[Create]" : "[Edit]",
handler: function () {
var action = (document_GUID == null) ? "Create" : "Edit";
var form = this.up("form").getForm();
if (form.isValid()) {
form.submit({
url: Ext.state.Manager.get("MVC_url") + "/Document/" + action,
params: { document_GUID: document_GUID, treasury_GUID: tree_value },
waitMsg: "[Loading...]",
success: function (form, action) {
documentForm_window.destroy();
OrderLines_store.load({
scope: this,
callback: function (records, operation, success) {
documents_List.query('*[itemId="DATA1_grid"]')[0].selModel.select(curr_position);
}
});
},
failure: function (form, action) {
if (action.result) Ext.Msg.alert("[Error1]!", action.result.msg);
else Ext.Msg.alert("[Error2]!", "[Error3]!");
}
});
}
}
}]
}]
}).show();
}
//store//
document_store = new Ext.data.ArrayStore({
fields: ["document_type", "document_type_name"],
data: [[0, "data1"], [1, "data2"], [2, "data3"]]
});
Sorry, part of code I add as screen cause of post error "It looks like your post is mostly code".

You have to add a listener for the select event to the combobox:
editable: false,
store: document_store,
listeners: {
select: function(combo, records) {
console.log(combo);
console.log(records);
if(!Ext.isArray(records)) records = [records];
Ext.each(records, function(record) {
if(record.get(combo.valueField)==3) {
Ext.Msg.alert('Value is 3 for' + record.get(combo.displayField));
}
});
}
}

jqGrid inline-edit POST without editurl?

I am trying to find the information about editurl. Currently, i am working on the framework which does not permit editurl. The calls must go through javascript function which in-turn invokes the component on serverside.
Question is it possible to POST the data to javascript function instead of editurl?
I am experimenting with following:
$(document).ready(function () {
console.log(">>>1");
//--
action.setCallback(this, function(a) {
if (a.getState() === "SUCCESS") {
result = a.getReturnValue();
console.log(result);
//---=
var editActionOptions = {
keys: true,
url:null,
oneditfunc: function (rowid) {
console.log("row with rowid=" + rowid + " is editing.");
},
aftersavefunc: function (rowid, response, options) {
console.log("row with rowid=" + rowid + " is successfuly modified.");
}
};
//-------------------------------------------------------------------------------------------------------
$("#jqGrid").jqGrid({
editurl: 'clientArray',
datatype: "local",
data:result,
colModel: [
{
label: "Edit Actions",
name: "actions",
width: 100,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{
labe: 'ID',
name: 'empid',
width: 75
},
{
label : 'Name',
name: 'Name',
width: 140,
editable: true // must set editable to true if you want to make the field editable
},
{
label: 'dob',
name: 'dob',
width: 100,
editable: true
},
{
label: 'dln',
name: 'dln',
width: 120,
editable: true
}
],
sortname: 'empid',
loadonce: true,
onSelectRow: editRow,
onSave:onSaveRow,
editParams: editActionOptions,
width: 780,
height: 400,
rowNum: 150,
pager: "#jqGridPager"
});
//------------------------------------------------------------------------------------------------------
} else if (a.getState() === "ERROR") {
$A.log("Errors", a.getError());
}
});
$A.enqueueAction(action);
var lastSelection;
function editRow(id) {
console.log(id);
if (id && id !== lastSelection) {
var grid = $("#jqGrid");
grid.jqGrid('restoreRow',lastSelection);
grid.jqGrid('editRow',id, {keys: true} );
lastSelection = id;
}
};
function onSaveRow(id){
console.log(id);
}

Why is edit button in this Kendo Grid not working

I have the below code. I am trying to fire off something when "edit" button is clicked on this grid. But nothing happens as of now. What am I doing wrong or missing ?
that.summaryGrid = function (grid) {
return new $(grid).kendoGrid({
columns: [
{ field: "ReviewId", hidden: true },
{ field: "PersonId", hidden: true },
{
template: function (e) {
if (e.EmployeeMiddleName == null) {
e.EmployeeMiddleName = "";
}
return e.EmployeeLastName + ", " + e.EmployeeFirstName + " " + e.EmployeeMiddleName
},
title: "Name",
width: 160,
sortable: true
},
{ field: "ReviewStatusText", title: "Status", width: 150, sortable: true },
{
template: function (e) {
if (e.ManagerMiddleName == null) {
e.ManagerMiddleName = "";
}
return e.ManagerLastName + ", " + e.ManagerFirstName + " " + e.ManagerMiddleName
},
title: "Manager",
width: 160,
sortable: true
},
{ field: "ModifiedDate", title: "Last Modified Date", width: 150, sortable: true },
{
template: '<button type="button" class="k-button k-grid-edit"><i class="fa fa-pencil"></i> Edit</button><button type="button" class="k-button k-grid-view"><i class="fa fa-search"></i> View</button>',
title: "",
width: 135,
sortable: true,
name: "edit",
click: function (e) {
e.preventDefault();
alert("works");
//var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
}
},
],
dataSource: that.viewModel.preformanceSummaryDataSource(grid === "#employeeGrid" ? false : true),
scrollable: false,
sortable: true,
pageable: true,
selectable: "row",
change: function (e) {
//TODO
},
dataBound: function (e) {
//TODO
}
});
};
I originally want it to show an html template that I have created but before that I was attempting for click event of edit to work. Any thoughts ?

You can add it in a command column like:
{ field: "ModifiedDate".... },
{ command: { text: "Edit", click: edit}, title: " ", width: "180px" }]
}).data("kendoGrid");
function edit(e) {
}
You can see a full example here: http://demos.telerik.com/kendo-ui/grid/custom-command
If you want to add it as a template please declare onclick event in the template like:
<button class="test" onclick="yourFunction()"....
Or hock to it after the grid initialization like
$(".test").click(function(){
....
})

JTable jquery, Close Child button

I am using Jtable (Jquery based).
I have some trouble with the child table.
In the child table I added a new button in the toolbar.
With this new button in the toolbar, che close icon disappear, how can I fix it?
(if I remove the toolbar element the X of close button is correctly displayed).
$('#ListHeader').jtable({
title: 'ExpensesAccounts' ,
actions: {
listAction: function (postData, jtParams) {
return getListDataHeader();
}
},
fields: {
ID:{
key: true,
list:false
},
Details: {
title: '',
width: '5%',
sorting: false,
edit: false,
saveUserPreferences: false,
create: false,
display: function (headerData) {
//Create an image that will be used to open child table
var $img = $('<img src="../Images/viewDetails.png" width="20p" height="20p" title="View Details" />');
//Open child table when user clicks the image
$img.click(function () {
$('#ListHeader').jtable('openChildTable',
$img.closest('tr'),
{
title: headerData.record.Title + ' - Row' ,
saveUserPreferences: false,
paging: true,
pageSize: 3,
showCloseButton:true,
toolbar: {
items: [{
icon: '../scripts/jtable/themes/metro/add.png',
text: 'Add New Row',
click: function (headerID) {
window.location = "InsertRow.aspx";
}
}]
},
actions: {
listAction: function (postData, jtParams) {
return getListDataRow(headerData.record.ID, jtParams.jtStartIndex, jtParams.jtPageSize);
//return { "Result": "OK", "Records": [] };
},
deleteAction: function (postData) {
return deleteItem(postData, 'Expense Account Rows');
}
},
fields: {
HeaderID: {
type: 'hidden',
defaultValue: headerData.record.ID
},
ID: {
key: true,
create: false,
edit: false,
list: false
},
Title: {
title: 'Title',
width: '20%'
}
}
}, function (data) { //opened handler
data.childTable.jtable('load');
});
});
//Return image to show on the person row
return $img;
}
},
Title: {
title: 'Title'
},
Status: {
title: 'Status',
width: '8%'
}
}
});
$('#ListHeader').jtable('load');
Thanks,
Nk

How capture destroy event in kendo ui grids when click is done?

I want to execute an action when click event of a delete button in a grid is done. How can I know when is clicked in Javascript?

(Read IMPORTANT at the end)
Use:
$("tr .k-grid-delete", "#grid").on("click", function(e) {
alert("deleted pressed!");
})
Where #grid is the id of your grid.
If you want to know the data item you can do:
var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
Alternatively, you can define the command in the grid.columns as:
{
command: [
"edit",
{
name : "destroy",
text : "remove",
click: myFunction
}
],
title : "Commands",
width : "210px"
}
where myFunction is:
function myFunction(e) {
alert("deleted pressed!");
var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
// item contains the item corresponding to clicked row
}
IMPORTANT: You might want to define you own destroy button where only the styling is copied from the original one (no other actions / checks). If so define your grid.columns.command as:
{
command: [
"edit",
{
name : "destroy",
text : "remove",
className: "ob-delete"
}
],
title : " ",
width : "210px"
}
and then define:
$(document).on("click", "#grid tbody tr .ob-delete", function (e) {
e.preventDefault();
alert("deleted pressed!");
var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
// item contains the item corresponding to clicked row
...
// If I want to remove the row...
$("#grid").data("kendoGrid").removeRow($(this).closest("tr"));
});

simple. You can make use of remove: to capture destroy event in kendo.
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px' }
],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
alert("save event captured");
//Do your logic here before save the record.
},
remove:function(e){
alert("delete event captured");
//Do your logic here before delete the record.
}
});
$(document).ready(function() {
var gridDataSource = new kendo.data.DataSource({
data: [
{ id: 1, description: 'Test 1', begin: new Date() }
],
schema: {
model: {
id: 'id',
fields: {
id: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
}
});
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px' }
],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
alert("save event captured");
},
remove:function(e){
alert("delete event captured");
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="grid"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="script.js"></script>
</body>
</html>