I'm attempting to input some values into the grid's new row template from outside the grid since selecting this particular input would be more than impractical to get done from inside de webdatagrid.
How can I reach the to be added row via javascript from outside the control? According to the documentation ig_controls.wdgTransaccion.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row(); should do the trick, but it fails to return any row at all
Thank you
Are you sure you calling this from the right place? Can't really tell without more context, however I think i can help you get the functionality you need. Have a look at this sample:
ASP.NET Data Grid: Add New Row - Client Events
The best place I can think of doing this is probably at the time of actual editing happening, so have a look at the EnteringEditMode event and you can do the following inside:
function WebDataGridView_EnteringEditMode(webDataGrid, evntArgs) {
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
}
Or if you want to do it on your own flow you can grab the grid client object and use the same code as the event above:
var webDataGrid = $find('<%=WebDataGrid1.ClientID%>');
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
Both of those methods work and allow you to fill in a cell value.
Related
so I have this basic bootstrap form and I have a button called add another location which will dynamically create another 4 inputs to add more location. This is achieved via jquery and jquery UI. So I made 3 copies of this form and put them in a list because eventually, they are going to come from a server and loop the form depends on however many sets of information available. The problem I am having is that, only my first add another location button works and it's creating additional inputs on the second and third one as well. I can give different id/class to the buttons where the new form goes but that wouldn't do me any good since more or fewer forms can be displayed via the server. My question is how can each button act independently without giving different id/class to it. so if I click add another location button on the second set of form, it only creates additional inputs on the second set not first or 3rd, same for 1st set and 3rd set.
this is the jquery code that clones and appends the new inputs
$("#pm-do-clone1").click(function () {
$(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});
here's my jsfiddle : https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/
ps: the fiddle the first add location is not creating new inputs, but it works on my local.Probably an external resource issue
alright, as I understand You gotta grab the clicked button by referancing it with;
$("#pm-do-clone1").click(function () {
$(this).//rest of the code
and at the rest of the code as we captured the clicked one, we now have to find its parent where we gonna add the new inputs. For example,
var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);
Edit: Btw, you are clicking an ID, ID is not the best model to catch one from multiple elemets because it sometimes make mistakes, use class instead.
Edit2: Check this snippet too. I belive this will help you. View DEMO
Edit3: Why do you wrapping each inputs into divs? It seems not necessary no create too much elements as you could achive the same result with only inputs.
I am new to ExtJS and working on application where I have a form(lets call it outerForm). I have buttons to add/remove forms dynamically to/from the outerForm.
Now i am using outerForm.getValues() to retrieve all the field values(of all the dynamic forms; lets call these forms innerForm[ ] ).
The problem am facing is : even after removing/destroying the form(say
innerForm[k]), I get its values in the object returned by outerForm.getValues(),although outerForm.items does not have
innerForm[k].
I Know i can loop over outerForm.items for retrieving values rather than using outerForm.getValues(), I just want to know the reason of this inconsistency.
Try below code to remove the element from inner form.
Ext.getCmp('outerFormId').innerItems[olditem.initialConfig.tabIndex].removeAll();
Here i consider outeFormId is a kind of tab panel and it contains different tabs so on tab changes,it removes the current inneritem elements,before moving to new one.
I have a button in each row, when pressed that row is removed from one table, and added to another table:
var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);
and at first it appears to work perfectly, the row is removed from one table and added to another, but when I force a re-draw (by changing the sorting of one of the columns, for example) all the rows are back as they were, and the buttons no longer work. This is the case for both the removed rows, and the rows added to the other table.
Is this because I'm using a .jsp table as a data-source? Would this work correctly if I dynamically added all the rows to the table using JavaScript at load-time, or if I used a modelMap collection as a data-source?
Thanks a lot for any advice.
Solution for future googlers - I have no idea how my google-Fu did not find the answer, I had all the right keywords!
In short:
I was doing this to add:
$('.my-other-table-class').append(row);
And this to remove:
var row = $(this).closest("tr").remove().clone()
but I should've been doing this add:
$('.my-other-table-class').dataTable().fnAddData([$(this).attr("data-val1"), "var2"]);
And this to remove:
$('.my-table').dataTable().fnDeleteRow($(this).closest('tr')[0]);
With more detail:
What I am really doing here is modifying the DOM with JQuery (well duh, but I'm really new at this, remember...) - I figured the DOM was the data-source for my table, so that made sense? The table is redrawn, it rereads the DOM and updates? Well not really.
In order to be dynamic, if you use DOM (in other words HTML, or in my case .jsp rendered as HTML) as your data-source, upon initialization, datatables will copy all that information into a JavaScript array.... so rather then my original thought:
"The DOM is not updating correctly, and that issues is propogating up in to my table... because HTML is static...or something?"
it turns out the actual problem was:
"I was updating the DOM, but the real data source was a JavaScript array I wasn't seeing. So upon redraw, this array was overwriting the DOM and my changes were being lost."
TL;DR: Use the Data-tables API and don't modify the data-source directly, unless you need to.
If the event handlers are one of the issues, it may help to set up your event handler like this:
$("#myTable").on("click", "button.moveMe", function(e) {
e.preventDefault();
var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);
});
This will set a handler on the table that has id="myTable". The handler will look for click events on buttons with the "moveMe" class. It will catch the event on rows that are added later, as well as the rows that exist when this hook is created.
Reference: http://api.jquery.com/on/
I'm working with GWT-2.1.0 and I've draw a table through CellTable which contains a column, the third, of EditTextCell. I'm trying to modify the value of that cell for each visible rows by code using:
table.getRowElement(i).getCells().getItem(2).setInnerHTML("<div style=\"outline:none;\" tabindex=\"-1\">0</div>");
Window.alert("Pause");
Thanks the alert I can see that all the rows have been updated correctly to the new value, but, once the cycle ends, a refresh of the table restore the user's input nullify the job done.
Is there some temporary cache that EditTextCell uses to mantain the data? Can I erase the text inserted by the user in another way? Can I reach the Column of the CellTable so allowing me to use the setValue(...) field?
Anyone can help?
Thanks in advance!
P.S. Using *.setInnerText("0"); fails too.
P.P.S I've read that GWT2.2.0 should have a CellTable.getColumn(int index) method to do so, but I don't know if it's useful to me - and, more important, when it should comes out.
EditTextCell is a subclass of AbstractEditableCell, which has the clearViewData method. You can call that method for all objects in the table for which you want the data to be cleared.
Details:
I'm basically trying to implement the functionality of the example here (http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/editondblclick/defaultvb.aspx) on my own site, but instead of using a data source control located in the page markup (like in the example: SessionDataSource), I'm using a dataset that I get from some server code-behind. I am able to successfully get my double-clicked row into edit mode with my dropdowns successfully populated, however when clicking onto another row to update the one in edit mode, no-dice.
I've discovered that apparently the client-side JavaScript function updateItem() does not initiate an AJAX callback like I originally thought, so I've been trying to work my way around that. Currently I'm using my RadAjaxManager to perform an AJAX callback with the row index number like so:
function RowClick(sender,eventArgs)
{
if(editedRow && hasChanges)
{
hasChanges = false;
$find("<%= RAM.ClientID %>").ajaxRequest(editedRow);
}
}
This gets me to my server code. Awesome. But,
Problem: I must be accessing something wrong, because the GridDataItem cell text that I'm trying to obtain for the edited row all has the value " ".
Dim gdi As GridDataItem = FieldOpsScheduler.Items(rowIndex)
Dim d As DateTime = DateTime.Parse(gdi.Item("EndDate").Text) //<--FAIL
I've been scouring the Internet for hours now trying to find how I can pull off what I'm trying to do, but to no avail.
Additional Info: I'm using GridDropDownListColumnEditors on the front-side to do the editing for my table, declared like so:
<telerik:GridDropDownListColumnEditor ID="ddlce_SunAct" runat="server" DropDownStyle-Width="60px"></telerik:GridDropDownListColumnEditor>
So does anybody have any ideas on what I have to do to access the values that have been changed in my RadGrid?? Is the problem that I somehow need to rebind my RadGrid when clicking on a new row? If so how do I do that? Any solutions or ideas would be greatly appreciated. (Also although I'm doing this in VB.NET, feel free to write responses in C# if you wish as I understand that too. :-) ) Thank you in advance.
With manual binding updateItem() should still raised the UpdateCommand server event of the grid, but you will have to update the grid source by hand. Modify the local version of the online demo where you Telerik AJAX controls installation is and go from there.
Dick
http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html
If anyone else has the same problem as I did, go to the above link and scroll down to the section titled "Accessing the value of cells in edit mode".