I have a panel bar based on a remote data source which all works fine.
One of the attributes in the feed combined with a form field on the screen will determine if either the user can click on a child item in the panelbar and navigate through to the url, or gets a warning dialogue and navigation fails.
I am using the following technique to capture the given json attribute in the feed and associate it with each item in the panel:
$("#panelbar").kendoPanelBar({
dataSource: haRepList,
template: "<span class=''repType'' data-url=''#= item.type #''>#= item.name #</span>",
select: function(panel){
var classId = $(panel.item).find(".repType").data(''url'');
if (classId !== ''undefined'') {
alert(classId);
}
},
dataTextField: ["name", "name"]
});
So when I click on the given item, I get an alert telling me what the type attribute is. I now need to tell the panel "Do not allow the click through url to work" based upon both this value, and another field on the screen.
You could try preventDefault, stopPropagation or simply return false:
$("#panelbar").kendoPanelBar({
dataSource: haRepList,
template: "<span class=''repType'' data-url=''#= item.type #''>#= item.name #</span>",
select: function(panel){
var classId = $(panel.item).find(".repType").data(''url'');
if (classId !== ''undefined'') {
panel.preventDefault();
}
},
dataTextField: ["name", "name"]
});
Here's a link to a working demo where the second panel is conditionally disabled. Hope this helps.
Related
I'm trying to create a search input field with a history of previous searches on a dropdown, like, for example the search field in the Intellij editor.
I'm new to Vuetify and from what I can see so far it looks like Combobox is the best component to use.
I would like the dropdown to only open if you click the dropdown icon. At the moment the dropdown opens when you click in the text input field. From the documentation is looks like prop :menu-props="{openOnClick: false}" might be what I need, but it doesn't seem to work.
Can anyone give me pointer in the right direction?
https://codepen.io/damianhelme/pen/zMXJvb
<v-combobox
v-model="search"
:items="searchHistory"
label="Search"
:menu-props="{openOnClick: false}"
></v-combobox>
new Vue({
el: '#app',
data () {
return {
search: '',
searchHistory: [
'Apple',
'Banana',
'Pear'
]
}
}
})
Thanks.
EDIT:
Updated pen with custom append slot to deal with icon state:
https://codepen.io/anon/pen/KrjzRL
If you want to open (and close) the combobox only on icon-click, try this trick:
<v-combobox
:menu-props="{value: autoselectMenu}"
#click:append="toggle"
></v-combobox>
Pass custom value to menu - this indicates whether menu should be opened/closed.
Then change that value only on icon-click by using :append-icon-cb prop.
data () {
return {
autoselectMenu: false,
// ...
methods: {
toggle() {
this.autoselectMenu = !this.autoselectMenu
}
// ...
So for any other case when you want to open or close the menu, just change that custom value i.e. autoselectMenu.
codepen
Is it possible to have a filter menu with options such as Yes, No, Other
I have a grid with a column which could have only 3 values Yes, No or Other. The filter should show radio buttons with these values and two button Filter and Clear. Is this possible?
When I try with field type:"boolean", I get 'Yes' and 'No but how do I add the third radio button 'Other'.
Any help would be appreciated.
Thanks
Kendo has an example of how to do just that here:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
Here is an example of how your filter will probably be set up
filterable: {
//hide second filter option
extra: false,
operators: {
string: {
eq: "Is equal to"
}
}
},
filterMenuInit: function(e) {
//when the filter menu opens find the first dropdown and hide it
//as it has the Is equal to filter in it.
e.container.find(".k-dropdown").eq(0).hide();
}
Here is JSbin that shows how to use some of these features:
http://jsbin.com/qehugexo/2/edit
Update
While I could get radio buttons to show up in the filter window, it was a headache to rig it up and very hacky with the default Kendo stuff. I would suggest using the Kendo Dropdown as show in the demo or just manipulating the filter on the Data source of the Grid itself.
It can be done with code like this:
$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: "Boston"}], Logic: "and"})
Here is an example of how you could use it.
filterMenuInit: function(e) {
//when filter menu opens toss it cause its lame!
e.container.html("
<input name='radio' type='radio' checked='checked' value='Clear'>Clear</input>
<input name='radio' type='radio' value='London'>London</input>
<input name='radio' type='radio' value='Seattle'>Seattle</input>
");
$("input[type=radio]").click(function(){
if($(this).val() != "Clear") {
$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: $(this).val()}], Logic: "and"})
}else {
$(".k-grid").data("kendoGrid").dataSource.filter({})
}
});
}
And an updated JSbin: http://jsbin.com/qehugexo/3/edit
So I have a grid and the columns have the good ol' column menu on them with the filtering/sorting/excluding of columns and it all works fine.
The fly in the ointment is that I would like to allow the user to rename a column heading and the obvious place in the UI to allow this is in said column menu.
Something like this:
(where the red bit is just another option that I click on and popup a little window to let me type in a new heading)
Is this possible and how would I do it?
I see that menus can be customized and the grid demo shows how to adjust the stuff in the filter popup but I am not sure how I would add this item (I can see how I would programmatically do the rename but just this getting an option onto the menu has me stumped).
You can use the columnMenuInit event. Two possibilities:
$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
// Option 1: use the kendoMenu API ...
menu.append({
text: "Rename"
});
// Option 2: or create custom html and append manually ..
var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' +
'<span class="k-link"><b>Manual entry</b></span></li>';
$(e.container).find("ul").append(itemHtml);
// add an event handler
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Rename") {
console.log("Rename for", field);
} else if (menuText === "Manual entry") {
console.log("Manual entry for", field);
}
});
}
})
See fiddle with two alternatives:
http://jsfiddle.net/lhoeppner/jJnQF/
I guess that the point of a filter is to filter, not to make changes on the grid.
But anyways i found this Kendo Post that may help you to achieve what you need.
You can also take a look a this one too.
I have a simple form in a view and I have a field that looks like this:
xtype: 'numberfield',
label: 'Number',
name: 'num',
disabled: true
This field is in a 'formpanel'.
I am trying to set disabled to false when the form button is pressed (enable the field).
Now, there is a button in the form that triggers a function in the view (onButtonTap) and fires a function in the controller (enableField) and sends the panel and values to it:
onButtonTap: function(button, e, eOpts) {
var panel = button.up('formpanel')
var values = panel.getValues();
panel.parent.fireEvent('enableField', panel, values);
}
And in my controller this is enableField:
enableField: function(panel, values) {
panel.config.items[0].items[1].disabled = false;
}
I am sure my controller works fine and the function enableField is actually fired, but nothing happens to the button and it stays disabled..
What am I missing?
In the controller(within refs) add the following code to get the 'numberfield' to be enabled:
refs{
numberField: 'numberfield[name="num"]'
}
And on button tap enable the field by ths:-
onButtonTap: function(button, e, eOpts) {
this.getNumberField().enable();
}
I'm trying to create a Firefox add-on using the online Add-On SDK.
I'm starting with something simple - I want to add a toolbar button that reads the current selected text.
The documentation for the Selection object makes this looks simple enough:
var selection = require("selection");
if (selection.text)
console.log(selection.text);
This doesn't seem to work for me, I just get null.
Here's my complete code:
var selection = require("selection");
require("widget").Widget({
id: "widgetID1",
label: "Test Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(event) {
console.log('selection.text = ' + selection.text);
}
});
I've also tried to create the selection object inside the onClick even, with the same effect.
I am able to use the select event to get notified on new selections, so I guess I can use that instead (and keep the value), but I wonder why the above code isn't working... What am I doing wrong?
The selection variable as defined will only have the selected text as long as it is in focus. Clicking on the widget icon takes focus away from the selected text, so it sees no text selected.
Thats why it works when used inside the listener function.
To confirm this, I tried logging its value when a toolbar button is pressed (using the toolbarbutton module), and it works. Pressing a toolbar button (presumably) does not steal focus.
Here's the code, and you can test it online too:
var selection = require("selection");
var tbb = require("toolbarbutton").ToolbarButton({
id: "test",
label: "test",
image: "http://www.mozilla.org/favicon.ico",
onCommand: function(event) {
console.log('selection = ' + JSON.stringify(selection)); // works!
}
});
Here is a solution using the select event:
var selection = require("selection");
var selectedText = '';
function selectionChanged(event){
//todo: check for selection.isContiguous
selectedText = selection.text;
}
selection.on('select', selectionChanged);
require("widget").Widget({
id: "widgetID1",
label: "Test Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(event) {
console.log('Selection: ' + selectedText);
}
});