I want to know how to add one particular column value as textbox in an AngularJS grid.
So, I am implementing an AngularJS grid as below:
<div>
<table>
<tr>
<th>
<td>Customer Account Number</td>
<td>Customer Name</td>
</th>
</tr>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.CustomerAccNumber}}</td>
<td>{{item.CustomerName}}</td>
</tr>
</tbody>
</table>
<input type=button value="Add Row" ng-click="Add()"/>
So, in scenario 2 things happen:
By default I am getting few records as "Customer Account Number" and "Customer Name".
But there is an "Add Row" button on the same page I need to implement which adds a new row to the grid.
The first column "Customer Account Number" is a text box and second row is noneditable.
So, how to place textbox as a column only when adding a new row from button?
Let's say after adding add row my first column is coming as text box, so after entering the account number in the textbox on textchange it should fetch the customer account number and display it in the same row.
Can someone help me figure out how to put the textbox into one particular column in grid?
Can it be done the way I have implemented the grid?
I don't want to use nggrid.
I would do something like this:
First, in your Controller, in your Add() function, when you push a new row, add a field such as isEditable to allow you to differentiate between a newly added row in the UI.
$scope.Add = function() {
$scope.data.push({
'CustomerAccNumber': 1,
'CustomerName': '',
'isEditable': true // field to identify new row
})
}
Then in your markup, having that flg available, you can leverage ngIf, like so:
<tr ng-repeat="item in data">
<td ng-if="!item.isEditable">{{item.CustomerAccNumber}}</td>
<td ng-if="item.isEditable">
<input type="text" ng-model="item.CustomerAccNumber">
</td>
<td>{{item.CustomerName}}</td>
</tr>
it should fetch CustomerAccount number
As far as your third item, you can use ngBlur to make a call when the user clicks out of the box:
1) Define a function in your controller to call when the user leaves the box.
$scope.doSomethingWithAccNumber() {
// $http call, etc
}
2) Update your textbox to use the ngBlur directive that will trigger when the user clicks out.
<td ng-if="item.isEditable">
<input type="text"
ng-model="item.CustomerAccNumber"
ng-blur="doSomethingWithAccNumber()">
</td>
If you want other keys to trigger this, you can use ngKeydown as well. Use of this is outlined well here. For example, you would want to add ng-keydown="$event.keyCode === 13 && doSomethingWithAccNumber()" to your input to trigger on Enter.
Related
I am taking inputs in the main form which consists of a checkbox.
Before submitting the form i am showing a popup to confirm the submission.
I am unable to populate the checkbox field on the popup
var target = jQuery ('div#confirm_popup div.content');
code for populating the popup:
target.find('randomCheckboxMain').html(form_table.find('#randomCheckbox:checked').val());
here i am finding the check box in main form and then fetching its value and populating the pop up.
this is my main form checkbox, it is part of table with id="form_table"
<table id="form_table">
....
....
<tr>
<td class="field_head">checkh:</td>
<td>
<html:checkbox property="prop" name="randomCheckboxMain" value="yes" disabled="true"></html:checkbox>
</td>
</tr>
this is my popup field
<tr>
<td class="head">checkValue:</td>
<td class="randomCheckbox"></td>
</tr>
Can anyone tell me what i am doing wrong.
you use of class in <td class="randomCheckbox"></td>
So :
change :
.html(form_table.find('#randomCheckbox:checked').val());
To :
.html(form_table.find('.randomCheckbox:checked').val());
You have a class in your td, but you have id in the jQuery.
target.find('.randomCheckbox').html(
form_table.find('[name="randomCheckboxMain"]').val());
Give a ID or class to the checkbox to check easily if it is checked.
I have a table constructed with ng-repeat, where each row has a checkbox set by a value in the JSON data that's being repeated:
<tr ng-repeat="t in tabledata" ng-click="t.isChecked=t.!isChecked">
<td><input type="checkbox" ng-model="t.isChecked"></td>
<td>{{t.firstName}} {{t.lastName}}</td>
</tr>
I would like a click on the row to toggle the checkbox value in that row. I tried the above, but it does not work. Thoughts?
Try this:
ng-click="t.isChecked = !t.isChecked"
Exclamation sign should go in front of t.isChecked.
Also make sure you stop propagation of the click event on the checkbox itself, otherwise clicking on the checkbox will not allow you to check/uncheck anything.
<input type="checkbox" ng-model="t.isChecked" ng-click="$event.stopPropagation()">
Demo: http://plnkr.co/edit/KJziWDmlN2gTbthOF4yJ?p=preview
I created a popup box using jQuery. The popup box contains a button named submit.
1.In a table <td>, there are two buttons "Add the name" and "Add from list". When the user clicks "Add the name", a popup box will open and get the input from the user (namely text data).
2.After entering the text data in the popup box, they should press the submit button. On clicking submit, the input text entered by the user is displayed in a <div id="dynamic"></div> in a <td>. (See HTML below).
3.In the HTML below, the second <tr>: in a separate I put some text, i.first Aid notes with a check box ii.sent to sick bay with a check box iii.ambulance with a checkbox.
4.When the user clicks the submit button, the text data is displayed in the name <td> cell (See HTML below). But what I want is at the same time the above mentioned check box with label should bind in their respective <td>s in a table dynamically (See HTML below, I placed it in individual <td> (i.e when the user clicks the submit button the check box also should display, this should happen at every click on submit).
I don't know how to perform using Javascript or jQuery. Can any one please come up with code.
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Atil</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
</table>
sample fiddle
This is what i required as ouptup,but it is displayed as in a single <td>,i want it to be happen that eack check box and their respective label in individual <td>.
How to do with jquery/javascript. Thanks.
That would be in your 'addtreatment' function, what code do you currently have there?
I'm trying to write a web form, which will have selectable options based on users input from earlier in the form.
Where I'm getting stuck is;
I have a table room types, which is just td tags with input tags (type=text). These are filled in by a user, so I've no idea what they are..
I've got a button to add extra lines to this table (Jquery to add another td tag and input tag)
Users add as many lines as needed
The next part of the form is to fill in Rooms, and select the type for each room. The table layout is the same (except there are two columns, rather than one), and extra lines are added via another button with Jquery.
What I'd like to be able to do, is for new lines added to have two columns in the table. One input text field, and the other a select box with options taken from the table above.
I've managed to get this working to a point. But as users may go back to edit options from the original (room types) table, I need the select boxes to adjust their values based on what the original table currently says.
I can get this working by emptying and re-populating my select boxes everytime one of the input fields accessed (using OnBlur, which is probably not the most effective way to do this), but since it removes entries from the bxes, and then re-populates, any of the select boxes that have been populated already get reset. I only want invalid options (i.e. values that do not exist in the original table) to be reset.
I've been looking/playing at this for a long time now, but my programming abilities are only what I've taught from here and google, whilst messing around on a few very small things before...
My HTML code as it stands (well, part of my code, I've removed all the irrelevant code to keep it simple) is here:
<div id="rm_types_info">
<table id="room_types_table">
<tr>
<td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>
</tr>
</table>
<button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>
<div id="rooms_info">
<table id="rooms_table">
<tr>
<th>Room Number</th>
<th>Room Type</th>
</tr>
<tr>
<td><input type="text" /></td>
<td>
<select class="room_type_select">
<option value="Please Choose">Please Choose</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="rooms('rooms_table');">Add Another Room</button>
</div>
and my JQuery is;
<script>
var userscounter=2
var rmtypescounter=1
var roomscounter=2
function users(ID){
document.getElementById(ID).insertRow(userscounter).innerHTML = '<td><input type="text" /></td><td><input type="text" /></td>';
userscounter++;
};
function rmtypes(ID){
document.getElementById(ID).insertRow(rmtypescounter).innerHTML = '<td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>';
rmtypescounter++;
}
function rooms(ID){
document.getElementById(ID).insertRow(roomscounter).innerHTML = '<td><input type="text" /></td><select class="room_type_select"><option value="Please Choose">Please Choose</option></select></td>';
roomscounter++;
};
function edit_rooms_select(){
var roomtypelist = $('.room_type_select');
roomtypelist.empty()
$('#room_types_table tr td input').each(function(){
var text = $(this).val();
roomtypelist.append('<option value='+text+'>'+text+'</option>');
});
}
</script>
I've removed the Jquery that was removing the duplicates, since it was definately not working how it needs to...
I'm aware that I may be going about this completely the wrong way, and if using td tags or inputs etc is completely wrong, I'm happy to change the whole form it necessary.
I'm sure this isn't the most effective way to do what I need, but this is how I managed to get it to work...
My HTML...
<div id="rm_types_info">
<table id="room_types_table">
<tr>
<td><input type="text" name="2" class="room_types" onblur="edit_rooms_select();" /></td>
</tr>
</table>
<button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>
<div id="rooms_info">
<table id="rooms_table">
<tr>
<th>Room Number</th>
<th>Room Type</th>
</tr>
<tr>
<td><input type="text" /></td>
<td>
<select class="room_type_select" id="room_type_select1" >
<option value="1">Please Choose</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="rooms('rooms_table');edit_rooms_select();">Add Another Room</button>
</div>
And the JQuery scripts relevant. In particular, it was the final function "edit_rooms_select()", and specifically the "Add new options to each select" that I was struggling with.
<script>
var rmtypescount=3;
var room_type_select_count=2;
function rmtypes(){
$('#room_types_table tr:last').after('<tr><td><input type="text" name='+rmtypescount+' class="room_types" onblur="edit_rooms_select();" /></td></tr>');
rmtypescount++;
};
function rooms(){
$('#rooms_table tr:last').after('<tr><td><input type="text" /></td><td><select id="room_type_select'+room_type_select_count+'" class="room_type_select"><option value="1">Please Choose</option></select></td></tr>');
room_type_select_count++
};
function edit_rooms_select(){
$('#room_types_table tr td input').each(function(){
var name = $(this).attr('name');
var value = $(this).val();
//Add New Options to each select
$('#rooms_table select').each(function(){
var last = $(this).children('option:last').val();
if (name > last) {
$(this).append('<option value="'+name+'">'+value+'</option>');
};
});
//Change any room types that have been edited
$('.room_type_select option').each(function(){
var match = $(this).val();
if(name == match){
$(this).text(value)
};
});
//Remove Blank Entries
if(value == ''){
$('.room_type_select option[value='+name+']').remove();
};
});
};
</script>
I think that the edit_rooms_select function is much more expensive than it needs to be. For what I require, this isn't going to be a problem, but I would be very interested to see how other people suggest the lists are edited, following my requirements..
- All user inputs from the room_types_table must be options in the select boxes in the rooms_table
- Any input changed in the room_types_table must have its relevant option in the select boxes changed to match
- Any input that is left blank (or later deleted) from the room_types_table must be removed from the select boxes
- Any select box that has a selection which is then removed from the room_types_table must be reset back to its original "Please Choose" option.
If anyone can suggest better ways to do this, or can tidy my code in any way, I'd like to see the code, and also have it explained, as I'm very inexperienced with Javascript/Jquery.
I have a form with a number of user-fillable fields. The user needs to enter a number in those fields that is selected from a pop-up window containing a large table of data.
For example, one field might say "Tax rate." The user would (preferably) click on the (empty) "tax rate" input field, which would bring up the large table of data. The user would (preferably) click on one of the values in that table which would then close the table and populate the input field with the value.
What I'm hoping (reaaallllyy hoping) is that I don't have to create some sort of special id for each cell in the table in order to pass the number back to the form field, because the tables are huge, and I hope to create them in plain old <tr><td>1.234</td></tr> format.
I smell jQuery but I'm not familiar with exactly how to implement it. Any help would be greatly appreciated.
Here's a very rudimentary demo using jQueryUI dialog that might get you started:
HTML:
Rate:<input type="text" id="rate_input" />
<div id="dialog" title="Click a value to fill input and close dialog">
<table id="rates" border="1" width="100%">
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</table>
</div>
jQuery:
$(function(){
$('#dialog').dialog({
autoOpen: false,
width: 400
});
$('#rate_input').click(function () {
$('#dialog').dialog('open');
});
$('#rates td').click(function () {
$('#rate_input').val($(this).text());
$('#dialog').dialog('close');
});
});
DEMO: http://jsfiddle.net/5jMqJ/