I am using devextreme dxdatagrid tables. in that case if I am clicking to a row in OnEditorPreparing event to retrieve the data on that row.
function editorPreparing(e) {
console.log(e.row);
}
when I clicked the row and use e.row, I can easily get what is the value in the row.
However when using
console.log(e.row.data);
I get an error such
Is there any way to retrieve the row values.
I am not sure why you use onEditorPreparing event to get the row data, I would use onRowClick instead, you can see it in the example below:
onRowClick: function (e) {
console.log(e.data);
}
Related
I am reading data from google spreadsheet from multiple sheets and displaying the retrieved data in the tabular format. I am creating table rows having data in an ajax call once data is retrieved i.e.
$tbody.append('<tr><td>'+rows[i][6]+'</td>'+'<td>'+rows[i][0]+'</td><td>'+rows[i][1]+'</td><td>'+rows[i][2]+'</td><td>'+rows[i][3]+'</td><td>'+rows[i][4]+'</td><td>'+rows[i][5]+'</td><td><a id="UpdateLink" href="#">Update</a></tr>');
On the very first run the data appears fine but when I happen to have data from another sheet I see no paging is applied and when I click any header column to perform the sort It displays data from the first sheet.
Upon google It was suggested to use destroy attribute for datatable i.e.
$("#spreadsheetdata).DataTable({
destroy:true
});
but behavior remains the same.
I have also applied
if ( $.fn.dataTable.isDataTable( '#spreadsheetdata' ) ) {
//dataTableInstance = $('#spreadsheetdata').DataTable();
}
else {
dataTableInstance = $('#spreadsheetdata').DataTable( {
paging:true,
ordering:true,
info:true
});
}
but no desirable results.
please guide thanks.
Rather adding the rows with the jQuery append method, you'll need to use the DataTables row.add() method.
If dataTableInstance is the variable you're assigning to your table and rows is the array of data from your Google spreadsheet, this syntax should allow you to append new rows to an existing table:
dataTableInstance.row.add([
rows[i][6],
rows[i][0],
rows[i][1],
rows[i][2],
rows[i][3],
rows[i][4],
rows[i][5],
'<a id="UpdateLink" href="#">Update</a>'
]).draw();
The reason appending the new rows with jQuery doesn't work is that DataTables maintains its own client-side state -- see search(), order(), and page() for examples.
So, if you add rows directly to the table body, they'll disappear as soon as you sort, search, etc.
I have a primefaces datatable where the search filter bar is shown and hidden on the click of a button. The below javascript is being used to do the same :
function filters() {
var filterRow = $(".ui-filter-row");
if (filterRow.is(":visible")) {
$(".ui-column-external-filter").val('');
$(".ui-filter-row").hide();
}
else {
$(".ui-filter-row").show();
}
}
When I am hiding the search filter bar, I am also clearing the text entered in the filter:
$(".ui-column-external-filter").val('');
But the datatable also should get reset or updated when the text in the filter is cleared. How do I achieve that?
How are filtering your data because in primefaces. If you refer showcase here.
It is way more easy to perform.
oncomplete='datatablewidgetvar.filter();' . To perform filtering on the datatable.
To clear filtering you can use oncomplete='datatablewidgetvar.clearFilters();'. You have to write and ajax request or some sort of event which will catch that your filters are hidden and then call widgetvar.clearFilters().
I have a kendo ui grid with dropdownlists in the cells. The problems is that I lose the selected row when somebody select a new value in a dropdownlist. Can somebody help me with this?
What is probably happening is that the selection of an item in the DropDownList is changing the value on the bound data item. This causes the DataSource to fire a "change" event so hat the table knows it needs to update. The way the Kendo Grid is written, when it gets a change event from the DataSource, it recreates the table cells. I'm pretty sure the existing table cells get removed from the DOM and a new set added in its place. When this happens, the selection is getting removed.
One way to preserve the selected row would be to add a function handler to the grid's "change" event, and save the uid of the selected data item. Then on the "dataBound" event, you can re-select that row.
For example:
var selectedUid;
$("#grid").kendoGrid({
...
change: function () {
selectedUid = this.select().data("uid");
}
dataBound: function () {
if(selectedUid) {
this.select($(this.element).find('tr[data-uid="' + selectedUid + '"]'));
}
}
});
This is kind of a strange question, but this requirement came up about showing only those values inside a table which were selected using a dropdown list, I used dataTable plugin to display this data and to achieve the requirement I used the search[Filter plugin] feature. So whenever I selected any value from my dropdown list I entered it in the search input tag of dataTable. However, filtering of the data would not occur unless I changed the added data myself.
Have used the following script to add the selected value in the search box of DataTable; this function is triggered using onchange in the HTML tag:
function changeService(val) {
var service = val;
$('#example_filter').find('input').val(service);
}
This function adds the value in the required search input tag - I can see the value in the textbox; but the data within the dataTable is not filtered until I change this...
Instead of trying to hack around the ui, why not use the DataTables api for this:
http://datatables.net/api#fnFilter
So when you're dropdown list changes, you could call the fnFilter function on your datatable:
$('#dropdownlist').on('change', function() {
var val = $(this).val();
var dataTable = $('#table').dataTable();
dataTable.fnFilter(val);
});
I have the following jsfiddle that generates a YUI Datatable with checkboxes, but i have a problem getting the data of ids from the table after i click the Get Records button.
anyway to call the table from the javascript?
P.S : I am using YUI2 library as my project is using that
Using Checkbox Listeners
I hope this codes show what you need http://yuilibrary.com/yui/docs/datatable/datatable-chkboxselect.html
Edit:
I update your code for adding checkboxClickEvent for handling checkbox event in each of data row and use an array to keep all of the checked record id.
var selectedID = [];
myDataTable.subscribe("checkboxClickEvent", function(oArgs){
alert("check box clicked");
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
if (elCheckbox.checked) {
selectedID.push(oRecord.getData("id"));
}
else {
selectedID.pop(oRecord.getData("id"));
}
oRecord.setData("check",elCheckbox.checked);
});
Detail of working code is here.