How do you access the 'Select All' checkbox? - javascript

I've got it set up on my grid so that each individual checkbox selects the object present in that row, and that is working. However, when you click the 'Select All' checkbox that Kendo UI automatically provides when you add a columns.Select() to your grid, it only grabs the object present in the first row.
My initial thought was I could set up an event binding that tied back to the ID of that specific checkbox, but when I tried this, I realized the ID for that checkbox was being randomly generated every time, so this strategy wasn't going to work.
I can't use this.selectedKeyNames() as this doesn't refer to the right object in the current context.
Basically, I'm wondering if there's a better way of accessing that 'Select All' checkbox so I can throw some extra code in to grab every single object I have present in my grid.

You always have the possibility to select an element by it's tag and DOM tree, e.g.:
$('.k-grid input[type="checkbox"]').first()

Related

Oracle APEX - passing IG column value to javascript

I have an IG with a link column where the target is set to URL and I use it to call javascript.
What I want to accomplish is whenever a link column is clicked, grab a value of another - hidden column and set a page item to that value:
javascript:$s('P1_ITEM',#COLUMN2#);alert($v('P1_ITEM'));
but what happens, if I reference COLUMN2 value using just #COLUMN#, I get a javascript error and if I wrap it in single quotes, the value of P1_ITEM literally gets set to #COLUMN2#.
The first thing I would recommend is that you move to a Dynamic Action rather than trying to put all the code in the link. Also, I think buttons are a better than links (and they can be styled to look like links).
Start by going to https://apex.oracle.com/ut. Navigate to Reference > Button Builder and build the button you want. Then copy the value from the Entire Markup field.
Change the Type of the Link column to HTML Expression and paste the HTML from the Button Builder in the HTML Expression field. I styled my button to look like a link (as you had it), added a custom class to the class property named my-button, and added a data-attribute for the primary key value (my table was EMP, so the PK was EMPNO). It looked like this in the end:
<button type="button" class="t-Button t-Button--link my-custom-button" data-id="&EMPNO.">Click me!</button>
Give the Interactive Grid a Static ID value of my-ig.
With that done, create a new Dynamic Action. Set Name to .my-button clicked, Event to Click, Selection Type to jQuery Selector, and jQuery Selector to .my-button. Finally, set Event Scope to Dynamic, which will use event delegation to keep the event binding working if the report refreshes (see this for details).
In the action, set Action to Execute JavaScript Code. Enter the following code in the Code field:
var id = $(this.triggeringElement).data('id');
var model = apex.region('my-ig').call('getViews').grid.model;
var record = model.getRecord(id);
var job = model.getValue(record, 'JOB');
$s('P1_ITEM', job);
alert($v('P1_ITEM'));
This code starts by obtaining the value of the primary key from the data- attribute on the button using jQuery's data method. Next, a reference to the model that is used by the IG is obtained. Then the model's getRecord method is invoked and the primary key value is passed in. Finally, the model's getValue method is used to get the 'JOB' value from the record. I went after the JOB column since I was using the EMP table, but you would go after whatever column you need.
You can learn more about the model methods here:
https://apex.oracle.com/js > Interfaces > Model.

Datatables: how to checkbox checked status change?

My table powered by datatable is 100% working now.
I am now trying to improved look&feel using a custom render function to use more beautiful checkbox.
Actually when I click on a row's checkbox, the row is selected, the counter of selected rows is updated and so on.
But I must 'react' to status change to update the visual side of my custom checkbox.
I tried to add a console.log() to render function and I discovered that it's executed only when doing the first draw with data returned from server, because I'm using ajax.
Is there a function, similar to render, called instead when checkbox value changes?
More precise indications:
Commonly, we have a TD with a INPUT[type=checkbox] as direct child
Now I have TD > DIV > INPUT[type=checkbox]
Commonly, when user check a checbox, the input receive the checked attribute, and browser draw it in the appropriate way based on checked or not status
Now I have no 'checked' attribute automatically set.
So I need to 'intercept' when datatable select the row and apply/remove the 'checked' attribute.
How can I achieve this?
assign function to checkbox when onchange the save the values
$("#table").on('draw.dt', function() {
// call the function of your saved values do the code
}

How to get button to act as column search filter within ag-grid and search for a set list of items?

SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.

Cloned autocomplete input not working

I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance
Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.
I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});

How to detect change in form if added a new row in prime faces datatable

I have requirements to disable save and cancel buttons in my page on page load. I should enable save and cancel buttons if user changes something in the page. To achieve this, I am using
http://plugins.jquery.com/are-you-sure/
This plugin is working fine but there is need for customization in many scenarios, one like below
I have a page like Item groups which consists of three panels.
LeftPanel : List of item groups in the system
CenterPanel : List of items assigned to a selected item group
RightPanel : List of items to assign to an item group
Now Assume I have a datatable
<p:dataTable var="itms" value="#{myBean.listOfItems}" rows="10"
paginator="true"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rowsPerPageTemplate="10,50,100">
</p:dataTable>
To assign items to the item group I would select items in the right panel and click on assign button which would add to the listOfItems to show in the center panel
listOfItems.addAll(selectedItems);
I am calling rescan method defined in the plugin on assign button oncomplete to detect the changes and track new records added because I want to consider addition or removal of fields also a change.
Now on page load if an item group is selected and it has 13 items assigned then I could see the first page with 10 records. If any items added then they will be added in the list at back end list. Since I'm in first page and page is having complete rows plugin is unable to find any changes in form.
How to find a change in this scenario.
Since you say you want to consider any addition or removal of fields also a change to make sure that your users save the changes, one way to do it could be like this:
You can have a hidden input:
<h:inputHidden id="hiddenInput" />
And in your assign button oncomplete you mentioned you can add:
oncomplete="$('#hiddenInput').val('dirty').change();"
This would add the 'dirty' string (for example) to the hidden input and call change() to tell the plugin that something changed, and the plugin would mark the form as dirty (changed).
And in the oncomplete of your saving button, all you have to do is clear that value and reinitialize the plugin to start again:
oncomplete="$('#hiddenInput').val('');$('#formId').trigger('reinitialize.areYouSure');"
Also it would be good to add some checking or to do that at the end of the action (link).
NOTE: If you add and delete the same 'item', technically there aren't changes, but you want to keep the form as changed right? This solution will work for that. Correct me if I'm wrong and you want to manage this particular case. You would have to add some logic in which you compare old and new values and clear or dirty the hidden input accordingly.

Categories

Resources