I am using dojo EnhancedGrid to display some data and handling "onRowClick" event to allow the user to click on a row in the grid to view more details about this row like below.
dojo.connect(grid, "onRowClick", grid, dojo.partial(displayDetailsForSelectedElement, type) );
Now, I want to allow the user to delete an item from the grid by providing a delete button in separate column for each of the row in the grid. The code for the button is provided below.
function buttonFormatterRemove(col, rowIndex){
var w = new dijit.form.Button({
label: "Delete", //label: '<img src="images/del.png" />',
iconClass: "dijitIconDelete", //"dijitEditorIcon dijitIconCut",
showLabel: false,
onClick: function() {
console.log(this);
//if (confirm("Are you sure you want to delete the assertion?")){
alert("Do I come here for delete...");
//var item = grid.selection.getSelected();
//var work_id = grid.store.getValue(item[0], "work_id");
var item = this.grid.getItem(rowIndex);
var id = item['id'];
alert("delete row with id = " + id);
//Send POST request to delete
require(["dojo/request"], function(request){
request.del(contextPath + "/rest/items/" + id)
.then(function(text){
console.log("The server returned: ", text);
});
});
//}
}//function
});
w._destroyOnRemove=true;
return w;
}
The issue I am having is that when I click on the delete button for a row, though it does come inside onClick(), the code after alert("Do I come here for delete..."); doesn't get invoked. After, it executed first alert(), it calls displayDetailsForSelectedElement() to handle 'onRowClick'.
I am not sure if this issue is due to the fact that 2 events are fired when I click on delete button and if there is a solution to fix this? Any help and advice would be much appreciated.
You may call dojo.stopEvent(e) firstly to stop the event propagation in your delete method.
Related
from the last version update (from openui5 1.36.12 to openui5 1.38.4) the following code is not working anymore:
var myTable = new sap.ui.table.Table();
myTable ._oVSb.attachScroll(function() {
colorTheTableRows();
})
I'm using the "attachScroll" event in order to color the table rows with a specific logic.
Since last openui5 version update I get this error in console:
Uncaught TypeError: Cannot read property 'attachScroll' of undefined
I've tried to debug the problem and it seems that the object _oVSb has be removed from sap.ui.table.Table.
My final goal is to paint the rows with different colors based on the content ... is there any other way to reach this feature?
Thanks
Even i want this event some how came to this thread. i tried #Dopedev solution it was not working then i changed bit in that as below
$("#<tablid>-vsb").scroll(function() {
console.log("Table is scrolled")
});
instead of getting the tbody get the table-id-vsb and attach the scroll function
You can still get scroll event for your table using .scroll() of jQuery.
onAfterRendering: function(){
//Register handler for scroll event
$("tbody").scroll(function(){
// your stuff
});
}
Demo
I know that one of the earlier posts was already marked as the 'right' answer, but it did not work for me, so I thought I would post my working solution, as it might be helpful to others. The following code will work to effectively 'attach' to the vertical scroll event of a table in 1.38:
onAfterRendering: function() {
if (this.firstTime) { //You only want to override this once
var oTable = this.getView().byId("<YOUR_ID_HERE>");
//Get a reference to whatever your custom handler is
var oHandler = this.handleScroll;
//Store a reference to the default handler method
var oVScroll = oTable.onvscroll;
oTable.origVScrollHandler = oVScroll;
oTable.onvscroll = function(i) {
//Call the 'default' UI5 handler
oTable.origVScrollHandler(i);
//Call your handler function, or whatever else you want to do
oHandler();
};
this.firstTime = false;
}
},
var myTable = new sap.ui.table.Table("myTable");
After rendering:
sap.ui.getCore().byId("myTable-vsb").attachScroll(function() {
colorTheTableRows();
})
I'm using Google places AutoComplete on a textbox and it's essentially working, picking the locations and stuffing them into the textboxes.
The problem is that I want to only stuff the selection name - not the full name + address formatting out of the list that the AutoComplete list produces. I can't seem to find a way to override what goes into the textbox.
var $name = $("#txtName");
$name.focus();
var autocomplete = new google.maps.places.Autocomplete($name[0]);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
// explicitly update model
// but doesn't display in UI
$scope.locationData.Name = place.name;
// explicitly update the input box - doesn't update UI
$name.val(place.name);
return false; // doesn't work - updates UI
});
Basically what I'd like to do is take over the input box text assignment myself by doing the assignment myself and forcing autocomplete to not set the textbox value.
Is this possible?
Set the value with a short delay.
$('#NameBox').on('blur change', function () { $(this).val(place.name).off('blur change'); });
setTimeout(function () { $('#NameBox').val(place.name); }, 150);
Using .off() allows the user to edit the name if they wish. If you wish to only allow the places API name remove .off().
How can a select a Row of a WEBGRID after binding it so that row
will get highlighted(by mouse click on any row or cell of any row without the
use of check-box or option button as column)
1.)After selecting any row can I get the data value for that row?
2.) Can I move selection up and down by keyboard (up and down keyboard
button)?
3.) And after changing the index of selecting row(by mouse or by keyboard
up-down button) is rowselectedindexchaged or rowselectingindexchanging event
can be fired/handled
Thank you
There's a lot to this question, and there are lots of ways to implement it. Here's a rough sketch of how you could do this. I'm going to assume you're using JQuery as that will make this a lot easier.
To highlight a row or cell on click, attach click events to each:
$("tr").click(function() { $(this).css('background', 'yellow'); });
$("td").click(function() { $(this).css('background', 'lightblue'); });
Of course, you'll also need to un-highlight them, but we'll come to that in a moment.
To get data for a row (I assume you mean on the server, not the client), you'll have to do an AJAX call. It will be easiest to get the id of the row rather than passing the whole row back. Something like this inside the click events:
var row_id = $(this).closest("tr").find("input[type=hidden]").attr("value");
$.get("?row_id=" + row_id);
This assumes that you have added a hidden input to each row in your Webgrid with its row ID value.
In case you need to access the selected first row cell you can use this inside the click function:
var cellOne = this.cells[0].innerHTML ;
I also recommend that your click function should only be linked to a certain table (otherwise the selection will be enabled on all tr elements) and use a css class that is added and removed when selection changes.
$('#MainTable tr').click(function () {
$(this).addClass('select');
$('#MainTable tr').not(this).removeClass('select');
});
To move up and down, you can add a "keyup" event listener to the window and handle up/down. See here for more details: jQuery kepress detection on left, right arrows and space bar. You'll have to use Javascript to keep track of which row is currently selected so as to highlight/unhighlight as needed.
Finally, for the last question, you can trigger an AJAX call (or Javascript call) when the user clicks or arrow-keys to a different row. You'll already be keeping track of which row number has been selected, so you can just send that along with the event:
$.get("?event=row_selection_changed&row_id=" + row_id);
You can try this code:
<div id="AjaxWebGrid">
#grid.GetHtml(
htmlAttributes: new { id = "MainTable" },
tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("SendedInDateTime", "SendDate", null, style: "SendDateTimeStyle"),
grid.Column("", header:"حذف", format:
#<text>
#Ajax.ActionLink("Delete", "Delete",
new { id = "", DelID = item.Id }, new AjaxOptions { UpdateTargetId = "AjaxWebGrid" },
new { #class = "button" })
</text>)
));
</div>
<script>
$(document).ready(function () {
$('#MainTable tr').click(function () {
$(this).addClass('select');
$('#MainTable tr').not(this).removeClass('select');
});
});
</script>
#grid.GetHtml(htmlAttributes: new { id="MainTable" }, .....);
<script type="text/javascript">
$(function ()
{
var tr = $('#MainTable').find('tr');
tr.bind('click', function (event)
{
$("tr").click(function () { $(this).css('background', 'yellow'); });
});
});
</script>
I'm trying to implement a side menu that saves it previous state (or selected item) after a submit or after the user refreshes the page.
I decided to use cookies to save the index of the selected item of the menu.
However, is not working everytime. What's going on?
Here's my code:
$(document).ready(function () {
var cookie = $.cookie("SelectedNode");
$('.t-link').click(function () {
var name = "SelectedNode";
var index = getIndex($(this));
$.cookie(name, null); //delete previous value
$.cookie(name, index);
alert("It should save: " + index + " but it saved: " + $.cookie("SelectedNode"));
});
});
I would go like this, I don't think you need to delete the cookie value, it just overrides the existing one.
$(document).ready(function () {
var name = "SelectedNode";
$('.t-link').click(function () {
var cookie = $.cookie(name, getIndex($(this)));
});
});
Updating the same cookie with constantly evolving values is sometimes flaky depending on the browser you are using. I remember Firefox and Safari both being a PITA when trying to do this 2 years ago.
Anyway, you might consider a completely different tact and read/write the value into a hidden form field whose value is simply emitted back by your master page.
Goal:
Allow the user to delete a record by dragging a row from an AdvancedDataGrid, dropping it onto a trash-can icon and verify the user meant to do that via a popup alert with "OK" and "Cancel" buttons.
What is working:
Dragging/Dropping a row onto the trash icon.
If the user clicks the "OK" button, the record is deleted.
If the user clicks the "Cancel" button, the operation is canceled.
Problem:
After the user clicks the "Cancel" button and the popup alert closes, no rows in the ADG can be dragged. I've discovered that after sorting the ADG, by clicking on a column header, the user can begin dragging rows again.
Code: (changed from original post)
<mx:Image source="{trashImage}" buttonMode="true"
toolTip="drag a participant here to delete them from the project"
dragDrop="deleteParticipantDrop(event)" dragEnter="deleteParticipantEnter(event)"
dragExit="deleteParticipantDragExit(event)" top="4" right="122" id="image2" />
// trashImage Event Handlers:
private function deleteParticipantEnter(event:DragEvent):void
{
var component:IUIComponent = IUIComponent(event.currentTarget);
dragComponent = component;
DragManager.acceptDragDrop(component);
DragManager.showFeedback(DragManager.MOVE);
deleteParticipantDragEvent = event;
}
private function deleteParticipantDrop(event:DragEvent):void
{
var selectedKitNum:String = memberRpt.selectedItem.KitNum;
var selectedName:String = memberRpt.selectedItem.ParticipantName;
var component:IUIComponent = IUIComponent(event.currentTarget);
dragComponent = component;
DragManager.acceptDragDrop(component);
isEditingParticipantInfo = false;
isDeletingParticipant = true;
deleteParticipantDropEvent = event;
event.stopImmediatePropagation(); // Added as per mrm
alert.confirm("Are you sure you want to delete this participant, Kit #" + memberRpt.selectedItem.KitNum + " (" +
memberRpt.selectedItem.ParticipantName + ") from the project? This cannot be reversed!! An email will be " +
"sent to notify this participant and you will receive a copy of it for your records.", confirmRemoveParticipant);
}
private function deleteParticipantDragExit(event:DragEvent):void
{
var component:IUIComponent = IUIComponent(event.currentTarget);
dragComponent = component;
DragManager.acceptDragDrop(component);
DragManager.showFeedback(DragManager.NONE);
}
private function confirmRemoveParticipant(event:CloseEvent):void
{
if (event.detail == Alert.YES)
{
deleteReason = DeleteParticipantTitleWindow(PopUpManager.createPopUp( this, DeleteParticipantTitleWindow , true));
dispatchEvent(deleteParticipantDropEvent); // Added as per mrm
PopUpManager.centerPopUp(deleteReason);
deleteReason.showCloseButton = true;
deleteReason.title = "Reason for removal from project";
deleteReason.addEventListener("close", cleanupRemoveParticipant);
deleteReason["cancelButton"].addEventListener("click", cleanupRemoveParticipant);
deleteReason["okButton"].addEventListener("click", finalizeDeleteParticipant);
isDeletingParticipant = false;
}
else
{
cleanupRemoveParticipant();
}
}
private function cleanupRemoveParticipant(event:Event = null):void
{
memberRpt.invalidateDisplayList();
memberRpt.executeBindings();
if (deleteReason != null)
{
PopUpManager.removePopUp(deleteReason);
deleteReason = null;
}
}
public function finalizeDeleteParticipant(event:Event):void
{
if (deleteReason.reason.text != null)
{
selectedReportItem = memberRpt.selectedItem;
selectedReportItemIndex = memberRpt.selectedIndex;
memberReportData.removeItemAt(selectedReportItemIndex);
}
else
{
alert.info("You must provide a reason for removing a participant from your project!!");
}
cleanupRemoveParticipant();
}
Thanks in advance for all helpful suggestions.
Have you tried running the validateNow() method on the ADG after the cancel event?
Here is some more information on the validateNow() method.
Why you need to know about validateNow...
I really do think this is what you're looking for! Please let us know if that is the case...
Try refreshing the data bindings on the datagrid using executeBindings and/or invalidateDisplayList in the enclosing control.
To be honest this sounds a bit like a bug. Have you posted this on flexcoders? The Adobe guys hang out on there (probably here too, but definitely there)
Hang on... just spotted that between the drop event and the cancel button of the popup there is an asynchronous web service call which appears to be handled by GetParticipantOrderInformation. Is that correct?
If yes, then have you tried offering a simpler dialog for Cancel before you do that? I wonder whether the combination of layers of events is causing a problem.
I didn't have any success with refreshing the data bindings on the datagrid via the executeBindings and invalidateDisplayList methods. I also didn't have any luck by showing the confirmation alert before making the webservice call. In fact, I discovered that making the webservice call was completely unnecessary and removed it. So now the code flows like this:
Drag/drop ADG row onto trash icon.
Display confirmation Alert box.
If user clicked "Cancel" button, redisplay the ADG.
But the same problem persists. I'll update the Code section with the latest code.
Here's an idea:
- Just before you create the alert window, stop the DragEvent
event.stopImmediatePropagation();
store the event so we can resume if the user clicks the Yes button
queuedEvent = event as DragEvent;
show the alert window
if the user clicks the yes button, resume the queued event
dispatchEvent(queuedEvent);
DragManager.showFeedback(DragManager.NONE);