We Keep Coding

Onclick event in html tempelate ExtJs

Below is the code sample i'm trying to add a onclick function, but it seems not working as expected. The aim is to take the div tag text value and put it in a variable or return it through a func like myFunction I also tried adding listeners but don't know how it works . As its a template its hard to debug. and onclick event or call hierarchy is not easy to find. How to tackle it with simple javascript?
var resultTmpl = '<div id="group_header_{locationName}" class="current_list_audit_location expcol_{locationName:removeSpaces}" style="display:none;">'+
'<tpl for="pickslipid">' +
'<div class="audit_stage_list" style="margin-top: 6px !important;">' +
'<div class="orderpickingpicklistimageurlStage margin-top"></div>' +
'<div style="float:left;">' +
'<div class="orderpickingpicklistStagedesc orderpickingpicklistStagedesc2" id={pickupSlipId} onclick="myfunction()" > {pickupSlipId}</div></div>' +
'<div class="order_pick_right_stage_count_main_group_list audit_stage_pickup_date_list">' +
'<div>Pickup Date: {pickupDate}</div>' +
'</div>' +
'</div>' +
'</tpl>';
// pass the root node of the data object
Ext.define('sif.view.mapping.templates.EX04AuditStagingTpl', {
extend: "Ext.XTemplate",
html: resultTmpl,
myfunction : function(){
return document.getElementByClass("orderpickingpicklistStagedesc orderpickingpicklistStagedesc2").value;
},
constructor: function() {
console.log(resultTmpl);
return this.callParent([this.html]);
}
});
Ext.util.Format.removeSpaces = function(value) {
return !value ? value : String(value).replaceAll(" ", "_");
};
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.split(search).join(replacement);
};
The above code is called from another class EX04AuditStagingLocation as given below:
var ex04AuditStagingList = Ext.create('sif.view.mapping.templates.EX04AuditStagingTpl');
var ex04AuditStageItems = {
xtype: 'panel',
width: '100%',
height: '100%',
cls: 'my-panel',
ui: 'plain',
itemId: 'ex04showdetailspanel',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'list',
cls: 'current_page_cycle_count',
store: 'AuditStagingStore',
itemTpl: ex04AuditStagingList,
itemHeight: '100%',
height: '100%',
emptyText: '<p id="empty-text" style="text-align:center; left: 25px;">' + PhoneTopUtil.getLocaleString(1280040) + '</p>',
grouped: true,
zIndex: 10,
pinHeaders: true,
style: 'font-family: RobotoRegular;',
loadingText: "",
itemId: 'ex04AuditStageList',
id: 'ex04AuditStageList',
listeners: {
painted: function(element, ths) {
SifUtils.customImageLoad(element.select('img').elements, 0, IMAGELOADING.CONFIRMPICKUP);
},
refresh: function(element, options) {
SifUtils.customImageLoad(element.element.select('img').elements, 0, IMAGELOADING.CONFIRMPICKUP);
},
itemtap: function(list, index, target, record) {
AuditOrMoveUtil.controller.onAmMoveAction(list, null, null, record);
},
}
}

Kendo Grid edit cell from button inside the cell

My problem is the following:
I've added to a grid row edit buttons as templates.
Now what i want to do is to allow editing of the cell text when i click the "edit button" inside that cell.
Does anyone has any idea how can i acive this ? How can i enable the edit of the cell in which the button is ?
Adding the template:
template:
"#if(" + columnWeekField + "!=null && IsEditable){#\<strong >#: " + columnWeekField + "# </strong> <span>(#:" + columnWeekFieldSum + "#) </span> <button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button > \
#}\
Here is what i've tried
$(grid.tbody).on("click", "[name='EditCell']", function (e) {
var cellElement = this;
var cell = $(cellElement);
var grid = $("#grid").getKendoGrid();
grid.editCell(cell);
console.log("button clicked");
});
If anyone has any idea that would be great. I'm sorry if the post already exists but i couldn't find any answers on this. If there are please point me to them.

You almost got it. To use editCell() you need to pass the td element to it. You are passing the button.
Just change this...
var cell = $(cellElement);
To this...
var cell = $(cellElement).closest("td");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script>
$(function() {
let grid = $("#grid").kendoGrid({
dataSource: {
data: [{ A: 1, B: 2, C: 2}]
},
columns: [{
field: "A",
template: "#= data.A #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
},{
field: "B",
template: "#= data.B #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
},{
field: "C",
template: "#= data.C #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
}],
editable: true
}).data("kendoGrid");
$(grid.tbody).on("click", "[name='EditCell']", function (e) {
var cellElement = this;
var cell = $(cellElement).closest("td");
var grid = $("#grid").getKendoGrid();
grid.editCell(cell);
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo

With kendo grid for jquery, something like this worked for me
$("#grid").kendoGrid({
editable: "incell",
scrollable: true,
resizable: true,
pageable: {
refresh: true,
pageSizes: true,
previousNext: true,
responsive: false
},
noRecords: {
template: "<div class='container'>" + "<div class='row mb-3 '>" + "<div class='col-5 mx-auto'>" + "<div class='d-flex flex-column'>" +
"<img class='w-50 mt-3 align-self-center' src='/Content/EbizAssets/No-Invocies-Found.svg'>" +
"<span><strong>No invoices found.</strong></span>" +
"</div>" + "</div>" + "</div>" + "</div>"
},
columns: [
{
selectable: true
},
{
field: "CustomerName",
title: "Customer Name",
editable: true
},
{
field: "AmountDue",
title: "Amount Due",
template:
"<span>$#= parseFloat(data.AmountDue).toFixed(2) #<span>" +
"<img src='/Content/Images/icons-nav/Edit.svg' alt='EditCell' class='edit-icon-placement-so' />",
width: 200,
format: "{0:c2}",
/*editable: true*/
},
{
field: "EmailAddress",
title: "Email Address",
width: 260,
editable: false,
template: "#= EmailAddress #<img src='/Content/Images/icons-nav/Edit.svg' alt='EditCell' class='edit-icon-placement-ea' />"
},
],
selectable: "multiple, row",
}).data("kendoGrid");
}
});
});
} },

How to set Min/Max for date picker in KendoDateTimePicker using AngularJs

I'm working with a kendo grid which has a datetimepicker as a column in every row.
The datetimepicker should only allow user to pick yesterday's and today's dates and time is flexible.
I've tried in many ways but I'm not able to get it done.
My grid columns are-
{ field: "Fac", title: "Fac Name", width: "100px", editor: $scope.facDropDownEditor, template: "#=(FacFacyName==null)? '' : Fac.FacName #" },
{ field: "RecordedDate", title: "Date - Time", format: "{0:yyyy-MM-dd HH:mm}", editor: dateTimeEditor, width: "100px" },
{ field: "Remarks",title:"Remarks",width:"120px"},
{ field: "Volume", title: "Volume", width: "100px" },
{
command: [
{
name: "edit", title: "Edit", "template": "<a class='k-button k-grid-edit' href='' style='min-width:40px;' title=\"Edit\"><span class='k-icon k-i-edit'></span></a>"
},
], field: "Actions",title:"Actions", width: "60px"
}
My datetimeEditor is-
function dateTimeEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDateTimePicker({});
}
How to edit datepicker so that I get only today's and yesterday's dates selectable

hope this will help!
function dateTimeEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDateTimePicker({
max:new Date();//todays day
var yestarday= new Date();
yestarday.setDate(dt.getDate() - 1);
min:yestarday;//yestardays date
});
}

How to change grid column value on DataBound event

I have the following Grid,
<div class="kotgrid">
</div>
And I bound the data as following. Here I want to change timedelay column value on DataBound event,
$(".kotgrid").kendoGrid({
dataSource: dataSource,
dataBound: function (e) {
var grid = this;
grid.tbody.find('>tr').each(function () {
var dataItem = grid.dataItem(this);
var d = new Date();
var currentTime = parseTime(dataItem.servertime);
var currenTime = d.getHours() + ":" + d.getMinutes();
var meanTime = diff(orderTime2, currenTime2)
//I want to set this meanTime in timedelay coloumn. How can I achieve this?
})
},
filterable: true,
scrollable: true,
columns: [
{ hidden: true, field: "orderitemid" },
{ field: "tableid", title: "Table No" },
{ field: "itemname", title: "Items" },
{ field: "quantity", title: "Quantity" },
{ field: "modifier", title: "Modifier" },
{ hidden: true, field: "orderedtime", title: "Time Delay" },
{ field: "timedelay", title: "Time Delay" },
{ hidden: true, field: "alert" },
{ hidden: true, field: "category", groupHeaderTemplate: "#= value #" },
{ command: { text: "Pickup", click: showDetails} }
],
mobile: "phone",
editable: false,
selectable: "row",
height: "600px"
});
I don't know how to achieve it. Any help will be highly appreciable.
Thanks in advance.

You don't need to iterate over the <tr> elements, unless you only want to do it for the current page. You can just iterate over grid.dataSource.data().
So you could do something like:
var data = this.dataSource.data();
$(data).each(function() {
var d = new Date();
var currentTime = parseTime(this.servertime);
var currenTime = d.getHours() + ":" + d.getMinutes();
var meanTime = diff(orderTime2, currenTime2)
// set on dataItem
this.set("timedelay", meanTime);
});
Regardless of how you get access to the dataItem, you can set any property using the set method (the data source contains Model items which inherit from ObservableObject).

How to determine what cell has been clicked?

I am new to JavaScript and I am having to use ExtJS 3.4. I have created a simple tree with 3 columns. I would like to know either what cell was selected, or even, just what row and column were selected.
I am just using the example that Sencha uses at http://dev.sencha.com/deploy/ext-3.4.0/examples/treegrid/treegrid.html :
var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,
columns:[{
header: 'Task',
dataIndex: 'task',
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],
dataUrl: 'treegrid-data.json'
});
Is it possible to do this in ExtJS 3.4? I can get the node but I do not see where it is telling me what cell or column or row was selected.
Any help would be greatly appreciated!

you need to attach listeners e.g.
listeners: {
afterRender: function(p) {
p.body.on('click', function() { // Function tapping clicks on Panel
alert(p.getTargetEl().dom.innerHTML);
});
});
}