I am using bootstrap-select as a custom_select option for filter type multi_select and select with yadcf. Both are displaying fine and are being initialized but the dropdown wont toggle open or closed when clicked for select or multi_select. I can see that there are options in the dropdown as I have set to 'selectAll'. See here
See my code below:
var _bootstrapselect;
yadcf.initSelectPluginCustomTriggers(
function ($filterSelector) {
_bootstrapselect = $filterSelector.selectpicker({
});
_bootstrapselect.selectpicker('selectAll');
},
function ($filterSelector) {
_bootstrapselect.selectpicker('refresh');
},
function ($filterSelector) {
_bootstrapselect.selectpicker('destroy');
});
yadcf.init(table, [
{
column_number: 0,
filter_container_id: 'external_filter_container_0',
filter_type: 'multi_select',
select_type: 'custom_select',
style_class: 'form-control selectpicker',
filter_default_label: 'Filter Column',
filter_reset_button_text: false,
}
]);
I have no console errors so it does seem like my boostrap js and bootstrap css files are being loaded in the correct order. I also have successfully setup a bootstrap-select outside of yadcf and it works fine. Any help would be appreciated.
I was able to resolve all issues with bootstrap-select and yadcf. Don't use nuget package manager to download bootstrap-select. That was the issue. use CDNJS from link here. Also, Place the script link at the bottom after bootstrap, datatables and yadcf scripts.
Final Code:
var _bootstrapselect;
yadcf.initSelectPluginCustomTriggers(
function ($filterSelector) {
_bootstrapselect = $filterSelector.selectpicker({});
},
function ($filterSelector) {
_bootstrapselect.selectpicker('refresh');
},
function ($filterSelector) {
_bootstrapselect.selectpicker('destroy');
}
);
yadcf.init(table, [
{
column_number: 0,
filter_container_id: 'external_filter_container_0',
filter_type: 'multi_select',
select_type: 'custom_select',
style_class: 'form-control selectpicker',
filter_default_label: 'Filter Column',
filter_reset_button_text: false,
}
]);
Related
I've created a custom dialog with a dropzone in order to upload files and images to our server. By default the dropzone renders with 'Drop an image here' / 'Browse for an image'.
As part of the tinymce editor options file_picker_type allows setting of the default dropzone and I wondered how to access these options for a stand-alone dropzone?
My tinymce options include:
tinymce.init({
file_picker_types: 'file image'
});
My upload dialog config looks something like this:
const upload_config = {
title: 'Upload files',
size: 'medium',
body: {
type: 'panel',
{
type: 'dropzone',
name: 'file_drop',
types: 'file image' //// <----- something like this???
}
]
},
buttons: [
{
type: 'cancel',
name: 'closeButton',
text: 'Cancel',
},
{
type: 'submit',
name: 'submitButton',
text: 'Upload',
buttonType: 'primary'
}
],
onSubmit: (api) => {
// handle upload here
}
};
Anybody managed to fathom this? The tinymce docs are in no way comprehensive as they simply say "A dropzone is a composite component that catches drag and drops items or lets the user browse that can send a list of files for processing and receive the result." but give no details on how to actually do that with a stand alone dropzone.
I've managed to make it all work, but this is the last hurdle.
Thanks in advance
Are you trying to override the default image/file upload dialog with the custom one? I'm asking because I see the file_picker_types config option. To do so, you will need to use the file_picker_callback.
If it's something else and you are not trying to override the default dialog, use this interactive example as a base. You will need to:
a) Register the custom button with a setup function:
setup: function (editor) {
editor.ui.registry.addButton('custom-upload', {
icon: 'upload',
onAction: function () {
editor.windowManager.open(upload_config)
}
})
},
b) Add this button to the toolbar via toolbar: 'custom-upload'. This way, pressing the button will open the dialog based on the upload_config variable.
c) You've made a mistake in the panel config. I guess, you forgot to create the items array at the beginning. Instead of
type: 'panel',
{
type: 'dropzone',
name: 'file_drop',
types: 'file image' //// <----- something like this???
}
]
There should be:
type: 'panel',
items: [
{
type: 'dropzone',
name: 'file_drop',
label: 'Dropzone',
}
]
I've created this fiddle as a quick demo: https://fiddle.tiny.cloud/3iiaab
P.S. The dropzone component does not support file types. But you can check the file types after they are uploaded.
I was trying to implement a custom DropDown filter in ag grid using React.
The link I followed is link
I was able to create the filter, however the filter doesnot appear by default. As a user, we need to click the 3 arrow icon next to the column header and then the filter appears.
Is there a way to display the custom filter dropDown by default?
I hope Floating filters can help you here.
Check this example in ag-grid documentation
filter: "agNumberColumnFilter",
floatingFilterComponent: "sliderFloatingFilter",
floatingFilterComponentParams: {
maxValue: 5,
suppressFilterButton: true
},
The example shows sliderFloatingFilter, to make it a dropdown filter, I think you need to create custom component for it.
Have a look at how ag-grid team has made TextFloatingFilterComp, DateFloatingFilterComp, NumberFloatingFilterComp etc. on GitHub code
Hope this helps.
I achieved dropdown/enum filter using this column configuration. I my case, I was trying to add a boolean filter.
Here is complete example
https://codesandbox.io/s/ag-grid-react-enum-filter-q4er8?file=/src/App.js:1572-1599
const getEnumColumnParams = (enumMap) => {
return {
cellRenderer: (params) => {
if (!params.data) return "";
const { value } = params;
return enumMap[value];
},
filterParams: {
buttons: ['reset', 'apply'],
closeOnApply: true,
filterOptions: [
"empty",
...Object.keys(enumMap).map(key => {
return {
displayKey: key,
displayName: enumMap[key],
test: function (filterValue, cellValue) {
return cellValue === true;
},
hideFilterInput: true,
};
})
],
suppressAndOrCondition: true,
},
};
};
const boolEnum = {
true: 'Yes',
false: 'No'
};
const colorEnum = {
'#ff00000': 'Red',
'#00ff00': 'Green',
'#0000ff': 'Blue',
};
const columnDefs = [
{
field: 'available',
...getEnumColumnParams(boolEnum),
},
{
field: 'color',
...getEnumColumnParams(colorEnum),
}
];
Or you can create column types and assign type: 'boolColumn' etc in column definition like I did in above codesandbox example
When I export my grid to excel,headers are like: Product Name,{{'unitsOrder'| translate}} in excel. My grid supports 2 languages and I am showing it with angularjs translate way. Any offer?
<script>
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx"
},
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
sortable: true,
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "<b>Product Name</b>" },
{ field: "UnitsOnOrder", title: "{{'unitsOrder'| translate}}" },
{ field: "UnitsInStock", title: "Units In Stock" }
]
});
</script>
I had a similar problem but I use i18next translation instead of angular but maybe it helps you find a solution to your case:
I use the 'excelExport' event to manually update the generated worksheet. Within the worksheet object I search for the header cells and manually trigger the translation for the text it contains:
excelExport: function(e) {
// First I loop through all rows in the worksheet
e.workbook.sheets[0].rows.forEach(function(row){
// Ignore 'data' rows (only use 'header' and 'footer')
if(row.type != 'data'){
// Loop through all cells of the row
row.cells.forEach(function(cell){
// Here I overwrite the cell value with its translation
// You have to implement translate() so it works with angular
cell.value = translate(cell.value)
});
}
});
},
You now have to write your own translate function which can handle your angular translation. As I use i18next for translations my solution won't help here (I use jquery to generate a jquery html object on which I can trigger the translation)
I try to setup custom dropdown in Kendo UI.
I have a reference to my issue.
http://dojo.telerik.com/aFIZa/13
My issue is that I do not know how I can setup the selected text in the template attribute? I want to show the text field but save the id as a value. And I do not want to use external datasource. I would like it as inline in the json.
The code is below:
$scope.mainGridOptions = {
dataSource: $scope.dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "Category", title: "Category", width: "180px",
editor: function(container, options) {
var editor = $('<input kendo-drop-down-list required k-data-text-field="\'cat\'" k-data-value-field="\'id\'" k-data-source="{data:[{id: 1, cat: \'test\'}, {id: 2, cat: \'test2\'}]}" data-bind="value:Category"/>')
.appendTo(container);
$compile(editor)($scope);
editor.css("visibility", "visible");
}
, template:"selected text in the combo "
}
], editable: true
}
Ok, this was a tough one, but I think I could achieve what you want, or at least I got closer:
$scope.mainGridOptions =
{
dataSource: $scope.dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{
field: "Category", title: "Category", width: "180px",
editor: function(container, options)
{
// #1
var editor = $('<input kendo-drop-down-list required k-data-text-field="\'cat\'" k-data-value-field="\'id\'" k-data-source="{data:[{id: 1, cat: \'test\'}, {id: 2, cat: \'test2\'}]}" data-bind="value:Category,events:{ change: onChange }"/>')
.appendTo(container);
$compile(editor)($scope);
editor.css("visibility", "visible");
},
// #2
template:kendo.template($("#column-template").html())
}],
editable: true,
// #3
edit: function(e)
{
var ko = kendo.observable(
{
onChange: function(e)
{
var el = $(e.sender.element);
var ddl = el.data("kendoDropDownList");
var ds = $scope.dataSource.getByUid(el.closest("tr").data("uid"));
ds.OptionText = ddl.text();
},
});
var widget = $(e.container).find("input");
kendo.bind(widget, ko);
}
}});
Demo.
In the code you can notice 3 changes:
data-bind="value:Category,events:{ change: onChange }" Look that I have added an events object in the bind, which I declare onChange as the change event handler. We'll talk about this in the 3rd item below;
For a complex template(with javascript code and logic) I created a script content and rendered it at the template property. The template is this:
<script id="column-template" type="text/x-kendo-template">
# if (data.hasOwnProperty('OptionText')) { #
#: OptionText #
# } else { #
#: "selected text in the combo" #
# } #
</script>
In the template I simply check for the property OptionText in the model(dataSource's current item) and: if it exists, use it; else, use the default text. We'll talk about OptionText in the 3rd item, below;
Now, here I have added an edit event to the grid. In that event I created an observable object, where I define the onChange function handler. In that function I seek for the current dataSource(ds) and I add text of the selected item in the dropdownlist in it, as the property OptionText, which I use in the template above explained.
I hope this explains how it works(in fact I hate working with those binders and observables, but sometimes they are needed).
Good luck.
I am having great difficulty trying to render a treeview with angular and kendo. Here is the code I have so far:
Website1.controller("FieldsController1", function ($scope) {
$scope.things = {
data: [
{
text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
]
};
Above is the controller. And here is the markup.
<ul kendo-tree-view k-hierarchical-data-source="things">
</ul>
Also, is there any documentation on how to do this?
I got it working via k-options.
http://jsfiddle.net/M84qj/1/
The only documentation I could find was this page, which, judging from your use of "things", you found as well :p
http://kendo-labs.github.io/angular-kendo/#/
Good luck with Kendo + Angular :)
While this post is a bit old it's one of the first ones that come up on a Google search. When creating a treeview make sure you create a HierarchicalDataSource. This allows you to define child nodes and other properties such as whether or not the item should have child nodes. This helps a ton when using a remote data source.