In My project,we used data grid using AngularJS Implementation as follows.
<div id="entityGrid" ui-grid="selectedOptions" ui-grid-selection data-ng-model="selectedOptions"></div>
i can get selected item in grid as below using angular.js .
"entity" : $scope.createString($scope.selectedOptions.data)
but i also want to get selected item in grid using jquery/javascript due to some requirement..
i tried to get value using jquery as below. but it didn't work.
var entity = $('#entityGrid option:selected');
please help here.
You question is not very clear. I wonder if you could provide a plunker of your codes.
Here is one:
http://plnkr.co/edit/3KXrUuCsSACuhefmyzxN?p=preview
When you click "Copy" button, the following function is invoked:
$scope.copySelection = function (){
$scope.retainSelection = $scope.gridApi.selection.getSelectedRows();
};
What you get in $scope.retainSelection is an object of key:value pairs. You can access which ever key of it.
Here is another question talking about this:
Where can I get Angular ui-grid selected items
Hope it helps.
Related
I have been working all day to try and get the selected values on one set of checkboxes on my Django form and copy the selected ones only to an identical checkbox on my form. If a user clicks on a checkbox in form.author defined below, I want the same identical checkbox to automatically be checked on form.favorite_author defined below.
I've tried a JQuery approach as documented here...Copy Selected Checkbox Value From One Checkbox To Another Immediately Using JQUERY but no luck so far. I've recently begun exploring an avenue with the Modelmultiplechoicefield and the checkboxselectmultiple parameters within the form itself. From what I can tell, when I am using JQuery and trying to check a box on the form, the value is coming back as undefined which is most likely why it is not propagating the checkbox selection to the other checkbox.
Here is my form....
class ManagerUpdateNewAssociateForm(forms.ModelForm):
class Meta:
model = Library
self.fields['author'] = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(),
queryset=Books.objects.all()
self.fields['favorite_author'] = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(),
queryset=Books.objects.all()
My HTML...
<div class="spacer83">
{{ form.author }}
</div>
<div class="spacer83">
{{ form.favorite_author }}
</div>
When I tried to trace JQuery, it told me the checkbox selections are undefined. I did read a bit about how Modelmultiplechoicefield, since it uses a queryset it doesn't show the selections, but I can't figure out how to get it to.
Thanks in advance for any thoughts.
In combination with the other issue included in this one, I went back to the JQuery route and explored further. From what I can tell, I was not able to use the class for the input because of the way the HTML for Django forms is generated in this use case. I ultimately was able to leverage the input name and then used the code below to interrogate the checkboxes accordingly:
$(document).ready(function() {
$("[name=author]").change(function() {
let selectedValA = $(this).val();
let isAChecked = $(this).prop("checked");
$(`[name=favorite_author][value="${selectedValA}"]`).prop("checked", isAChecked);
});
});
});
I have 3 or more DataTables in my single page link below. i am using custom filter input for all DataTables.
Click Here for page
or copy this url - http://image.webspapa.in/test.php
This is working fine for 2nd and 3rd table but
whenever i filter first table , all the three got filtered. whats wrong in
this ?
Second why i am unable access variable dataTabel value in my second $(function(){})(console showing it undefined) while i have already defined it as global scope
var dataTabel;
$(function() {
var dataTabel = $('.dataTable').DataTable({"dom": 't<"bottom"ip><"clear">'});
$('.panel-heading input').keyup(function(){
var Tabel = $('.panel-heading input').index($(this));
dataTabel.tables(Tabel).search($(this).val()).draw();
});
});
$(function(){
console.log(dataTabel);
});
please See my full code in link provided, and help me. Thanks in advance
Here is my requirement.
List item
I have a couple of dropdowns A and B
I have a javascript key-value variable created:
var keyvalue={"key1":["value1","value2"],"key2":["value2","value4"]}
I am populating the keys in dropdown A, on selecting this dropdown, i am populating the corresponding values (froom the keyvalue variable) into the drop down B
Here is the sample code i a using :
The problem is even if i select a different option in dropdown A, the corresponding old option is present in the new drop down,i.e, new values are appended, rather than creating a new drop down
Any help is appreciated,thanks in advance.
You need to remove all options before populating. Add this directly right after your var quantity statement.
while (selectvalue.options.length > 0) {
selectvalue.remove();
}
Also, as mentioned by #francisco-presencia, you should lose the onchange in the HTML and instead use an event listener within your script.
I recommend you go the separation of concerns route. That means deleting the onclick="" event, and instead doing:
$('#key').change(function(){
$('#value').remove();
// Do the rest of the logic of retrievevalue() here.
});
You should use empty() to remove the old options before appending the new.
You can see it on my sample Fiddle:
JS Fiddle Here
$('#select2').empty().append(Weapons);
I have another issue with using RadGrid control from telerik.
I am trying to get/set the value of a GridDropDowncolumn in RadGrid using javascript (in edit mode). Could anyone suggest the appropriate javascript method to do this?
So I have the following RadGrid GridDropDownColumn:
<telerik:GridDropDownColumn DataField="ProjectileTypeId" HeaderText="Projectile Type"
DataSourceID="ProjectileTypesDataSource"
UniqueName="ProjectileType"
ListTextField="Name" ListValueField="Id" />
Now I am tring to get the current dropdown's selected index in javascript (during edit mode)
What I have at the moment is:
var radGrid = $get("RadGrid1");
var griddropdownlistElement = $telerik.findElement(radGrid, "ProjectileType");
However not sure of the appropriate javascript method to set/get the value.
you have to provide a index to each dropdown in the grid and based on that index you can get the selected index, to do this you can see the following example:
http://www.telerik.com/community/forums/aspnet/grid/get-dropdownlist-value-from-rad-grid.aspx
I am exploring dojo grid, and could not find a good example of how to handle navigation by clicking on the row.
There is a simple grid example here
How to extend the code with the following requirement
handle doubleclick event on row items
read the identifier and extract the value corresponding to the selected row ( 12 for first row)
redirect to {current domain}/view/{identifier} (like www.example.com/view/12)
any help would be a great time saver...
thanks.
EDIT: added javascript tag so that more user may see this post (only 9 so far with dojo alone)
I had to solve problems 1 and 2 above.
You can use dojo.connect to connect the grid to the onRowClick event. For example, if you have a grid of the form:
<div dojoType="dojox.grid.DataGrid" jsId="grid" id="myGrid" structure="layout" selectionMode="single"></div>
You can then call in JavaScript:
dojo.connect(grid, "onRowClick", clickMethod);
clickMethod can then access the data from the row as follows:
function clickMethod(event) {
...
selected_index = grid.focus.rowIndex;
selected_item = grid.getItem(selectedIndex);
//Not sure if this is the most efficient way but it worked for me
selected_id = grid.store.getValue(selectedItem, "field_name_from_store");
...
}
I imagine you can do a location.href or similar after that.