I am not able to find Rearrange event and refreshPositions method in kendo sortable which is available in Jquery sortable.
$.ui.sortable.prototype._rearrange = function (event, i) {
this.refreshPositions();
});
Related
I have been trying to use Ag-Grid with Svelte. I understand that the main problem with using this grid library is that it needs to bind to a dom element that may not exist at the time of the code executing. For example:
// lookup the container we want the Grid to use
var eGridDiv = document.querySelector('#myGrid');
In this case, the #myGrid element does not exist yet.
I have tried creating an element and then placing it on the HTML part of the Svelte component, like this.
let eGridDiv = document.createElement("DIV");
let gridOptions = { columnDefs: columnDefs, rowData: $orders };
new Grid(eGridDiv, gridOptions);
And then down on the HTML section
<eGridDiv />
However, the new element does not seem to be initialized by Ag-Grid.
So what is the recommended way to use these types of libraries in Svelte?
If you want to use a DOM node in the script part of your component you can use the bind:this={domNode} element binding to get a reference to it, and then use it after the component has been rendered in onMount.
<script>
import { onMount } from 'svelte';
let domNode;
// ...
onMount(() => {
const gridOptions = { columnDefs: columnDefs, rowData: $orders };
new Grid(domNode, gridOptions);
});
</script>
<div bind:this={domNode} />
I have implemented editable AG-Grid. In the grid, one of the column displays country of the player as shown below:
Now in last column, when user click on the cell, I want to display list of available countries as a dropdown.
Here by default AG-Grid displays normal dropdown. Which I want to replace with Bootstrap-select.
To achieve this, I have implemented custom selector and using Bootstrap-select library.
But when cell is clicked, Dropdown is not being rendered. I am not getting any error though in console.
Here is the code of my custom cell-editor:
var selectCellEdior = function () { };
selectCellEdior.prototype = {
init: function (params) {
selector = document.createElement('select');
for(var i = 0; i < params.values.length; i++) {
var option = params.values[i];
$('<option />', { value: option, text: option }).appendTo(selector);
}
this.cellSelector = selector;
$(this.cellSelector).selectpicker({ size: 'auto' });
},
getValue: function () {
return $(this.cellSelector).find('.btn-text').text();
},
getGui: function () {
return this.cellSelector;
},
destroy: function () {
$(this.cellSelector).remove();
}
};
Here is the Sample Code
I dont understand what is the issue.
The problem is the selectpicker jQuery method seems to add a display: none to the select element. Ag-Grid is adding it to the DOM you just can't see it. Additionally the getValue function is not returning the selected option's text.
The following changes to getValue and getGui will make the grid work:
...
getValue: function () {
return $(this.cellSelector).val();
},
getGui: function () {
this.cellSelector.style.display = 'block';
return this.cellSelector;
},
...
Here is the modified Plunker
For anyone looking at this now.... Ag-grid has a method afterGuiAttached that is called after the GUI has been attached to the Grid's cell. If you're noticing that the bootstrap-select still isn't "quite right" after following the instructions above, put ALL of the calls to selectpicker in afterGuiAttached instead of init or getGui. This will place the bootstrap-select into a div with the right classes it needs (dropdown, bootstrap-select, etc), and create all of the bootstrap-select elements that are properly shown/hidden.
Does anyone know if it's possible to change the increment value of the number "spinner" in a Kendo UI grid field? I know it can be done in a stand-along numbericTextBox but I haven't been able to find any information about values inside a grid.
Ideally I'd like it so when I increment or decrement using the up and down arrows, it does so by .5 instead of 1.
I know this is late but for future reference, you can use the editor field for manipulating your numeric textbox.
{ 'field': 'count', title: 'Count', editor: numericEditor }
In your js file, you initialize the numeric textbox
function numericEditor(container, options) {
$('<input type="number" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
min: 1,
step: .5,
});
}
Here's a Dojo for demo
How to bind Kendo UI AutoComplete values to URLs?
I use the open source version; Kendo UI Core.
You can use template and wrap your content inside an anchor tag.
var autocomplete = $("selector").kendoAutoComplete({
minLength: 1,
dataTextField: "Name",
template: '#: Name #</span>',
dataSource: {//your data source details
}
}
}).data("kendoAutoComplete");
});
In Kendo UI, I have a tooltip declaratively defined inside a view:
<span data-bind="events: { show: onShow }"
data-role="tooltip"
data-auto-hide="true"
data-position="top">?</span>
Normally the content of the tooltip would be attached via the title attribute, or when attaching the tooltip procedurally, via the content property. But here, the content should be fetched out of the model.
So I'm looking for the equivalent of data-bind="text: contents for the Kendo Tooltip.
Can be done by creating a small custom binder.
kendo.data.binders.widget.tooltip = {
value: kendo.data.Binder.extend({
refresh: function() {
var value = this.bindings["value"].get();
var tooltip = this.element;
tooltip.element.attr("title",value);
}
})
};
Here is a live demo.