In a kendo ui grid, in the dataBound call, you can access the original data using the below
e.sender.dataSource._data
This looks like it's intended to be for internal use only, and it doesn't tell you which data row was used to generate the current line
My question is, is there any to access the original data inside this call?
I can think of two ways but neither is ideal
(1) Stick some data in a cell(s) and access it using the below
var rows = this.tbody.find("tr.k-master-row");
var innerHTML = row.cells[row.cells.length -1].innerHTML;
You could put a Guid in here and use it to find the original row
(2) As above but json encode it so you get an object to deal with, the json object would contain everything needed
Is there a better way?
Incidentally, what am I trying to accomplish? The row I am binding to has an override cssclass for the row which controls the row's tds styling. I am setting it in the dataBound call. There may be a better way to accomplish this
thanks
OnaBai has answered this, here are the specifics.
NB I'm not stating this is the best way in general to do this, in my specific example its just easier
dataBound: function(e)
{
for(var i=0; i<rows.length; i++)
{
var row = rows[i];
var dataSourceRow = this.dataSource.getByUid($(row).attr("data-uid"));
$(row).addClass(dataSourceRow.RowCssClass);
}
}
There is actually such GUID. Each row has a unique id field called uid that is accessible both in the model via uid member as well at HTML level by doing row.attr("data-uid") or using jquery.data.
So, if you have your row element it would be something like:
var item = this.dataSource.getByUid($(row).data("uid"));
or even if row is already a jQuery object then:
var item = this.dataSource.getByUid(row.data("uid"));
Related
I've run into an issue using jqGrid 5.2.1.
I'd like to retrieve a property from a row of data when a user clicks on a cell. The property is in the original data set, but it isn't displayed in the grid. Also, I'm using the scroll feature, so the row ID's are coming back like "jqg20".
I've tried using getRowData, but that only returns the data that is displayed in that row. getLocalRow will not accept the row ID with "jqg" in it. Is there another way that I can access the same row in the local data that the user clicked in the grid to pull out a property? The property 'attr' is what I want to pull out in the example:
var testData = [
{col1:10, col2:20, col3:30, col4:'TEST', col5:50, col6:60, col7:70, col8:80, col9:90, col10:100, attr: {property: "this is column 1"}}
]
Here is the jsfiddle that I've created to show the problem:
https://jsfiddle.net/rhv247q7/
Before to answer of the direct problems I need to do some notes.
It is recommend to use the jqGrid version where the problem persist. You tell us for version 5.2.1, but you use 4.6, which we think can come to some uncomfortable situations.
It is always good idea to set id row – this can be done either in the description of the colModel (key : true) or with the appropriate reader in this case localReader. When you set this you will be sure that there will be not a problems getting certain row and some other important commands. It is not good idea to let the grid create the ids.
Now to the problem : to do what you want you should use the getLocalRow, which return the data as it comes to the grid – i.e the original data.
In your case there was a bug when scroll is on and no id is set from the developer (i.e. the grid creates internally the id). The problem is fixed in GitHub and you can test it.
I have this function which I believe is following this process:
function verify(){
$.get("map_process.php", function (data) {
verified = $(data).find("marker").eq(-1).attr('verification');
});
}
Get data from php file/db
In the db, find the table "marker"
Find the last record in the table marker
Assign the value of the 'verification' column to the variable verified
This is doing what I want (kind of) but I need to be able to specify what record to get the 'verification' value from, but not by it's position in the table (as more records will be added and the above will just get the last record regardless). Is there another method that is kind of like .eq(x) but will allow me to specifically select a record based on another attr in that record.
eg. Say I want to find the verification value for record 1 through an event listener, and then find the verification value for record 6 through a different event listener.
I have a variable which can distinguish what row I want to get, but how can I incorporate this into the statement above. (i'm thinking instead of .eq(-1)
You can use filter() which can contain as many conditions as you need.
$.get("map_process.php", function (data) {
var myVariable = $(data).find("marker").filter(function(elementIndex, element){
return $(this).attr('someOtherAttribute') === 'valueWanted';
}).attr('verification');
});
Since I'm really not sure what the data looks like or what attribute you need the above is only a guess at how you would need to implement
See filter() API docs
I have a datatable with a number of rows:
var table = $('#mytable').DataTable(...)
And I'm trying to find the rows that contain <a>'s with specific data values.
From the documentation, I'd expect is that table.rows('<magic row-selector>') to work, for some value of <magic row-selector>. But even the simplest selectors don't seem to work the way I'd expect them to.
The docs say that if I pass a string to rows(), it is treated as a JQuery selector operating on the the <tr> elements.
http://datatables.net/reference/type/row-selector
Now I know for certain that each of these rows contains a number of 's - I can see them in the debugger if I examine the outerHTML of the elements returned by table.rows.nodes(). So I'd expect that this would return all rows:
table.rows('a')
But it returns none.
What am I not understanding?
What selector should I use, to find all of the rows that contain <a>'s with a specified value for a data attribute?
edited in response to answer
davidkonrad's answer provides some help - I need to pass a jQuery selector object, rather than a string.
Unfortunately, it seems that I need to construct the jQuery selector object before I define the table. I'm not sure I understand why, it seems an unreasonable restriction, but playing around with his fiddle, I did see differences in the rows returned by table.rows(selector) between when I defined the selector before or after I initialized the table.
In my case, then, that makes this approach unusable, because what I'm trying to do is to remove rows that have certain values set in data attributes. There is no way for me to know what values the user might have selected before I construct the table.
I also think the documentation is a little bit cryptic on that point :) The meaning is
By "jQuery selector" there is meant "the jQuery object returned by a $(selector)"
Only jQuery objects containing <tr>'s is allowed
On paginated tables, you must create the "jQuery selector" before instantiating the dataTable
So, if you want to pass a jQuery object to a dataTables API instance, that contains all rows where any <td> contains the text "test"
var selector = $('tr:contains("test")');
var table = $('#example').DataTable();
var rows = table.rows(selector).data();
//now you can iterate
for (var i=0;i<rows.length;i++) {
//each rows[i] is an array of the rows columns
console.dir(rows[i]);
}
if you want to pass a jQuery object to a dataTables API instance, that contains all rows where any <td> contains an <a> containing a certain text, like "test"
var selector = $('tr a:contains("test")').parent().parent();
...
var rows = table.rows(selector).data();
...
the above selectors in an example -> http://jsfiddle.net/q2p2n23m/
I have a JSON array coming from a REST API. I am using the Knockout mapping plugin to process the array and load the JSON into preset form values (if a user has added values to the form previously - I have data there to test the Knockout arrays). The form essentially adds or deletes div blocks with inputs so users can add/delete "work" experiences.
My trouble is with trying to decipher how the plugin maps the arrays. I am trying to locate a specific value (the id) of a row in the array so I can add it as a variable to tell the API to delete that specific row. I can get Knockout to explicitly output the row value in the html, but I can't figure out how to capture it otherwise. In the template "foreach" I have a button that references a "remove:" and that's where I'm stuck in trying to capture the value from the array.
For Example in the HTML:
This outputs the two rows of the "work" object no problem:
<span data-bind="text: ko.mapping.toJSON(workModel.work())"></span>
[{"id":"1","schoolID":"2","place":"","position":"Science Teacher","description":"I worked at ASD for 1 year as a Science teacher.","start":"2011","end":"2012","profileID":"91"},{"id":"2","schoolID":"1","place":"American School of Taiwan","position":"Science Guy","description":"I was just another science guy","start":"2008","end":"2011","profileID":"91"}]
This outputs the id of the first row and item in the array:
<span data-bind="text: ko.mapping.toJSON(workModel.work()[0].id)"></span>
"1"
But in the javascript, if you click on the remove button generated by the foreach template...
gone = function(work) {
alert(ko.mapping.toJSON(workModel.work(this).id));
}
Gives me this error in Firebug, and then the UI reloads and drops out the template block I just clicked on.
Unable to parse bindings. Message: TypeError: workModel.work()[0] is undefined; Bindings value: text: ko.mapping.toJSON(workModel.work()[0].id)
Even though, if I replace the above alert with the explicit statement:
gone = function(work) {
alert(ko.mapping.toJSON(workModel.work()[0].id));
}
I get the correct value of "1" again. I know it has to do with the "this" aspect of the code, but I'm not sure what the mapping plugin is doing so that I can capture the specific value from the array...make sense? Any help would be greatly appreciated.
I'm going out on a limb here, but I do think it's the this-problem yes. Scoping in Javascript can be a hassle sometimes. Try doing something like this in the scope containing the gone-function:
var self = this;
gone = function(work) {
alert(ko.mapping.toJSON(workModel.work(self).id));
}
Disclaimer: I'm not able to test this myself right now, but give it a try :)
I finally got it. It came from combining different post on Stack Overflow and also from the Knockout forums. I'm sure other folks have more elegant solutions than this, but it works for me.
In the foreach loop on the "Delete" (or whatever button you want to use to capture the value) button I included the following on the data-bind:
Remove
Then in the javascript I have:
var self = this;
var row_id;
self.remove = function(index){
var row_id = index;
alert(row_id);
}
The alert returns the row ID of the loaded JSON as I wanted. The $data.id() could be changed/used to return any mapped element from the loaded JSON. The row_id is then a global that can be accessed elsewhere as well.
I have an array of objects fetched using jQuery.getJSON(). I want every one of my objects to be represented by HTML div element, so when you click the element you have access to all the properties of corresponding object. What is the best way to do it?
I wanted to do it like this:
$('.mydiv').click(function() {
var id = $(this).attr('id');
for (i=0; i<myObjectsArray.length; i++){
for (x in myObjectsArray[i]){
//..and here I got confused...
}
}
});
Is this approach any good or is there a better way to do it.
Thanks.
You can store data in the data property of your jQuery object
docs here