How to show details from table to modal popup using angularjs - javascript

Please have a look at 3rdpage if i click the eye icon the transaction details modal popup and show the value from table behind it. i want if i first row then it shows only first row details like that. if I click 2nd row it shows sec row... HOW to??
this is my component.TS file
this is my html modal template
this is my demo project

First there is no need to iterate transactionsData inside modal.Modal should receive only row data object .You have to pass single row data on the eventHandler of eye button click.
You can refer this sample

Related

Change the first field of the first row of a grid with bootstrap

I have a one page html empty, one controller angular and one service angular.
In my service I have implemented a grid with bootstrap, with 8 columns. when i put in my data i create 8 rows with all the same fields each other.
i want to understand how change the html code of the first line in the first field.
an example could be:
i have a table 8x8 when i click on first field of first row it show me the string "Hello" and when i click on other first field it show me the string "Good".
Simply i want change the html code row of a table already implemented with bootstrap, the first row.

How to add a a dynamic row to table on click of a button, and make the existing rows editable on click using Ember

I want to edit the table rows, so for that on click, I want to make the columns as text boxes so that I can edit, and save.
Also, how to add rows dynamically on click of add button. I know how to do using jQuery, but no idea in ember.
Thanks!
I want to emulate this kind of behaviour in Ember.
http://jsbin.com/codeso/1/edit?html,js,output this jsbin has a table, and a button. On clicking of button a dynamic row gets added in table with columns as text-boxes so that the user can enter data, which on pressing another button can be saved.
I suppose your table is bound to a model of an ArrayController.
<table>
...
{{#each element in model}}
<tr>
<td>{{element.name}}</td>
...
</tr>
{{/each}}
...
In your controller add an action
// inside controller
actions: {
addElement: function() {
var elements = this.get('model'), // model contains the data/list for the rows
newElement = /* here your object creation code */;
elements.pushObject(newElement);
}
}
Then in your Handlebars template
<button {{action "addElement"}}>Add row</button>
I'm working on this same thing now. My idea is to have a row with the inputs before the {#each} block, and make it visible when the user chooses to add a row. This row will have cancel (simply make the row invisible) and save buttons. Only when the user saves is something like splattne's addElement() called.
This way, I don't have to try to add row and form markup dynamically, which is really just an HTML/Javascript thing, and the Ember action is only for when data actually needs to get added to the backend.

How to display row contents in dialog box when clicking on the row

I am new to javascript and jQuery. Yesterday I asked this question link and found out how to add rows to table from input values. So now I have a table which will create new rows which will display user inputs. Today I am trying to find out how I can display the row contents in a dialog box when I click on a particular row. Any leads, advice, tutes will be useful. Thanks.
Here is a start:
Whenever the user clicks on this row, the html will be displayed in the javascript default dialog box.
If you want to do more sophisticated processing you could call a function that will process the rows content using the following:
<script type="text/javascript>
function processRow(row){
...
}
</script>
...
<tr onclick="processRow(this)">

How to override submit button event in add/edit dialog in jqGrid

I am using jqGrid for a scheduling process. In the grid, I am displaying the working hours and other details of employees under a department. On clicking a row in the grid, another grid has to pop-up which gives details of the corresponding row in the master grid. For example you can refer to http://trirand.com/blog/jqgrid/jqgrid.html (adanced>masterdetails). This shows an example of two grids where on clicking a row in the master grid you get the invoice details in the below grid. I too need the same functionality and added to it, I have to add/edit the rows in the second grid. Both the grid datatype are local. On clicking submit button in the add/edit dialog I want to override the default action which submits the data to the server, and write my own function. The function is to store the added details/edited details into an object and bind it as a data block to a div.
I tried onclickSubmit, but it was still invoking the default method.
Added to this, i would like to reload the grid with the new row.
for your first problem, what you can do...onSelectRow property of jqgrid you can send the data of that row as local data and load a new grid just below to previous grid
for example, this you can write with first grid
onSelectRow: function(){
var sel_id = jQuery("#grid").jqGrid('getGridParam', 'selrow');
//this will give you id of the selected row
now to get values of the column for this row, there are several methods
i'll go with this one, lets say i have date as a column in this row
so,
var date=getCellValue(sel_id,'date');
and now you can load a new grid in this same function and send this data to that grid
and now your second problem, for the custom functionality of add/edit dialogue you can make use of this event and over ride it
beforeSubmit
check this
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow

pass data from popup gridview to parent page

the explanation given here http://wiki.asp.net/404.aspx?aspxerrorpath=/themes/fan/pages/page.aspx/282/passing-value-from-popup-window-to-parent-form39s-textbox/
is exactly what I want , but Its not giving the output and parent page despite doing exactly as explained ,
can anyone please send sample website with northwind data base ? no need of mdf file ,just a tested demo I will attach Northwind .
The task s simple , In pop up window there is a grid with some databound column and one with button , my task is when buton is clicked it must return text from respective grd row to the parent page'control (any)
Maybe is not working to you because on the sample is hard code the button id, and this logically because on the popup window did not know how the button have been render.
getElementById("ctl00_ContentPlaceHolder1_TextBox2")
So ether correct this id to make it as its appear to your page, ether make the control id on TextBox2 static so is not change, and get it by name.

Categories

Resources