Callback for Yii2's GridView CheckboxColumn - javascript

I have a GridView (Yii2) and one of the columns is a boolean type of data. I want to be able to toggle that value and have it saved in my database.
I need a callback for that, but I don't see CheckboxColumn having one. How can I achieve this?

Don't go looking too far. Just use the checkboxOptions-property of your column setup to add a specific class to all checkboxes. Then you can use a jQuery event to listen to changes and report them back:
$('.checkbox-column').change(function(e) {
var checked = $(this).is(':checked');
$.ajax('route/target', {data: {id: $(this).closest('tr').data('key'), checked: checked}});
});
Yii's GridView normally renders a data-key-attribute for every row (on the <tr>) that you can use to identify the actual record to update.
As an alternative: $('input:checkbox', $('#w0')).change() could also work, assuming you don't want the extra class and that the GridView is your first widget.

All the GridView column can have a callback function. you can set the value attribute of the every singole column with result of the callback function.

Related

How to set visible property of element with json model with setVisible() method

I am customizing standard fiori application with Web IDE and in this application I have below requirement.
I want to add one check box and on selection of the checkbox, one of the existing input field should be shown or hidden.
Same field is there on the multiple screens. So, I have to add check box on the multiple screens. But, when it is selected on one screen, it should be reflected on another as well.
This is what I have done.
In the init method, I have written below javascript code to add the checkbox.
if(!this.oOtherDate)
{
var that = this;
this.oOtherDate = new sap.m.CheckBox("cOtherDelDate", {
text: "{i18n>OTHER_DELIVERY}",
selected: "{path : 'soc_cart>/showRddInput'}", // This carries the checkbox selection to other pages. It is JSON model.
select: function(oEvent) {
var checked = oEvent.getParameters().selected;
oModelList.getData().showRddList = !checked;
oModelList.getData().showRddInput = checked;
}
});
}
On above code, on the selection event of check box, I am setting the two JSON properties. One for the checkbox value and another to make one element hidden and vice versa.
Upto this point, everything works fine.
BUT, now, how can I bind the JSON property value "showRddList" to the element's visible property?
I have tried doing below but it is giving error:
this.byId("Field1").setVisible("{path : 'soc_cart>/showRddList'}");
setVisible() method expects boolean value and in above line of code, it considers as the string value.
FYI... Element which needs to be hidden is defined on the XML view and we can't extend or customize the view to specify the binding property in the view. So, I have to set it from the controller only.
Is there a possibility to set the visible property from controller to the existing element?
Thanks.
What you are looking for is the bindProperty method of the Input.
this.byId("Field1").bindProperty("visible", {
"soc_cart>/showRddList"
});

How can I change the value of an Oracle APEX page item using JavaScript?

I created the links in the left-most column to target a JavaScript function and I can successfully pass through the value of the row ID to that function.
Once clicked, a modal pops up to present a form to update the fields. However, I need the fields in the modal to be populated with the information from the row clicked. I figured I could create a hidden page item (P2_SONG_SELECT) to store the row ID so that I can use the value in my query for the data. My problem is I haven't been able to assign the row ID value to the application item.
Here is my JavaScript:
Each 'Edit' button successfully uses this URL target:
javascript:viewEditSong$(#Row_ID#).val();
to call this function:
function viewEditSong(Row_ID) {
alert(Row_ID); // successfully alerts the Row ID
$("#P2_SONG_SELECT").val() = UA_ID; // fails to assign
$("#EditSongWindow").dialog('open'); // open the modal
}
How do I properly assign the page item the value passed in?
Elsewhere I use simliar syntax effectively:
ajaxRequest.add("P2_FILE_MAIN", $("#P2_FILE_MAIN").val()); // this works fine
By 'application item' I presume you meant 'page item' as per your question title, since you're prefixing with page number.
Use this to set a value on the browser.
$s('P2_SONG_SELECT', 'xyz')
http://docs.oracle.com/cd/E59726_01/doc.50/e39149/javascript_api.htm#AEAPI269
Scott's post effectively solves your problem by using the built in APEX set method, but as an aside, you are attempting to use the jQuery val() method in the wrong way.
Instead of:
$("#P2_SONG_SELECT").val() = UA_ID;
You should use:
$("#P2_SONG_SELECT").val(UA_ID);
Have a look at the documentation for val().
http://api.jquery.com/val/#val2
You can see that the usage of the function differs depending on whether you want to set or retrieve a value.

How to edit row of Telerik MVC grid in Javascript

I am trying to edit a cell's innerText property. The text is shown in the table but the problem is that the row isn't being marked as updated, so when I press my "Save Changes" button the update method doesn't get this row (in the list of rows to update).
I am trying to use this method (updateRow) but so far it has been unsuccessful:
var grid = ("#grid").data("tGrid");
var rowToUpdate = grid.data[0];
rowToUpdate.quantity = 4;
grid.updateRow(rowToUpdate);
When the method is called I get the following exception:
"object does not support this property or method".
in the source of telerik. Does anyone know how to mark a row as updated? Or a better way to update the value of cell in row?
You can use the client-side method updateRow to force updating. The key is selecting the table row you wish to update, as indicated in their example (of course, you don't have to use their $('#Grid .t-grid-edit-row') selector; you can use any selector, so long as it selects the row you wish to update). I believe that your modifying of the cell's innerHTML/innerText to communicate the new value is how its done.

How to get the cell value of listview

I can not get the cell value of my Telerik asp.net listview control.I want to know how to get the cell value of any listview control .Each cell of my listview control contain Image and one check box .I want the cell value by clicking the on back end i mean in C# code.
I'm not sure exactly what you want here, but to get a checkbox control inside a GridItem would look something like this.
GridItem Item = listview.Items[i];
bool isChecked = ((CheckBox)Item.Controls[0]).Checked;
See the Telerik Doco for more information.
If you wired the OnCheckedChanged event of the textbox, the NamingContainer inside its handler should point to the listview item which hosts it. Then if you call the FindControl method for the listview item that has label with text inside it, you should be able to fetch the text from the label.
Dick

Deselecting a single row in jqGrid

Is this possible without hacking into the innards of the jqGrid JS?
setSelection( "rowX", false ) doesn't work, and resetSelection() deselects all rows.
According to the documentation, setSelection
Toggles a selection of the row with id = rowid; if onselectrow is true (the default) then the event onSelectRow is launched, otherwise it is not.
On the demo page, setSelection is called like
jQuery("#list9").jqGrid('setSelection',"13");
Does this work? Could you supply us with the constructor otherwise?
jQuery("#list9").jqGrid('setSelection',"-1");
jQuery('#list9').jqGrid('resetSelection',row_id);
Please pass the number at row_id place.
It is worked for me
#list9 is your grid id and row_id is the id of your row which you may get it through events like onSelectRow.

Categories