I posted regarding this issue How to use a restricted to list combobox in a kendo ui menu but neglected to post code and was slammed for it. So, I am going to try to explain my questions clearly here.
(1) Can the kendo-menu support the use of a combobox for a menu item?
(2) If the answer is yes to (1), then I have a question as to how to do it.
I've created a jsfiddle here: Kendo menu with combobox menu item
If I define my kendo menu as follows:
HTML
<ul id="menu"></ul>
JS
$(document).ready(function() {
var menuItems = [{text: "Apple", url: "http://www.google.com"},
{text: "Banana", url: "http:\/www.google.com"},
{text: "Orange", url: "http://www.google.com"}];
var menuData = [{text: "Fruits", items: menuItems},
{text: "Site", url: "http://www.google.com"},
{text: "Location", url: "http://www.google.com"}];
var menu = $("#menu").kendoMenu({ dataSource: menuData });
});
I would like to have the first item, 'Fruits', which will be rendered as a standard menu item drop down in the above code, to be rendered as a combobox (restricted to its list of data items) and to display the text from whatever list item is selected by the user. The menu datasource is dynamic so I don't think I can specify this in the html. But I have searched the kendo forums and demos and stackoverflow and can't find any relevant examples. The requirement is for the menu to function as follows. If 'Apple' is selected, the menu would appear as:
Apple v | Site | Location
If the user clicks the dropdown and selects 'Banana', the menu would appear as:
Banana v | Items | Inventory
--Pat
There isn't really a great way with just a Menu widget because for some reason the Menu widget isn't designed to actually track the underlying data items.
The passed in dataSource isn't converted to a real kendo.data.DataSource like every other widget.
Menu items don't get a uid back to their data item they were created from, since it doesn't use a DataSource
There is no way to provide a template to render a menu item from.
However you can sort of brute-force the change of the element text with jQuery like this (updated jsFiddle).
An alternative would be to try to put an actual DropDown widget next to the menu (maybe float it left next to the menu?) and go through the pain of making the CSS look the same as the menu.
Another alternative would be to make a completely custom widget, which could then output elements with the same element structure and css classes as the Menu widget, but have it actually bound to a DataSource. You could then update the name of the parent item in the datasource to the selected item's text, and have the UI element update to match with MVVM.
That is a pretty general explanation, I know, but I'm thinking of something similar to what was done for the custom shopping cart menu in the old/no-longer-supported Music Store sample, which you can find here:
Kendo Music Store Sample (see the 'shopping cart' item on the right of the menu).
Documentation for the implementation of that custom shopping cart widget.
Related
I am trying to create an item that is a button "show more" and when you press on it you can show a kind of context menu / drop down that all of the items in that drop down are with checkboxes and there is a search component in it too, so you can search some items in the dropdown by their name. For example: (instead of "c++,c#,Object c" it's should show "show more", i.e. static text)
I tried to use kendoContextMenu. But I don't know if it's could work because the problem with context menu is that when I will click on a checkbox the menu will close. Please advise me of a way to do that or if you have an example of code. Thanks!
The MultiSelect component might be a good starting point
https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect.
My understanding is that MultiSelect does not have a "select more than one at a time in dropdown" feature.
You might consider using a pop up window and within that implement your own custom ui that features everything you want
search term box
scrolling list of selected and selectable items
accept or cancel changes in selection
Regarding your dojo that extends drop down list, I can't code the extension for you. However, changing the dataSource assignment to a setDataSource call will populate the extension component according to the template.
// kendo.ui.DropDownList.fn.dataSource = options.testItemSource;
me.setDataSource(options.testItemSource);
I'm trying to add a button, like the k-select element, to the end of a Kendo combobox for adding new items but whatever i change the element the result is not consistent and fine with other elements.
kendo combobox generate this style for button to open the list.select
I want to find clear way to add an button to end of combobox like this link.
the template won't help becase it in control in in list.
tnx
I'm using jqGrid verison 4.5.0 and I noticed by default, the pop-up single field search dialog doesn't look like this:
Is there a way to move "+" button to the right of "-" button and move match-rule dropdown to the bottom, both of them to look like this snapshot? We like it this way as it is less messy to some of our customers.
Many thanks..
JQuery v2.0
JQuery-UI v1.10.3
jqGRID v4.5.0
$('#Spreadsheet').navGrid('#Pager',
{edit:false,add:false,del:false,search:true,view:false,refresh:false},
{}, {}, {},
{multipleSearch:true,multipleGroup:true,closeOnEscape:true,closeAfterSearch:true,
searchOnEnter:true,showQuery:false,width:800,caption:"Search Records"
},
{}
After some discussion in the comment we clarified that the The searching dialog are used with options multipleSearch: true, but without multipleGroup: true. The goal is the hiding of the dropdown which allows the user to choose between "All/Any".
In the answer I showed how one can use afterRedraw to change Searching Dialog.
The demo displays the dialog in the form
It uses the following afterRedraw
afterRedraw: function () {
$("input.add-rule", this)
.button() // use jQuery UI button
.val("Add rule"); // change text of "+" button
$("input.delete-rule", this).button(); // use jQuery UI button
$("select.opsel", this).hide();
}
Only the last line ($("select.opsel", this).hide()) is really important. Other lines just improve a little the look of the Searching Dialog.
I have a grid control displaying data about a Company. I want one column to be "Employee". On click on the any cell of "Employee" column I want to pop up the one Form called "Employee Details" and would like to feel the data.
How can I do this?
As I understand the modal form on click of a jqgrid cell deals with data only related to that row. I want to show different data on the pop up form, i.e. other than the grid data.
Pl help.
Shivali
Probably you can use unobtrusive links in the column (see this and this answers). The advantage of this technique is that instead of typical links you can define any custom action on click on the link. The look of the link can be defined by CSS, but it seems to the that the link can show the user better as other HTML elements, that the user can click on it.
Alternative you can use a button in the column with respect of the custom formatter, but with the same technique as described before you can free define which action will be done on the click.
Inside of the click event with the parameter 'e' you have e.currentTarget as the DOM element of <a> for the link or <input> or <button> if you use buttons in the grid column. To find the row id you can use var row = $(e.currentTarget).closest("tr.jqgrow") or var row = $(e.target).closest("tr.jqgrow") to find the <tr> element. The row id will be row[0].id.
I try to implement the link from one grid to the modal dialog of another grid. I made an example
to illustrate this problem. If you choose in a context menu (right mouseclick) of each row of the picture grid, you will find some Actions. One of them is "Go to scan info". Here I would like to have a link to modal dialog of grid "Scans" and modal dialog should put the user depending whether the scan record for the selected picture allready exist or not, to the Add/Edit modal dialog.
Does anybody already implemented something like that?
Let us we have two grids on one page: one with id="grid" and another with id="scan". Exactly like you call jQuery('#grid').jqGrid('editGridRow',id) on double-click on the first grid you can call jQuery('#scan').jqGrid('editGridRow',id) in the context menu "Go to scan info". The only thing which you have to know is to know the ids on the second grid. Before calling of jQuery('#scan').jqGrid('editGridRow',id) you can impelemt any additional logic (like testing whether "the scan record for the selected picture allready exist or not").
If I understand, you need insert another jqgrid into modal dialog. Did you try to insert jqgrid function into open event of jquery dialog?
You have to call jqgrid function on demand, not in document.ready statement in this case.
Imo this could work (not tested yet):
$( ".selector" ).dialog({
open: function(event, ui) {
$("#grid").jqGrid({
... all of options...
});
}
});