I want to display my radio buttons in 1 line such as:
◎ Option1 ◉ Option2
However with Vaadin I cannot accomplish this it seems like the following,
◎ Option1
◉ Option2
here is my code:
final List<String> options = Arrays.asList(new String[] {
"hebele", "hubele"});
final OptionGroup group = new OptionGroup("", options);
group.setNullSelectionAllowed(false); // user can not 'unselect'
group.select("hubele"); // select this by default
How can i change this?
With Vaadin 7.3, Valo theme supports horizontal OptionGroup without writing custom style:
OptionGroup group = new OptionGroup("", options);
group.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
As explained in the The Book of Vaadin, you've got to define a theme to setup your own style.css file.
Then you can override the default style for the option to be displayed inline as follow:
.v-app .v-select-optiongroup .v-select-option {
display:inline;
}
I solved this problem like following.
RadioButtonGroup<String> radioGroupGtip = new RadioButtonGroup<>();
radioGroupGtip.getStyle().set("white-space","nowrap");
Related
I am trying to create a filtering system for a portfolio site in wordpress (using the Divi Builder) and would love to be able to make a button/buttons to set elements with specific classes on a page to display: none when the button is clicked on.
If anyone has ideas on how this can be done that would be super appreciated.
Thanks
If you can use jQuery, the .show() and .hide() Functions work on jQuery objects.
For example $('.dataholder').hide().filter( (index,element) => $("body").innerHTML == "abc" ).show() will hide all nodes with class dataholder and then show those containing abc.
Otherwise you have to use something like
element = document.querySelector('#dataholder')
element.style.display = 'none'
Or
elements = document.querySelectorAll('.dataholder')
elements.forEach( element => element.style.display = 'none' )
I am using a kendo ui batch edit grid and I want to use a dropdown as a column of it.
I read other topics about this subject and I did these steps:
1- I created a list of text/value and named it as
DocumetTypesSelectList in a viewbag like this:
ViewBag.DocumetTypesSelectList = DocumentTypesBll.GetDocumentTypes().ToList().Select(item => new SelectListItem
{
Value = item.DocumentTypeId.ToString(),
Text = item.Title
}).ToList();
2- I Cast the viewbag as a list of SelectItems in my view like this:
var DocumetTypesSelectList = ViewBag.DocumetTypesSelectList as List<SelectListItem> ?? new List<SelectListItem>();
3- I added a column to grid as follows:
columns.ForeignKey(p => p.DocumentTypeId, (System.Collections.IEnumerable)DocumetTypesSelectList, dataFieldText: "Text", dataFieldValue: "Value")
but it does not open to select on of the items. on click you can change the value, and off click it shows the text using DocumetTypesSelectList .
Thanks In Advance
many thanks for your help
Please explain little bit more about
on click you can change the value, and off click it shows the text
It seems that here (System.Collections.IEnumerable)DocumetTypesSelectList you have missed your DocumetTypesSelectList object to pass on properly. You can do this in your controller by using ViewBag as ViewBag.DocumetTypesSelectListEx = DocumetTypesSelectList and use this ViewBag in your view as (System.Collections.IEnumerable)ViewBag.DocumetTypesSelectListEx
Second thing is, in your DocumetTypes you must have two fields one is for value and one is to display. It seems you have both as "Text" and "Value". Also check the demo here
I would like to know how to add new elements to a dropdown menu without refreshing the html page. For example, if I have the drop down menu below:
<select>
<option>existing item 1<option>
<option>existing item 2<option>
<option>existing item 3<option>
<option>add new item<option>
</select>
Any time the user selects "add new item", a text box would pop-up asking the user for input. Then whatever string the user types in the text box, I want that to be saved to the drop down menu without refreshing the page. Of course, the "add new item" option will remain unchanged, so the user can repeat this process as many times as he/she wants.
Thanks for your help in advance.
you can do it using jquery..
$("select").append("<option>Another option</option>")
A non JQuery way is to use the standard JavaScript dom api like so:
This piece uses a prompt as a text popout input. If you want to make it pretty you will have to consider an UI framework.
JavaScript :
var select = document.getElementById('select');
var addNewOption = document.getElementById('addNew');
select.onclick= function(){
if (select.value === 'addNew'){
var text = prompt('New Value');
if (text){
var label = text;
var value = text;
var newOption = document.createElement('option');
newOption.innerHTML = label;
newOption.value = value;
select.insertBefore(newOption, addNewOption);
select.value = value;
}
}
};
Demo here:
http://jsbin.com/sufug/2/edit
I have a custom control in an ASP.NET Web Forms project that inherits from System.Web.UI.Control.
I want to add attributes in the markup that to not correspond to properties of that control e.g.
<myControls:Hyperlink runat=server custom-client-side-attr="1"></<myControls:Hyperlink>
The problem I am having is that the exception
Type 'myControls.Hyperlink' does not have a public property named
'custom-client-side-attr'.
I have tried PersistChildren(false), but that does not fix it. It has been a while since I have been in the depths of ASP.NET Web Forms and cannot remember how this is done.
You have to add those in server-code:
hl1.Attributes["custom-client-side-attr"] = "1";
You can still do it in the markup - you'd have to do it prior to the the declaration:
<% hl1.Attributes["custom-client-side-attr"] = "1"; %>
<myControls:Hyperlink ID="hl1" runat=server custom-client-side-attr="1"></<myControls:Hyperlink>
If you want an attribute like this, you have to create a property in for the user control. You may use viewstate or hidden control to keep the property persistent. Your code may look something like this:
public string custom_client_side_attr
{
get {
if (ViewState["custom_client_side_attr"] != null)
{
return ViewState["custom_client_side_attr"].ToString();
}
return string.Empty;
}
set
{
ViewState["custom_client_side_attr"] = value;
//set custom atribute for the hyperlink here
}
}
And access the property through markup:
<myControls:Hyperlink id="myCustomControl" runat=server custom_client_side_attr="1"></<myControls:Hyperlink>
or in the code:
myCustomControl.custom_client_side_attr="1";
If your custom control derives from WebControl it seems to work as you want.
I have a requirement where I need to remove or hide the default links displayed in Suite Bar like NewsFeed, SkyDrive, Sites etc. I want to add my own links and use this section as my Menu.
So while adding I want the items to be easily configurable by content editors. They can edit the links that needs to be shown and control the order. No hard coding of links.
If someone can help in this.
Regards,
navish
This can be done by oevrriding Delegate controls that displays these links. The below links will help
http://www.learningsharepoint.com/2013/02/10/addremove-links-in-top-suitebar-skydrivesitesnewsfeed-in-sharepoint-2013/
You should create a custom delegate control that target the SuiteLinksDelegate ControlId.
Add it to a Farm-scoped feature to make the custom delegate control active in the whole farm.
If you do not like hard-coded links you can program against a custom SharePoint list that stores the configurable links.
To Add custom links you can use the approach described here: http://zimmergren.net/technical/sp-2013-some-new-delegatecontrol-additions-to-the-sharepoint-2013-master-pages
If you need to remove some built-in links while keeping others (I had this requirement) you can use code like this:
public partial class SuiteLinksDelegate : MySuiteLinksUserControl
{
protected override void Render(HtmlTextWriter writer)
{
// save for later
var httpwriter = (writer.InnerWriter as HttpWriter);
// hijack the innerwriter
var sb = new StringBuilder();
var sw = new StringWriter(sb);
var tw = new HtmlTextWriter(sw);
writer.InnerWriter = tw;
// call base
base.Render(writer);
// get the html
var currentHtml = sb.ToString();
XElement element = XElement.Parse(currentHtml);
// remove SkyDrive link
var suiteLinkNodes = element.Elements("li").ToArray();
var remainingNodes = suiteLinkNodes.Where(node => !(node.ToString().Contains("ShellDocuments")));
element.ReplaceNodes(remainingNodes);
var modifiedHTML = element.ToString();
// set back the old innerwriter
writer.InnerWriter = httpwriter;
// write delegate control html
httpwriter.Write(modifiedHTML);
}
}
You can use javascript approach to hide this links as described in below link
http://www.tuyrcorp.com/sharepoint-2013-top-links-name-id-and-how-to-hide-them/
you can also add new item in the dropdown using this same javascript as well
Hope this helps
Thanks