I am using kendo MVC UI. I have placed a button to test. I have setup every thing. Solution is being build but button is being rendered as a simple button it don't have k- classes and image that I mentioned.
#(Html.Kendo().Button() .Name("btn") .HtmlAttributes(new { type = "button}) .ImageUrl(Url.Content("~/Content/Images/qbo.png")) .Content("This Button"))
The above html is rendered as:
<button class="element-center" id="btn" type="button">This Button</button>
Any Idea?
I found the issue. MVC wrapper script was placed before kendo script files. I have deferred the script rendering, now it's working fine.
In your code you're missing an " after the type attribute
type = "button
Anyways take a look to the examples
#(Html.Kendo().Button()
.Name("imageButton")
.HtmlAttributes( new {type = "button"} )
.ImageUrl(Url.Content("~/Content/shared/icons/sports/snowboarding.png"))
.Content("Image icon"))
Related
I am using react bootstrap table and decided to customize a cell. My changes, however, do not render until I click into the cell. This is shown in the image below:
Button doesn't render
Button now renders now that I clicked into the cell
My goal is to have the button render automatically in the cell.
I defined it as this:
<TableHeaderColumn dataField='knowledgeReference.0.docUrl'
width="200px"
hiddenOnInsert
dataFormat={urlFormatter}
tdStyle={{whiteSpace: 'normal'}}
customEditor={ { getElement: createUrlEditor, customEditorParameters: {
}} }>
Resource URL</TableHeaderColumn>
Has anyone seen an issue like this before? How did you resolve it?
Resolved the issue by using dataFormat instead of customEditor. The bootstrap table doc doesn't clarify the distinction adequately.
<TableHeaderColumn dataField='knowledgeReference'
width="200px"
editable={false}
hiddenOnInsert
dataFormat={urlFormatter}
tdStyle={{whiteSpace: 'normal'}}
dataFormat={createUrlEditor}
>
References</TableHeaderColumn>
I have a component that includes a single Rich Text field. In the sublayout, the field is rendered as an Html.Editable with Glass so that it can be edited on the page in PageEditor. It looks like this:
public override void Initialize()
{
litBodyContent.Text = Html.Editable(GlassItem, item => item.Body);
}
<div style="min-height: 38px">
<asp:Literal runat="server" ID="litBodyContent" />
</div>
However, when I insert links using the Rich Text editor, when the page is rendered (in normal view after being published, not in page editor), the links are rendered with the item ID rather than the user friendly path, like this:
Go to another page
I am pretty sure that this is an issue with Glass. How can I keep the field editable in the Page Editor but make it render the link correctly?
You can check if you have proper attribute in the model.
If you have SitecoreFieldSettings.RichTextRaw attribute, it will NOT pass through render pipeline and returns the RAW HTML. Instead if you use Default (SitecoreFieldSettings.Default), rich text content will go through render pipeline and url will be in friendly format.
http://docs.glass.lu/html/d44739b2-5f0e-d862-f62c-86c50f0b262f.htm
Can you try to change it from using literal to use Editable() method directly, Something like:
<%= Editable(GlassItem, x => x.Body) %>
I think Initialize() is too soon in the page life cycle. Try moving it further along, like to Page_Load() or so.
Sitecore 6.6 Update 4
We're using CustomItemGenerator 1.0 and I was using this to help build a primary navigation menu for a site. This worked as expected and everything was rendered properly.
My problem is when I attempt to edit the menu via Page Editor; I don't even see the menu.
I use a repeater and repeat over a list of links to include in the nav. Due to the way the HTML was created, each LI element needs to have its own, specific ID ("Nav Id" Field in Sitecore) that ties into the CSS. Code inside of my repeater's ItemDataBound event:
// Cast the item using CustomItemGenerator-generated class
GenericContentPageItem navItem = (GenericContentPageItem)e.Item.DataItem;
liMenuItem.ID = navItem.NavId.Rendered; // I tried "navItem.NavId" by itself as well
So while this renders properly in the browser, it doesn't when I'm in Page Editor:
<li id="<input id='fld_B72EB6696DCF41A49671972D5EA5DEB8_2163B90C08AB4A18970A7F3ECE79DCFC_en_1_f71bd37d18d146c19e222e89fcffe278_3' class='scFieldValue' name='fld_B72EB6696DCF41A49671972D5EA5DEB8_2163B90C08AB4A18970A7F3ECE79DCFC_en_1_f71bd37d18d146c19e222e89fcffe278_3' type='hidden' value=" Home?="">
... instead of it rendering like this:
<li id="Home">...</li>
Now, that having been said, I can change my code to not use the CustomItemGenerator and it works fine in the browser and Page Editor as follows:
GenericContentPageItem navItem = (GenericContentPageItem)e.Item.DataItem;
Item nav = Sitecore.Context.Database.GetItem(navItem.ID);
liMenuItem.ID = nav.Fields["Nav Id"].ToString();
I would like to avoid having to hardcode field names in my code, which is why I am using CustomItemGenerator. Is there something that I'm doing wrong with my code that it doesn't want to work in Page Editor?
Thanks!
If you need the actual value out of the field regardless of if you are in the page editor or not, you want to use the Raw property:
liMenuItem.ID = navItem.NavId.Raw;
I studied the Crispy-Forms documentation and I tried to put an extra button into one of my forms. With
self.helper.add_input(Button('back', "Back", css_class='btn'))
I can add a nice button. But the Button() wont take an onclick or on_click-attribute. So how can I add logic to this button? Adding an onclick event with JQuery isnt a very nice solution...
Thanks!
Ron
Are you certain that Button will not take onclick in its kwargs?
I just added an onclick="javascript here" to a Submit() element and it displayed fine.
I also peered a bit at the underlying code, and I think all inputs by default flatten the kwargs that aren't popped because of special use (i.e. template), and pass those through into the rendered HTML. This may be new since April '12 (when originally posted), but it currently seems to be as simple as the following:
self.helper.add_input(Button('back', "Back", css_class='btn', onclick="alert('Neat!');"))
This is not included by default (afaik..).
If you just need this once, is possible to use crispy-forms HTML Layout Object
HTML('<input type="button" name="Save" onclick="do_whatever" />')
What do you then dislike using jQuery? You could handle this rather easy and generic, using something like:
$('form :submit.ajax_submit').live('click', function(e) {
e.preventDefault();
var my_form = $(this).parents('form');
// do whatever
alert(my_form.attr('id'));
alert(my_form.attr('action'));
});
and then just pass the class:
Submit('save', 'save', css_class='ajax_submit')
DatePicker is not working in a popup form, what could I've done wrong?
The form is in a .php format and is triggered by this javascript function below:
function popitup_request(url, ar){
var f = document.forms[0];
if(ar==""){
alert("Please choose at least one record.");
return false;
}
newwindow=window.open(url, 'name', 'toolbar=0,location=0,directories=0,status=1,menubar=0,scrollbars=1,resizable=0,
width=570,height=280');
if (window.focus) {
newwindow.focus()
}
newwindow.moveTo(screen.availWidth/2-(500/2),screen.availHeight/2-(300/2));
}
the form loads but when you click on the icon-trigger nothing happens.
I already tested including the jquery-1.7.1.js on both main.php and popup.php.
I assume you bind the Datepicker widget to the form elements in your main view. Since popup is loaded later (on popitup_request), the date fields on that form will not be bound to datepicker.
Include the datepicker js and css only once, in your main view. Add a small javascript to the bottom of your popup form, something along the lines of
<script type="text/javascript">
$("input.date").datepicker();
</script>
Btw, your code does not reflect best practices in a number of ways (pixel based layout, magic numbers, mixing native Javascript and jQuery though it's not needed). I'd suggest you go through both a Javascript and a jQuery tutorial to see suggested patterns and good examples for enhancing web pages with Javascript.