I have a kendo grid with multiple row selection enabled; I'm trying to populate an external select menu based on a few of the fields from the aforementioned row selection(s); I'm getting nowhere; can this be done? Fiddle examples?
I checked out this fiddle, where they were populating another kendo grid based on what was selected in the first kendo grid; I figured I'd be build select options like:
$("#selectMenu").html("<option value=''></option>");
..but I can't figure out how to get the selected data OUT of the kendo grid..
That code is not very good IMO since it only relies on jQuery instead of using the grid API. You can use the change event to detect row changes, get the selected rows with the select methd and the data items with the dataItem method.
So you can start with something like this:
$("#states").kendoGrid({
selectable: "multiple",
dataSource: {
data: usStates
},
change: function() {
var that = this;
var html = "";
this.select().each(function() {
var dataItem = that.dataItem(this);
html += "<option>" + dataItem.name +"</option>";
});
$("#select").html(html);
}
});
(demo)
Related
I am using jqGrid 4.15.6-pre
I have a Select list in my edit form that populates using dataURL in the onSelect function
based on a couple of parameters. There is a input element on the edit form that has a function bound to it that can change one of the parameter(customerReturnType) values. I would like to programmatically repopulate the Select List based on the new parameter value.
Here is my onSelect code:
locationCheckOverride = false;
customerReturnLocation = $("#customerReturnqueue").getRowData(id)['crrLocation'];
customerReturnType = $("#customerReturnqueue").getRowData(id)['crrType'];
editModeOverride = $("#customerReturnqueue").getRowData(id)['editModeOverride'];
holdingLocationEditOnly = $("#customerReturnqueue").getRowData(id)['editHoldingLocationOnly'];
$("#customerReturnqueue").setColProp('crrLocation', {
editoptions: {
dataUrl: '/QMSWebApp/CustomerReturnRecordsControllerServletV8?lifecycle=customerReturnLocationOptionsLessInitialized¤tLocation='+customerReturnLocation+'&crrType='+customerReturnType,
selectFilled: function (options) {
$(options.elem).select2({
dropdownCssClass: 'ui-widget ui-jqdialog zclassX2',
width: 300
});
}}});
If I correctly understand the problem you want to dynamically change the select based on a change new value.
Here is example in Guriddo jqGrid, but it should work in free-jqgrid. This is just a idea how you can do this.
I am using kendo grid. i need to bind data over cell, not on tr level.
By default dataItem is assigned on tr level. Is there any possibility to bind dataItem over Individual td
if i do grid.dataItem(grid.select(), i dont get dataItem for the selected cell, i need to find the closest tr and get dataItem, that is not what i need.
i.e., if i do select on a cell, selectable:'cell', i have to get dataItem by
grid.dataItem(grid.select())
The approach which you are using is working only if selection mode is not set to cell. In your case, you need to do one step in addition - select row.
change: function(e){
var grid = $("#cellSelection").data('kendoGrid');
var row = this.select().closest("tr");
var selected = grid.dataItem(row);
console.log(selected);
},
Dojo example
I am creating a dynamic table using java script and jquery, one of my project requirement is a select box in a row cell,
From the this SO link i am able to place a on click listener on a table row which gives me id of table row and cell(tr and td) but i am not able to detect select onchange i have also tried "jQuery get value of select onChange" but it is also not working in my case!!
My problem is
How to detect select on Change in a row cell as i have to update that
changed data in database?
thanks in advance!!!!!
I believe this will get everything you'll need for your database (value selected, cell and row it was selected in)... something like:
JSFiddle
$("td select").on("change", function() {
var value = this.value;
var $cell = $(this).parent();
var $row = $cell.parent();
alert("Selected ["+value+"] in cell ["+$cell.index()+"] of row ["+$row.index()+"]");
});
$(document).on('change','td',function(){
//Do your abacadabra!
});
I create a dropdownlist as an editor on a grid, it works, but when I click on the dropdownlist and select an item then click somewhere else (lose the focus of dropdownlist), the selected item doesn't reflect to the grid, I see the text before the selection (but actually it is selected, when I click on the same item I see the item in the dropdownlist that I've selected)
Here is the example:
http://jsfiddle.net/uMws5/2/
How do I make the selection reflect to the grid?
The way I commonly solve this problem in the Kendo grid is to create lookups of the available selection items which I can then use to retrieve the value to be displayed in the grid by its id:
window.lookups = {};
var userTypeLookup = window.lookups["user_type"] = {};
$.each(user_type, function (idx, value) {
userTypeLookup[value.typeid] = value.typename;
});
In the column template I can reference the lookup to get the display value:
{
field: "typeid",
editor: userTypeList,
template: '#= lookups["user_type"][typeid] #'
}
Here is an updated Fiddle which implements this approach: http://jsfiddle.net/uMws5/4/
I have a multiselect on which I want to select some options on page load. The options will be selected using jQuery or javascript according to values of the options. Those values are stored in a variable as a string - exmaple below. What would be the logic to select those options?
var values = "1,3,5";
here is the example code:
var items = "1,3,5";
$.each(items.split(','), function(idx, val) {
$("select option[value='"+val+"']").attr("selected", "selected");
});
and here's a working example: http://jsfiddle.net/ftte4/