How to get the selected text in the bootstrap-multiselect.
In the onChange function, it comes with the value, and the text when I use
var selectedText = $( "#id_multiSelect option:selected" ).text();
It shows all the selected without any space.
You can iterate the selected option.
Here is an example:
$("#id_multiSelect option:selected").each(function() {
console.log(this.text); //this will give you the selected text values one by one ... to get value use this.value in place of this.text
});
Related
I have a CKEditor widget with some tables with editable fields.
I need to select all the text inside the field when a user clicks it, to make changing the text faster.
For now I was able to come up with this:
editor = CKEDITOR.instances.editor1;
widget = editor.widgets.instances[0]
$.each(widget.editables, function(e) {
element = $(this.$);
element.on( 'click', function( ev ) {
elementId = editor.document.getActive().getId()
editor.getSelection().selectElement( editor.document.getById(elementId) );
});
});
Basically, I get all editable elements and bind a click event to them. My problem is only on how to select the text inside the editable element, since currently all I managed to do is select the element itself.
I need to select the text inside the element that I get when calling editor.document.getById(element) .
All other questions on StackOverflow show how to get a selection value, but I could not find anything on how to select only the text inside a node.
Can Kendo-UI multiselect be use for input of user defined values?
By default when user clicks on multiselect control a dropdown is opened and user can select one of the predefined values. When user select one of the predefined values, that value is added to the selection.
What we need is a little bit different behavior. We would like to allow user to enter a custom string value, press enter key, and then that entered value would added to the selection.
One idea was to abuse multiselect control, by subscribing to the key events and adding user defined value to data source of the control, at which point we could (possibly) mark that value as selected (I am just guessing this, not sure if it would actually work).
So, is there an option value for this kind of behavior for multiselect or maybe some other control (does not have to be Kendo), so we don't have to hack existing kendo control?
As an example of the behavior I have create a quick [PoC here] (http://plnkr.co/edit/mcpVsstaxB2Xteh374pk?p=preview).
Here is the code from the plnkr
<script>
$(function() {
var input = $('input');
var list = $('ul');
input.on('keyup', function(e) {
if (e.which === 13) {
var value = $.trim(input.val());
if (value.length > 0) {
list.append($('<li/>'));
list.find('li:last').text(value);
var remove = $('<span class="remove"/>');
remove.html(' x');
list.find('li:last').append(remove);
remove = list.find('.remove:last');
remove.click(function() {
$(this).closest('li').remove();
});
input.val('');
}
}
});
});
</script>
I've a Kendo grid with editable = incell and more than one required text field. The default values are empty strings. When I click on "Add new record" the first required field is marked as error because it's empty. I can only leave the field after I've done some input. Although the other required fields are still empty I can leave the row.
How can I prevent that a row can't be left without filling all required fields?
Try this,
$('.k-grid-save-changes').on("click", function () {
var grid = $("#grid").data("kendoGrid");
if (grid.editable && !grid.editable.validatable.validate()) {
//What ever you want to do
e.preventDefault();
return false;
}
});
I am using kendo ui grid to display data. I want to set title for the grid.Is there any way to set it.
Also I want to set some additional/custom property for grid which will help to identify the grid uniquely. Any custom property I can set to grid so I can get its value when required.
So in case if there are more instances on grid this will help.
Please suggest on this.
Iterating through all your tables can be done using:
$.each($(".k-grid"), function (idx, grid) {
// Do whatever you want to do with "grid"
...
});
If you want to add a title, might be something like:
$.each($(".k-grid"), function (idx, grid) {
$(grid).data("kendoGrid").wrapper.prepend('<div class="k-grid-header"><table><thead><tr><th class="k-header">Title</th></tr></thead></table></div>');
});
For setting a click event to the HTML img elements, you can do:
$("tr", ".k-grid").on("click", "img:first", function () {
// Here "this" is the "img" on which you clicked, finding the grid is:
var grid = $(this).closest(".k-grid").data("kendoGrid");
console.log("grid", grid);
// If you want to access the "id"
console.log("id", grid.element.attr("id"));
});
Once you click on the first image of each row what I do in the event handler is finding the closest HTML element with k-grid class (the grid): this is the HTML containing the grid.
If you want to get Kendo UI grid element the you need to use data("kendoGrid").
Simple and elegant.
In this JSFiddle: http://jsfiddle.net/OnaBai/2qpT3/2/, if you click on "Add Titles" button you add a title to each table and if you click on "Add Handlers" and then in an image, you will get an alert with the id of the table that the image belongs to.
EDIT: If you want to iterate on every image that is in the first column, of every KendoUI grid on your document, you should do:
$.each($("td:first > img", ".k-grid table tbody > tr"), function (idx, elem) {
// "elem" is the image
console.log(idx, elem);
// associate event
$(elem).on("click", fnHandler);
});
I prefer to change the title like this:
$("#grid th[data-field=Field]").html("Title");
Is there a way to add a new row to a slickgrid on demand? For example, have a button on the page that shows the new row when clicked.
It can be done easily using dataView.addItem(params), just replace params with your parameters..
function addNewRow(){
var item = { "id": "new_" + (Math.round(Math.random() * 10000)), "Controller": tempcont, "SrNo1": tempsrno };
dataView.addItem(item);
}
here id, Controller, SrNo1 are ids of colunm
You can add a row dynamically, such as with a button click, by subscribing the "onAddNewRow" listener to your grid object. As many have suggested, it is best to use the dataView plugin to interface with your data. Note that you'll want the "enableAddRow" option set to "true".
Firstly, DataView requires that a unique row "id" be set when adding a new row. The best way to calculate this is by using dataView.getLength() which will give you the number of rows that currently exist in you grid (which we'll use as the id for the new row). The DataView addItem function expects an item object. So we create an empty item object and append the id to it.
Secondly, you'll be only focusing a single cell when you add your data. After you've entered that data (by blurring that cell), DataView will notice that you have not entered data for any of the remaining cells in the row (of course) and will default their values to "undefined". This is not really a desired effect. So what you can do is loop through the columns you've explicitly set and append them to our item object with a value of "" (empty string).
Thirdly, we don't want all the cells to be blank. Actually, we want the original cell's entered data to appear. We have that data so we can set it last so that it will overwrite the "" (empty string) value we previously set.
Lastly, we'll want to update the grid such that it displays all of these changes.
grid.onAddNewRow.subscribe(function (e, args) {
var input = args.item;
var col = Object.keys(input)[0]
var cellVal = input[Object.keys(input)[0]]
// firstly
var item = {};
item.id = dataView.getLength();
// secondly
$.each(columns, function(count, value) {
colName = value.name
console.log(colName)
item[colName] = ""
})
// thirdly
item[col] = cellVal
dataView.addItem(item);
// lastly
grid.invalidateRows(args.rows);
grid.updateRowCount();
grid.render();
grid.resizeCanvas();
});
I hope this helps. Cheers!
You can always add new rows to the grid. All you need to do is add the data object for the row to your grid data.
Assume you create your grid from a data source - myGridData (which is an array of objects).
Just push the new row object to this array. Call the invalidate method on the grid.
Done :)
Beside creating the new row, I needed it to be shown, so that the user can start writing on it. I'm using pagination, so here is what I did:
//get pagination info
var pageInfo = dataView.getPagingInfo();
//add new row
dataView.addItem({id: pageInfo.totalRows});
//got to last page
dataView.setPagingOptions({pageNum: pageInfo.totalPages});
//got to first cell of new row
var aux = totalRows/ pageInfo.pageSize;
var row = Math.round((aux - Math.floor(aux)) * pageInfo.pageSize, 0);
grid.gotoCell(row, 0 ,true);
Before I use pagination, I just needed this:
var newId = dataView.getLength();
dataView.addItem({id: newId});
grid.gotoCell(newId, 0 ,true);
var newRow = {col1: "col1", col2: "col2"};
var rowData = grid.getData();
rowData.splice(0, 0, newRow);
grid.setData(rowData);
grid.render();
grid.scrollRowIntoView(0, false);
Working fine for me.