Can I get the objectid of a selected value of a select2 dropdown?
$('#buildParcelID option:selected').val(); is how I get the value but I am not sure how to get the id. This is what my object looks like
As per the documentation here the object for the selected option(s) can be retrieved using the select2 data method.
$('#mySelect').select2('data');
This will return an array as multiple options can be selected if the multiple option is set to true. The objects within the array will be those passed as the data (or loaded via ajax) including any extra properties.
Example below and also at https://jsfiddle.net/6Lnpusra/ which has a couple of extra properties which are printed to the console on selection.
// Define some data with additional properties
let data = [
{
id: 1,
text: 'Test 1',
extraProperty: 'Extra 1',
objectId: 1001
},
{
id: 2,
text: 'Test 2',
extraProperty: 'Extra 2',
objectId: 1002
},
{
id: 3,
text: 'Test 3',
extraProperty: 'Extra 3',
objectId: 1003
}
];
// Initialise select2
$('#mySelect').select2({
placeholder: 'Select value...',
data: data
});
// Setup selection event
$('#mySelect').on('select2:select', function (e) {
// Fetch the selections array
let selections = $('#mySelect').select2('data');
// If one selection has been made print it's additional properties
if(selections.length > 0){
console.log(`Extra Property: '${selections[0].extraProperty}' - Object ID: ${selections[0].objectId}`);
}
});
#mySelect {
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<select id="mySelect"><option></option></select>
Related
I am using kendo grid and I would like to show a tooltip everytime the user perform a mouseover on any grid cell. The following example works fine, but what about if I don't know the column the user do mouseover?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js">
</script>
</head>
<body>
<div id="grid"></div>
<style>
#grid{
width:300px;
}
</style>
<script>
var grid = null;
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: [
{ID:1 ,Text: "Text 1"},
{ID:2 ,Text: "Text 2"},
{ID:3 ,Text: "Text 3"}
],
schema: {
model: {
fields: {
ID: { type: "number" },
Text: { type: "string" }
}}
},
pageSize: 20
});
grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: true,
filterable: true,
toolbar: ["create"],
columns: [
{ field: "ID", width: "50px" },
{ field: "Text", width: "200px", attributes: {
style: 'white-space: nowrap '
} }],
editable: "incell"
}).data("kendoGrid");
$("#grid").kendoTooltip({
filter: "td:nth-child(2)", //this filter selects the second column's cells
position: "right",
content: function(e){
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var content = dataItem.Text;
return content;
}
}).data("kendoTooltip");
});
</script>
</body>
</html>
So this line is not enough in my case:
var content = dataItem.Text;
because:
1) I could have field1, field2, field3, etc. In this case, we are assuming that the only column enabled to mouseover is the column named "Text".
2) I need not only the value of any cell the user perform the mouseover, but also the column name.
So what I need to show in the tooltip is:
var content = "column name: " + columname + " - Value: " + columnValue;
Where columname is the name taken from any column mouseover and the columnValue the value of that cell.
Thanks
So I am assuming you just want the column header and the value that is that specific cell you are hovering over if I am understanding your question correctly so rather than showing the entire dataItem object i.e.
{ID:1, Text:"Text Value 1"}
You just want:
Text : Text Value 1
Assuming this is what you want then this dojo should help. http://dojo.telerik.com/uleJEbiz
Here is the code just for reference:
function(e){
var grid = $('#grid').data('kendoGrid');
var rowIndex = e.target.closest("tr").index();
var colIndex = e.target.index();
var dataItem = grid.dataItem(e.target.closest("tr"));
var columns = grid.columns.filter(function(col){
return !col.hidden;
});
var content = 'Found on Row::' + rowIndex + ' Column::' + colIndex +
'<br/>' + columns[colIndex].field + '::' + dataItem[columns[colIndex].field];
return content;
}
All I have done is looked at the problem as a grid we know what row we are looking for but not necessarily the column we are after as we may have hidden columns, so we can't just look at a specific index of the dataItem to pull that item as it may be incorrect. e.g. if you have three properties but the middle one is hidden then you will end up pulling an incorrect value.
So if get the visible column headers only then we can reference the property by the field name.
I have obviously changed the content string to show you the row and column position that we have hit within the grid.
I created a Kendo UI Grid view and it displays data correctly , now what I am trying to achieve is that ; When i Click on a row I want to get the primary key of that row and use it elsewhere I tried many solution in net but I did not work. does anyone knows how to achieve this.
here is my code :
function FondsGrid() {
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url:
"http://localhost:...........",
dataType: "json"
}
},
pageSize: 20
});
var accountGrid = $("#grid-fonds").kendoGrid({
dataSource: sharedDataSource,
sortable: true,
pageable: false,
columns: [
{
field: "CodIsin",
title: " ",
template: '<span class="categ #= CodIsin #"></span>',
attributes: {
class: "text-center"
},
headerattributes: {
style: "text-align:center"
},
width: 35
},
{
field: "LIBELLEPDT",
title: "Nom du fonds",
template: '<div id="#: IdProduitSP #" class="title-fonds #:
IdProduitSP #" data-toggle="popover" ><span class="desc-
fonds">#: LibClassificationNiv2 #</span>#: LIBELLEPDT #
.
.
.
dataBound: function () {
var widthGrid = $('.k-grid-content').width();
$(".k-grid-header").width(widthGrid);
$(".title-fonds").popover({
trigger: 'hover',
html: true,
template: '<div class="popover HalfBaked" role="tooltip">
<div class="arrow"></div><h3 class="popover-header"></h3><div
class="popover-body"></div></div>',
content: function () {
return $('#popover-content').html();
}
});
}
}).getKendoGrid();
/* Initialisation */
$(document).ready(function ($) {
FondsGrid();
});
Your own answer is perfectly valid and is a good example of how you can use jquery to directly target the dom elements that kendo generates. This approach is always valuable when kendo does not offer the functionality you need.
However in this case, the grid widget offers the change event. You can set the grid to be 'selectable' and subscribe to the 'change' event which fires when one or more rows are selected:
selectable: "multiple, row",
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
// selectedDataItems contains all selected data items
}
Within the handler function, 'this' refers to the grid widget instance and calling the select() function on it returns the selected rows. From those rows, you can then retrieve the datasource items that are bound to them giving you access to the id and any other properties.
See here for more details: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change
This how I fixed It.
$("#grid-fonds").on("click", "td", function (e) {
var row = $(this).closest("tr");
var value = row.find("td:first").text();
console.log(value);
});
I keep hitting a wall when trying to get the parent data passed down to the child component.
My view:
<%= react_component 'Items', { data: #items } %>
My Items component makes an ajax call, sets state, and renders Item. Leaving key={this.props.id} out of the Item instance passed into the mapping function makes it so that the component html renders to the page. But add the key in, and I get a console error: Uncaught TypeError: Cannot read property 'id' of undefined
Here's 'Items':
var Items = React.createClass({
loadItemsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function() {
this.loadItemsFromServer();
},
render: function() {
var itemNodes = this.props.data.map(function() {
return (
<Item key={this.props.id} />
);
});
return (
<div className="ui four column doubling stackable grid">
{itemNodes}
</div>
);
}
});
My item.js.jsx component just formats each Item:
var Item = React.createClass({
render: function() {
return (
<div className="item-card">
<div className="image">
</div>
<div className="description">
<div className="artist">{this.props.artist}</div>
</div>
</div>
);
}
});
The React dev tools extension shows the props and state data inside Items. The children, however, are empty.
I'm aware of this, but I'm setting key with this.props.id. I'm not sure what I'm missing?
I found a couple of problems with the code you posted, in the Items component
You're rendering this.props.data while in fact this.state.data is the one being updated with the ajax request. You need to render this.state.data but get the initial value from props
The map iterator function takes an argument representing the current array element, use it to access the properties instead of using this which is undefined
The updated code should look like this
var Item = React.createClass({
render: function() {
return (
<div className="item-card">
<div className="image">
</div>
<div className="description">
<div className="artist">{this.props.artist}</div>
</div>
</div>
);
}
});
var Items = React.createClass({
getInitialState: function() {
return {
// for initial state use the array passed as props,
// or empty array if not passed
data: this.props.data || []
};
},
loadItemsFromServer: function() {
var data = [{
id: 1,
artist: 'abc'
}, {
id: 2,
artist: 'def'
}]
this.setState({
data: data
});
},
componentDidMount: function() {
this.loadItemsFromServer();
},
render: function() {
// use this.state.data not this.props.data,
// since you are updating the state with the result of the ajax request,
// you're not updating the props
var itemNodes = this.state.data.map(function(item) {
// the map iterator function takes an item as a parameter,
// which is the current element of the array (this.state.data),
// use (item) to access properties, not (this)
return (
// use key as item id, and pass all the item properties
// to the Item component with ES6 object spread syntax
<Item key={item.id} {...item} />
);
});
return (
<div className="ui four column doubling stackable grid">
{itemNodes}
</div>
);
}
});
And here is a working example http://codepen.io/Gaafar/pen/EyyGPR?editors=0010
There are a couple of problems with your implementation.
First of all, you need to decide: Do you want to render the #items passed to the Items component from your view? Or do you want to load them asynchronous?
Because right now I get the impression you are trying to do both...
Render items passed from view
If you want to render the items from your view passed to the component, make sure it's proper json. You might need to call 'as_json' on it.
<%= react_component 'Items', { data: #items.as_json } %>
Then, in your Component, map the items to render the <Item /> components. Here is the second problem, regarding your key. You need to define the item variable to the callback function of your map function, and read the id from it:
var itemNodes = this.props.data.map(function(item) {
return (
<Item key={item.id} artist={item.artist} />
);
});
Note, I also added the author as prop, since you are using it in your <Item /> Component.
You can remove your componentDidMount and loadItemsFromServer functions, since you are not using them.
Load items asynchronous
If you want to load the items asynchronously, like you are trying to do in your loadItemsFromServer function, first of all, pass the url from your view and remove the {data: #items} part, since you will load the items from your component, something like:
<%= react_component 'Items', { url: items_path(format: :json) } %>
If you want to render the asynchronous fetched items, use:
var itemNodes = this.state.data.map(function(item) {
return (
<Item key={item.id} artist={item.artist} />
);loadItemsFromServer
});
Note I changed this.props.map to this.state.map
You can now use your componentDidMount and loadItemsFromServer functions to load the data and save them to state.
I am using Kendo Grid to show my search results.
Below is the code for Kendo Grid.
jQuery
$("#grid").kendoGrid({
dataSource: {
data: gridData,
schema: {
data: "Results"
},
pageSize: 20
},
height: 550,
sortable : true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: gridData.viewFields
});
$("#grid").kendoGrid('refresh');
I am adding data dynamically to gridData.viewFields.
Now i am trying to make rows clickable and navigate to display forms of items dynamically. I am struck here for a while. Any contribution is much appreciated.
Thank you.
First, you'll need to configure the grid to allow the row selection by setting the value for the selectable property:
$("#grid").kendoGrid({
selectable: "row"
//Other configuration value...
});
Then, you have to listen to the change event that will be triggered when the user will change the grid selection:
$("#grid").kendoGrid({
//Other configuration value...
change: function() {
var selectedRow = this.select();
//Insert your dynamic for logic here and user selectedRow to get the selected data
}
});
I created a TinyMCE plugin and need the listbox items to display html. This is my plugin:
editor.addButton('icons', {
title: 'Foo',
text: 'Foo',
type: 'button',
onclick: function() {
editor.windowManager.open({
title: 'Foo',
width: 300,
height: 200,
body: [{
type: 'listbox',
label: 'Foo',
name: 'foo',
values: [{
title: '<em>Foo</em>', // <-- Mark save. Render as html.
value: 1
}],
}],
});
}
});
See also the fiddle: http://jsfiddle.net/allcaps/vqctac3d/
But the output looks like:
Expected:
How can I mark the list option title save so the contents is rendered as html?
Here is your updated snippet:
https://jsfiddle.net/mzvarik/1cwr07z6/55/
I was looking for same thing but listbox and it can be done like this:
(see fiddle for more)
editor.addButton('myshortcuts', {
type: 'listbox',
text: 'Vložit proměnnou',
values: self.shortcuts_data,
onselect: function() {
// do something
this.value(null); //reset selected value
},
onShow: function (event) {
var panel = $(event.control.getEl()),
button = event.control.parent().getEl();
var i=0;
panel.find('.mce-text').each(function(){
var item = $(this);
if (!item.next('.mce-menu-shortcut').length) {
// THIS WILL ADD HTML TO EXISTING MENU ITEM
item.after('<div class="mce-menu-shortcut">('+self.shortcuts_data[i].value+')</div>');
}
i++;
});
setTimeout(function(){
panel.css('width', 360);
panel.children().first().css('width', 360);
}, 5);
}
});
Here is screenshot:
Since noone else answered this question i will put the proposed solution/workaround from the comment into an answer.
Actually, it is not possible to insert html code using the tinymce way of listbox creation. But it is possible to style listboxes using css.
Due to the fact that listboxes and other tinymce UI elements get rendered dynamically it might be difficult to adress the correct html dom elements.
A workaround to this can be to exchange the listbox html after the listbox has been created. This is possible in case the ordering is known (and that is almost true).