I have created grid with remote bound datasource. I have used batch editing. One column is having amount. I want an event - which is being fired after in cell amount is updated. I tried with change event of DataSource but its not getting fired.
You can use edit event when you're defining the grid and then define blur to do something after leave and end editing cell or keyup to do something for each typing in the input.
for example :
$("#personel").kendoGrid({
dataSource: dataSource,
navigatable: true,
toolbar: ["create", "cancel"],
columns:gridColumns,
editable: "incell",
edit: function(e) {
var input = e.container.find(".k-input");
input.blur(function() {
.... your code ....
});
input.keyup(function(e) {
.... your code ....
});
}});
Related
I have a table that I build using a chart wrapper as follows:
var rightWrapper;
function drawVisualization() {
rightWrapper = new google.visualization.ChartWrapper({
"chartType": "Table",
'dataSourceUrl':'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',
'containerId':'target_table_div',
'query':'SELECT A,B,C,D',
'options': { 'width': 700, 'height': 500, 'allowHtml': true }
});
google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);
rightWrapper.draw();
function onRightReady() {
google.visualization.events.addListener(rightWrapper.getChart(), 'select', rightSelectionHandler);
}
function rightSelectionHandler() {
var selection = rightWrapper.getChart().getSelection();
if (selection.length == 1) {
var item = selection[0];
if (item.row != null) {
alert("selected row " + item.row);
var value = (rightWrapper.getSnapshot().getDataTable().getValue(item.row,3));
alert(value);
}
}
}
}
And in that column 3, I have html to build radio buttons. Unfortunately, the actual html is stored, and I don't seem to have a way of polling to find out which radio button is now checked (the getValue listed in the code above always shows me just the html that was used to build the radio buttons, not which one is now "checked").
Unfortunately, it appears any clicks inside that table have to be picked up with the select listener, and the select listener doesn't relay any information beyond the row and column selected. I tried building in change and click functions, and putting s around my radio buttons, too. For instance:
$("#radio").click(function(){ //also tried with .change
alert("working");
});
That never fires, even if I disable my original listener.
So, how can I know what radio button my user selected?
Note: I do need the radio buttons inside the table, as every single row of the table has its own radio buttons to provide me different information on each.
you don't need the form, you just need to wait for the chart's 'ready' event,
before assigning the change event.
see following working snippet,
select a radio to see the name and value...
google.charts.load('current', {
packages: ['controls', 'table']
}).then(function () {
var rightWrapper = new google.visualization.ChartWrapper({
chartType: 'Table',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',
containerId: 'target_table_div',
query: 'SELECT A,B,C,D',
options: { 'width': 700, 'height': 500, 'allowHtml': true }
});
google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);
rightWrapper.draw();
function onRightReady() {
$('input[type="radio"]').on('change', calcForm2);
}
});
function calcForm2(sender) {
console.log(sender.target.name, sender.target.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="target_table_div"></div>
I figured out something that works
I can add a form around my radio buttons with the event.preventdefault code and call a function:
<form name="myForm" onchange="event.preventDefault(); calcForm2(this);">...radiobuttons...</form>
Then in my function I do whatever I want with "this". It comes across as "name=value" so it's pretty easy to split and parse.
Is there a way to add or remove observer not in the moment of element initing?
I can define observer this way:
observers: ['dataChanged(data.*)']
Can i remove this observer later or can I set this observer different way than that?
You can easily add an observer dynamically, either by:
this._addObserverEffect("property", observerFunction);
or
this._addComplexObserverEffect("dataChanged(data.*)");
Removing is harder and Polymer does not provide a function to do this. Although you could search for it in the _propertyEffects array, I wouldn't recommend it. Maybe just check in your observer function whether it should still be active, and return if not.
you maybe can try this way:
configure your data property in the element with notify: true, so you can add a listener to changes with plain js
var element=document.querySelector("#YOUR-ELE-ID");
element.addEventListener("data-changed", function(e) {
//triggered when data property changes
});
https://www.polymer-project.org/1.0/docs/devguide/properties#notify
and to remove the bound listener you can call removeEventListener
https://developer.mozilla.org/de/docs/Web/API/EventTarget/removeEventListener
Example 1 - plain JS :
document.addEventListener('WebComponentsReady', function(e) {
var element=document.querySelector("#YOUR-ELE-ID");
element.addEventListener("data-changed", function(e) {
//triggered when data property changes
});
});
Example 2 - in custom element:
//...element definition...
ready: function() {
var element=document.querySelector("#YOUR-ELE-ID");
element.addEventListener("data-changed", function(e) {
//triggered when data property changes
});
}
Following code create grid column with combo box in header but only working in IE for other browser combo box is not click able.
columns : [ {
header : 'Selected Year<br/><select style="width:80px" id="mndyearlist"</select>',menuDisabled : true,width:100}]
Thanks
Click on header has handler attached, and each click is bubbling up from select. Additionaly there is also drag&drop attached by default, which doesn't help either. So, you should change that behaviour. You can for example extend Column like so:
Ext.define('Ext.grid.column.SelectColumn', {
extend: 'Ext.grid.column.Column',
alias: 'widget.selectcolumn',
// disable D&D
draggable: false,
// handle click event
onElClick: function(e, t) {
var target = e.getTarget('select');
// if event is from select supress default behaviour
if (!target) {
return this.callParent(arguments);
}
}
});
Then just use that column in your grid, and your select should work.
Working sample: http://jsfiddle.net/9aTUY/4/
I'd like to throw up a T+C dialog when one clicks the submit button of a form. I'm using backbone.js. I can't work out whether I should be cramming the dialog within the FormView, or invoking the DialogView from within FormView or hooking it up with an event or something.
Ideally, my FormView Save() method would initialize it, with a Accept and Decline callback. My previous, none-Backbone implementation handed over all control to the dialog itself, which was a bit inelegant. Can anyone suggest anything?
edit: Thanks to Derick, here's where I'm at. Note however, that JqueryUI dialog appends itself at the end of 'body', and thus looses its context (it's not longer wrapped in the div it came from), so event binding isn't working.
save: ->
that = #
dlg = new TermsConditionsView({el: '#tcDialog'})
dlg.bind 'accepted', #tncAccepted, #
dlg.bind 'declined', #tncDeclined, #
$(dlg.render().el).dialog
draggable: false
resizable: false
width: 500
height: 600
modal: true
dialogClass: 'termsConditions'
buttons: [
{
id: 'acceptButton'
text: 'Accept'
click: -> that.tncAccepted()
}
{
id: 'declineButton'
text: 'Decline'
click: -> that.tncDeclined()
}
]
I'd have the FormView call a separate DialogView, and listen to an "accepted" and "declined" event, which the DialogView will trigger based on the user's action.
FormView = Backbone.View.extend({
events: {
"click #save": "save"
},
save: function(){
var dlg = new TnCView();
dlg.bind("accepted", this.tncAccepted, this);
dlg.bind("declined", this.tncDeclined, this);
$(dlg.render().el).dialog();
},
tncAccepted: function(){
// do whatever you need, when the user accepts the terms n conditions
},
tncDeclined: function(){
// do whatever you need, when the user declines the terms n conditions
}
});
TnCView = Backbone.View.extend({
events: {
"click #accept": "accept",
"click #decline": "decline"
},
accept: function(){
// close the dialog
this.trigger("accepted");
},
decline: function(){
// close the dialog
this.trigger("declined");
}
});
Note that I put the FormView in control of turning the Terms n Conditions into a dialog. it's my preference for the parent form to be in control of when / where a child form's 'el' is placed into the DOM / shown on the screen. this tends to keep the code cleaner and more flexible in the long run.
I'm using tablesorter and tablesorter.pager. Here is my code:
$(document).ready(function() {
$("#peopletable")
.tablesorter({ widthFixed: true, widgets: ['zebra'] })
.tablesorterFilter({ filterContainer: $("#people-filter-box"),
filterClearContainer: $("#people-filter-clear-button"),
filterColumns: [1, 2, 3],
filterCaseSensitive: false
})
.tablesorterPager({ container: $("#peoplepager") });
$("#peopletable tr.data").click(function() {
var personid = $(this).attr('id');
$.ajax({
type: "POST",
url: "/Search/GetDocumentsByPerson",
data: { "id": personid },
datatype: "json",
success: function(data) {
var results = eval(data);
$("#documentstable > tbody tr").remove();
$.each(results, function(key, item) {
$("#documentstable > tbody:last").append(html);
});
$("#documentstable").trigger("update");
}
});
});
});
Everything works great except when I click on the next page my button click event doesn't fire. Is this a known issue with jQuery tablesorter?
It's because the elements are updated, the ones you bound the click handler to are gone, you can use .live() to resolve this, change this:
$("#peopletable tr.data").click(function() {
To this:
$("#peopletable tr.data").live('click', function() {
Alternatively, if #peopletable isn't destroyed you can use .delegate(), like this:
$("#peopletable").delegate('tr.data', 'click', function() {
I have also faced the same kind of problem with tablesorterPager second page after using Jeditable (edit in place) plugin for some element in the tablesorterPager used table.
I have tried editing the data bind function in Jeditable as follows
original code
$(this).bind(settings.event, function(e) {
here settings.event equals to the event parameter which we are defining with options eg: click
modified code
$(this).live(settings.event, function(e) {
But.. I found the error with tablesorterPager within pages other than the first page is not because of the binding of element event.
when we are calling tablesorterPager to any table with many rows, only the first page rows of
the table is affected on the page load. so only the first page rows are called with Jeditable plugin. other rows in the other pages are not assigned with the plugin. because of this reason, the events in other pages than first page will not work.
to prevent above situation, we can add Jeditable plugin calling inside updatePageDisplay function.
eg:
function updatePageDisplay(c) {
$(".tablerowdata").each(function(){
$(this).editable("ajax/save.php", {
tooltip : "click to edit...",
data : {"selectid1":"selectval1","selectid2":"selectval2","selectid3":"selectval3"},
type : "select",
submit : "ok",
event : "click",
select : "true",
});
});
Creating a new element won't duplicate the event created with the click method wheras the live method does it.