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);
};
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'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 newbie to extjs.I need to add/remove some values from extjs combo box base on some condition. I tried following code but no luck.
var obj =Ext.getCmp('filter');
var myArray=new Array();
myArray['id'] = 'a';
myArray['value'] = 'a';
var rec = new Ext.data.Record(myArray);
//obj.store.add(rec);
obj.store.removed(rec);
}
Use getById to find record for remove.
var combo = Ext.getCmp('filter');
combo.store.remove(combo.store.getById('a')); //typo: sotre corrected to store
combo.store.remove(combo.store.getById('a'));
obj.store.remove(rec);
removed is not a store function.
removed is a buffer array in which all removed recors are added.
if you're going to have a big store, you should keep this array empty, because removed objects are stored during all the session.
if the combo didn't change try to add store.sync() after adding or removing records
Please find the updated fiddle in the comment section.
I have provided the HTML code and the ViewModel. On changing the value in drop down I want the pip value in grid to be updated. The pip value is getting calculated for new drop down value but the return is not able to bind the value to grid.
In order to make seats change in the UI on dropdownAValue change you need to declare empty observable array first:
self.seats = ko.observableArray();
And update it in the subscribe function instead of creating new observableArray every time:
self.seats([new PipCalculation(self.rates[0], self.rates[0].price, self.rates, self.newLot[0],currentlotvalue) ]);
See updated fiddle
well my answer will be addition to what Max Brodin has given .
We can further normalize you code by doing something like this
View model:
self.dropdownAValue = ko.observable(0.1);
self.seats = ko.observableArray([]);
var newItems = ko.utils.arrayMap(self.rates,function(item){
return new PipCalculation(item, item.price, self.rates, self.newLot[0], self.dropdownAValue)
});
self.seats(newItems);
//computed code
self.formattedPrice2 = ko.computed(function() {
//alert("hi");
var cur = self.rate().pair;
//var price = self.rate().price;
//alert(self.myQuote());
var price = self.myQuote();
var pip = 1;
var lot1 =currentlotvalue().lotSize;
Working fiddle here
Things to do :
There is no need to additionally write a subscribe for subscribing drop-down changes . All you need to do is send right DD value instance further in your case .
There is a performance hit as your are filling observablearray inside DD subscribe i.e every-time dropdown changes . That can be avoided by doing like i mentioned above.
Rather pushing into Observable array push into a normal array and the later using that array (performance improved) - max mentioned in his comments
There is a other way to do this like (i done previously like this)
self.seats([]);
var mutatedArray = self.seats();
ko.utils.arrayForEach(self.rates,function(item){
mutatedArray.push(new PipCalculation(item, item.price, self.rates, self.newLot[0],self.dropdownAValue)); // push to the array(normal array)
});
self.seats.valueHasMutated();
For more on this do refer my answer here .
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.