I am working with a KendoGrid object where one of the columns I have is called Birthdate. I need to be able to pull a DateTime value from the selected item in that list.
Here is what I have tried
var grid = $( "#MainRosterGrid" ).data( "kendoGrid" );
var ageDOB = grid.select().data.Birthdate;
im pretty sure the second part of that line is wrong but I am very inexperienced with the KendoGrid.
this is all running in a Javascript function and I am having a really hard time testing it.
If you don't want to depend on column positioning and directly get the value by the column name, you should do:
// Get reference to the grid
var grid = $( "#MainRosterGrid" ).data( "kendoGrid" );
// Get Selected row
var sel = grid.select();
// Get item data corresponding to selected row
var item = grid.dataItem(sel);
// Get the data that you are looking for
var ageDOB = item.Birthdate;
See it in action here : http://jsfiddle.net/OnaBai/1wg8h46k/
The advantages of this solution are:
If columns are hidden, reordered or you don't even know the order it keeps working.
If the date is displayed using some format (as in my JSFiddle) what you get is the value stored and not the value displayed.
Try like this,
If your grid column is static then do this,
var grid = $( "#MainRosterGrid" ).data( "kendoGrid" );
var selectedRows = grid.select();
var value = $(selectedRows).find('td:eq(2)').text();
.find('td:eq(2)') hrre 2 is column index.
Demo: http://jsfiddle.net/mgdnE/166/
Related
I am using an amazing tabulator plugin for managing tabular data, API is very clear and reliable but i cant do a very simple thing: get/select all rows on current page.
Custom row selection can look like this:
table.selectRow(table.getRows().filter(row => <<Custom Selection>>);
Where Custom selection has to respect the current page, but i dont get from where i can take it.
Maybe i am missing something?
There is no way to do that directly form Tabulator, but is should be fairly easy to do yourself with a bit of JavaScript.
First you want to get the rows that are visible on that page:
var pageRows = table.getRows(true);
Then you want to get the selected rows
var selectedRows = table.getSelectedRows();
then you want to find rows that exist in both arrays, these will be the selected rows on that page:
var rows = selectedRows.filter(value => -1 !== pageRows.indexOf(value));
Assuming the column name of your index is 'id' you can do the following:
var selectedData = table.getSelectedData();
jQuery.map(selectedData, function(value, index) {
console.log(value.id);
});
I am trying to get an array of the selected items from my Kendo multiselect, which is in the editor template of a kendo grid.
The multiselect code:
#(Html.Kendo().MultiSelect()
.Name("Staff")
.DataValueField("ID")
.DataTextField("FullName")
.BindTo((System.Collections.IEnumerable)ViewData["Staff"])
.Events(events => events
.Change("onChange")
)
.HtmlAttributes(new { #class = "col-md-7 details-editor" })
)
I want to extract the selected items using JQuery - specifically, I want the DataValueField, which is an integer. I have tried several things, but have been unable to get the appropriate integers, rather than the index of the item in the ViewData collection. Some of the approaches I have tried.
var data = $("#Staff").data("kendoMultiSelect").dataItems();
var data = $("#Staff").data("kendoMultiSelect").value();
I don't really know what to do from here, how to use one of the above or a different route to obtain the correct int array.
Thanks for any help!
The answer is simpler than you would think.
$('#Staff').val();
That will return a comma delimited list of whatever is in your .DataValueField. In your case, a comma delimted list of 'ID'.
To get the IDs of the selected items, you can write your onChange method as follows:
var onChange = function(e) {
var arrayOfNames = this.value();
// Do other stuff here...
};
Documentation for the change event which gets fired can be found here.
I've also written a working example here.
Add a .Select("onSelect") event to the Multiselect and append the Value to hidden element every time when user selects the items using:
function onSelect(e) {
var item = e.item;
var text = item.text();
var $data = $('#myHidden');
$data.val($data.val() + text);
};
I'm building an app with Appcelerator.
So I have used a Picker component to display a list of value.
Now I want to know what is the index of element that the user have selected.
So I'm try to do this:
var indexRow =$.comboDecription.getSelectedRow(0).getZIndex();
but I have undefined value.
You can use the following code:
// first get all columns
var columnsArray = $.comboDecription.getColumns();
// since it is a single column picker, so first index column's rows will be the ones you need.
var allRows = columnsArray[0].rows;
// get the title of first row, getSelectedRow(index) takes column index which is 0 in this case
var currentRowTitle = $.comboDecription.getSelectedRow(0).title;
// get the titles of all rows, these titles will be used to get the index of current title.
// use underscore library 'map' method to iterate over all rows and get their titles in an array
var allRowsTitles = _.map(allRows, function (row) {
return row.title;
});
// *** OR *** you can use underscore _.pluck method
var allRowsTitles = _.pluck(allRows, 'title');
// finally, this is the index of the selected picker row.
var currentSelectedRowIndex = allRowsTitles.indexOf(currentRowTitle);
I understand that it is the long process, but there are other ways too which depends on your implementation process. Nevertheless, I have shown you the stuffs you can do at run-time, and so you can do other things related to pickers.
gZindex() returns the layer where the view is positioned.
The change event return the current selected index.
I am encountering a strange behaviour regarding my grid selection:
I have a simple grid, but when I select a record, I do:
var grid = this.getExternrulesgrid();
var records = grid.getSelectionModel().getSelection();
var rec = this.getSelectedExternRule();
But for some reason, records is empty?!
Do you have any idea as to why?
Thank you!!
Their are various ways you can get the selected record.
1.You can use selectionchange event listener.
selectionchange( this, selected, eOpts ){
}
Here, selected : The selected records.
2.Using selection model on some action
selected=[];
selctn = grid.getSelectionModel();
var s = selctn.getSelection();
Ext.each(s, function(item) {
selected.push(item);
});
You will be getting the array of selected records in selected array.
Note: Check your grid object.
I have the following code from selected rows in a grid......
var selected_rows = grid.getSelectionModel().getSelections();
Ext.each(selected_rows,function(item) {
var left_thumbnail_jpeg_name =item.data.left;
var right_thumbnail_jpeg_name = //select second cell along row
Can someone tell me how to set the second cell value along the row to a variable?
James
Please note that your tags did not include ExtJS and that is a bit misleading.
As for your question, since your grid in bound to a store of records you only need to change a record value for it to be imminently rendered to the grid.
in your case it will be :
item.set('right', YOUR NEW VALUE);
assuming that the next column is named right and that you have the new new value.