I have an input box and I am trying to retrieve the value of it on a event change. It does not work when place on a repeater but works when placed anywhere else on the page. Below is my code
export function input1_change(event) {
console.info("Value:" + $w('#input1').value)
}
Could someone please point what could be wrong?
You need to use a repeated item scope selector:
export function input1_change(event) {
let $item = $w.at(event.context);
console.info("Value:" + $item('#input1').value);
}
Related
I have a kendo grid, in which I have selected filter on one column, I am reloading the grid, I want the same filter to be there when grid reloads.
I am using the below code to reload the grid. It works, but it doesn't show the selected filter item checked. I checked IDR in the filter then reloaded the page, it shows 1 item selected but doesn't show IDR as checked.
function ReloadGrid() {
var grid = $('#gridId').data('kendoGrid');
grid.dataSource.read();
grid.setDataSource(grid.dataSource);
}
Well there is two way to achieve this.
One way is to save filters in database and second one is to use local storage as mentioned in comment.
I prefer second one, using local storage to save filters and load it upon read.
#GaloisGirl is pointing you in right direction.
Check this example again: Persist state
Basic usage of locale storage is to save some data under some name (key,value):
let person = {
name: 'foo',
lastName: 'bar'
};
let save = function (person) {
let personString = JSON.stringify(person);
localStorage.setItem('person', personString);
console.log('Storing person: ', personString);
};
let load = function () {
let personString = localStorage.getItem('person'); // <----string
let person = JSON.parse(personString); // <----object
console.log('Stored person: ', person);
};
let remove = function (name) {
localStorage.removeItem(name);
console.log('Removed from local storage!');
};
save(person);
load();
remove(person.name);
In kendo world you need to save current options state of grid in local storage, you can achieve that by adding button like in example or on the fly with change or with window.onbeforeunload or like in your example beforen reload grid.
You can check saved data under application tab in browsers, eg. chrome:
Hope it helps, gl!
I am using the admin-dashboard template and made the following modification to the MainController:
routes: {
':node': {
before : 'checkSession',
action : 'onRouteChange'
}
},
Thus, when I change a route the before route will happen first, so the following method will first get called and then the routing will proceed onward:
checkSession : function() {
var args = Ext.Array.slice(arguments),
action = args[args.length - 1],
hash = window.location.hash;
// TODO: use hash to clear patient header when appropriate
if (hash.indexOf('#new-patient') > -1) {
console.log(hash);
}
action.resume();
},
This works splendidly. However, when I get the condition of hash.indexOf('#new-patient') > -1 I would like to clear a comboBox that I have defined in a view as:
bind: {
store: '{patients}'
},
reference: 'patientCombo',
This is from a view in the same scope as the above method from the viewController is, that is they are both in the hierarchy of the same viewModel. I am just not sure exactly how I can clear this from the above method. I just want to set the combo box back to no selected value (if one had been selected) and then update the bindings. Merci!
When I tried using Ext.ComponentQuery, I initially referenced the itemId, but the xtype was wrong (the combobox and displaytext, among other sundries are in a container). Since this is the only combobox in my app now, I just tried it as:
combo = Ext.ComponentQuery.query('combobox')[0]
if (combo){
combo.setValue('')
}
and, lo' and behold, it worked!
I'm sorry to ask this question because it seems like the answer should be obvious, but I can't find it.
I am processing the "complete" event after a create action on a detail grid because I wish to refresh the grid after the insert. But I can't find a sensible way to it. Here is what I have done. I am doing it all in HTML and JavaScript. When the detail grid is initialized, I "name: it 'panegrid' suffixed by the key of the master record. Like below:
function detailInit(e) {
if (e.data.Id != '') { // Must be a Create for Lite so don't create a grid
$("<div id='panegrid" + e.data.Id + "' />").appendTo(e.detailCell).kendoGrid({
dataSource: {
And then when the create completes I find the grid like this:
complete: function (e) {
var selector = '#panegrid' + $.parseJSON(e.responseText).IGUnit_Id;
$(selector).data('kendoGrid').dataSource.read();
}
This works (IGUnit_Id is the primary key of the Master Grid), but it just doesn't seem right to have to do it this way. Surely there is some "correct way" to find the grid from within the complete event directly without playing around with selectors.
I appreciate your help and apologize for asking such a dumb question.
If you want to save a reference to a grid when you create it, simply assign a variable to it and append .data('kendoGrid') to your create expression, e.g.
var myGrid = $("<div id='panegrid" + e.data.Id + "' />").appendTo(e.detailCell).kendoGrid({
dataSource: {
// etc...
}
}).data('kendoGrid');
Then later
myGrid.dataSource.read();
Of course, you wouldn't want it to be a local variable, you would need to add it as a property of something visible from the rest of your code, but I leave that exercise up to you.
I am using x-editable for in-line editing inside my web app. I would like to pass additional parameters to server, which I would like to read from data- attributes on trigger element. Here is my editable element:
Value
I would like to pass data-param attribute, but I don't know how to access trigger element. I tried via $(this).data('param'), but I get null... My full editable code:
$.fn.editable.defaults.mode = 'inline';
$('.editable').editable({
params: { param: $(this).data('param') }
});
Calling $('.editable').data('param') doesn't come into account since I have many .editable elements present.
Thanks
I figured it out. I'm answering in case somebody needs to know:
$('.editable').editable({
params: function(params) {
// add additional params from data-attributes of trigger element
params.param1 = $(this).editable().data('param');
params.param2 = $(this).editable().data('nextparam');
return params;
}
)
I want to have the actual idtab button aswell as a link/button within the tab able to change tabs via JavaScript.
Is this possible if so how?
Thanks
after looking through the examples again I have re-used the bulk of it and I have come up with the following
function switchTab(ActiveTab) {
var set = $('.idtabs').html();
$("a", set).removeClass("selected")
.filter("[href='" + ActiveTab + "']", set).addClass("selected");
$.each($("a", set), function (key, value) {
$($(value).attr("href")).hide();
});
$(ActiveTab).show();}
I have just stumbled through your post after a google search. In case anyone else arrives here through the same way, I'll let an advice.
Instead of...
$("a", set).removeClass("selected")
...and...
$.each($("a", set), function (key, value) {
...one should use:
$("yourMenu#IdOrHTMLTag a")
It will prevent the code from calling jQuery's .hide() and .removeClass at all links of the page, which would raise an error.
You can achieve what you want just triggering the link's click event:
function switchTab(ActiveTab) {
$("a[href'"+ActiveTab+"']").click();
}