i'm trying to get specific column of my datatable refered by name of the selected row but it select either the row or all data of the specific column never the specific column value of selected row :
var columnValue1 = getTable().column('ALEN:name').rows( { selected: true } ).data();
var columnValue2 = getTable().rows( { selected: true } ).column('ALEN:name').data();
OUTPUT:
Columnvalue1 : output the full selected row not only the column 'ALen' of the selected row
Columnvalue2 : output the data of all lines of the column 'Alen' not only the selected row
As says in a comment, this depends on DataTable initialization (ajax or precharged data) and if you have single or multiple selection...
MULTIPLE SELECTION EXAMPLE:
If you have datatable with ajax you can access field directly:
var rowsData = getTable().rows({ selected: true }).data().filter(x => x.FieldName <= 0).toArray()
If you don't have ajax and you have precharged data:
var rowsData = getTable().rows({ selected: true }).data().filter(x => x[15] <= 0).toArray()
And finally you can iterate over rowsData because is an array of objects (rows) with fields.
SINGLE SELECTION EXAMPLE:
If you have datatable with ajax you can access field directly:
var fieldValue = getTable().row({ selected: true }).data().FieldName
If you don't have ajax and you have precharged data:
var fieldValue= getTable().row({ selected: true }).data()[15]
i created a function that index on the name then determine what is his position in the selected row for exemple i want to return the value of the row selected with name Alen :
var columnValue2 = getTable().rows( { selected: true } ).data()[0][tab.getColumnIndex("Alen")];
This is my function:
this.getColumnIndex = function(ColumnName){
var index;
//dataTableOption : function to declare option of datatable like columns-searching
for (let i=0;i<this.dataTableOption.columns.length; i++ ){
if ( this.dataTableOption.columns[i].name == ColumnName){
index =i;
}
}
return index ;
}
Related
I'm able to get the selected row in kendo grid, But I'm unable to get the specific selected row data in detail grid.
One thing that I expect is just get the Ticket_ID field string "5d484b061bf03".
I've tried to make my code just like this:
function onChange(arg) {
var selected = $.map(this.select(), function(item) {
return $(item).text();
});
myWindow.data("kendoWindow").open();
undo.fadeOut();
console.log(selected.TICKET_ID);
}
But just getting "undefined".
Any well thought to advise will be appreciated.
Thanks
jQuery $.map returns an array constructed of return values, and you are returning strings.
See Telerik example in API reference for kendo.ui.Grid change to see more about getting the data items used to construct the selected grid rows. The data items will have a field corresponding to the ticket_id value. The name of the field is case-sensitive.
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
console.log (dataItem);
selectedDataItems.push(dataItem);
}
// selectedDataItems contains all selected data items
}
you can get and persist selected row on a specific page after edit or paging in change and databound events like this:
Grid_OnRowSelect = function (e) {
this.currentPageNum = grid.dataSource.page();
//Save index of selected row
this.selectedIndex = grid.select().index();
}
.Events(e => e.DataBound(
#<text>
function(e)
{
//جهت نمایش صحیح پیجینگ
var grid = $("#Grid").data("kendoGrid");
grid.pager.resize();
//در صورت تغییر صفحه، سطر را انتخاب نکند
if(this.currentPageNum == grid.dataSource.page())
{
//انتخاب مجدد سطر انتخاب شده قبل از ویرایش
var row = grid.table.find("tr:eq(" + this.selectedIndex + ")");
grid.select(row);
}
}
</text>)
)
My scenario is I want to select some informations with checkbox in my grid and I can get that values like array ["3001","3004"] but when i click button kendo multiselect cannot set my values
here is onclick function:
function ongrdfleetinvoice() {
var multiselect = $("#fleetinvoice").data('kendoMultiSelect');
multiselect.value(["3001","3004"]);
}
// I also try like this same function
function ongrdfleetinvoice() {
$("#fleetinvoice").getKendoMultiSelect().value(["3001","3004"]);
}
//Here is my multiselect
#(Html.Kendo().MultiSelect().Name("fleetinvoice")
.DataTextField("CariNam")
.DataValueField("CariKod")
.Placeholder("All")
.Filter(FilterType.Contains)
.HtmlAttributes(new { style = "width: 300px;" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("FillFleet", "HeadOffice");
});
})
)
//C# Code
var resultCariler = (from m in objEntities.Cariler
where (m.CariTip == 13)
orderby m.CariNam ascending
select m).AsQueryable();
foreach (var item in resultCariler)
{
Cariler objCariler = new Cariler();
objCariler.CariKod = item.CariKod.Trim();
objCariler.CariNam = item.CariNam + - + item.CariKod.Trim();
listCari.Add(objCariler);
}
but it's not working.
Do you have any idea?
I realise something when i fill my grid and my multiselect in C# side the field names are equal but values are not equeal when i change of that and put same values.. It worked...
var resultCariler = (from m in objEntities.Cariler
where (m.CariTip == 13)
orderby m.CariNam ascending
select m).AsQueryable();
foreach (var item in resultCariler)
{
Cariler objCariler = new Cariler();
objCariler.CariKod = item.CariKod.Trim();
objCariler.CariNam = item.CariNam + - + item.CariKod.Trim(); //I changed this part with same in grid
listCari.Add(objCariler);
}
TO
var resultCariler = (from m in objEntities.Cariler
where (m.CariTip == 13)
orderby m.CariNam ascending
select m).AsQueryable();
foreach (var item in resultCariler)
{
Cariler objCariler = new Cariler();
objCariler.CariKod = item.CariKod.Trim();
objCariler.CariNam = item.CariNam;
listCari.Add(objCariler);
}
So I know there are a few posts about this but I haven't found them to helpful so I'm hoping this will shed new light on my problem.
I'm trying to to get data from a check-boxed row in a HTML table. At the moment I only want to display it on a windows.alert or in the Visual Studio console. But eventually I'm going to post the data to a database.
My code:
$(document).ready(function () {
$('#button').click(function () {
var id = [];
$(':checkbox:checked').each(function (i) {
id[i] = $(this).val();
});
if (id.length === 0) {
alert("Please select at least one checkbox");
}
else {
$.post('http://localhost/Dynamic/?Insert');
}
});
});
I've tried alert($(this).text()) but that just appears empty.
Help would be appreciated.
If it helps this is how I populate the table:
var tableName = 'table1'
$.ajax({
url: 'http://localhost/Dynamic?prod=' + tableName,
dataType: 'Json',
success: function (Results) {
$.each(Results, function () {
var row = "";
for (i = 0; i < this.length; i++) {
var input = '<td>' + this[i] + '</td>';
row = row + input;
}
$('#table1 tbody:last-child').append('<tr>' + row + '<td> <input class="checkBox" type="checkbox" id="count"/> </td></tr>');
});
}
});
As you can see the table is populated dynamically so it can be populated by different tables.
your selector is wrong. $(':checkbox:checked') should be $('.checkbox:checked').
maybe try to change to different class name.
$('.mycheckbox:checked').each(function (i) {
id[i] = $(this).val();
});
I've gotten it to work, I created a global array and added all the values to that. I then created a counter and set each checkbox's ID to the counters value. I then increment the counter before looping back around to sort with the next row of data.
Then When I want to choose data. I check the checkbox's of the data. Press the button then I get the Id's of each of the checkbox's. I then put the checkbox id into the array to get the value before adding it to an array which I then post.
[![This is a table designed using HTML][1]][1]
Hi,
In this table any cell can be selected by the user(even multiple cells).What i need is that once the submit button is pressed the corresponding row wise and column wise table data i.e B and 1pm as of this example must be stored in the database.
<script type="text/javascript">
function change()
{
var cells = document.querySelectorAll("td");
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener("click", function() {
this.className= this.className == "white" ? "green" : "white";
});
}
}
function alert()
{
var cells = document.querySelectorAll("td");
for(var i=0;i<cells.length;i++)
{
if(cells[i].className.match("green"))
{
document.getElementById('p1').innerHTML="Appointment fixed";
}
}
}
</script>
This is the js for cell selection and alert message on submit if any one of the cells is selected
I'm new to js,so someone kindly help me out with this.Thankyou.
In the HTML of each td element you can save its column name and row name like this
<td data-r="Fairlands_B" data-c="1pm" class="green"></td>
Then to get the row and column data out of the clicked td:
var place=this.dataset.r;
var time=this.dataset.c;
I am using jquery datatables to make my table searchable. I have a dropdown that filters a gender column:
$("#genderDrop").on("change", function(e) {
var gender = $(this).val();
formTable.column(2).search(gender).draw();
});
this works fine, but now I want to be able to remove the filter when the user selects "all" from the dropdown. Here is my attempt:
$("#genderDrop").on("change", function(e) {
var gender = $(this).val();
if (gender != "all") {
formTable.column(2).search(gender).draw();
} else {
formTable.column(2).search("").draw();
}
});
Instead of removing the filter this just searches for an empty string, but I can't work out how to change this so it removes the filter. I also tried:
formTable.column(2).search("*").draw();
and
formTable.column(2).search().draw();
but without any success.
You can use the option All from gender select with empty value:
<option value="">All</option>
them your code will work:
$("#genderDrop").on("change", function(e) {
var gender = $(this).val();
formTable.column(2).search(gender).draw();
});
Using DataTables example as base: http://jsfiddle.net/PauloSegundo/g15xakh5/
you can try the below:
function fnResetAllFilters() {
var oSettings = oTable.fnSettings();
for (iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
oSettings.aoPreSearchCols[iCol].sSearch = '';
}
oTable.fnDraw();
}
To remove all filters and global filters, please refer to below link:
https://datatables.net/plug-ins/api/fnFilterClear
Try this way:
var table = $('#tableHere').DataTable().destroy();
table.state.clear();