I use the kendo ui mvc grid.
I set the columns to Editable(false);
I can still edit those fields in the popup editing dialog. Why?
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.FirstName).Editable(false);
model.Field(p => p.LastName).Editable(false);
}
)
Popups always has to be customized.
In Views > Shared > EditorTemplates > Person (or whatever your class is) you just toss in whatever you want
#model TelerikMvcApp1.Models.Foo.Person
<div>
#Html.HiddenFor(person => person.Id)
<div class="editor-label">
<label for="Title">First Name</label>
</div>
<div class="editor-field">
#Html.Kendo().TextBoxFor(person => person.FirstName)
</div>
</div>
Related
Can I Set Encoded to False on a field of a Kendo Template for Kendo ListView?
Here I have a grid over a list. As you can see in the list the rich text is being diaplayed as HTML where as in the Grid where enocding is set to False the RIch text is being displayed as text. Can I set encoding to false on the field I want ( Comment ) in the ListView? If not what are my options as I was unable to render an editor in the Kendo template... EDIT: Goal is to remove Grid I want the list only.
#(Html.Kendo().Grid<WorkflowItemCommentModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(e => e.Comment).Width(300).Encoded(false);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("CommentsRead", "WFItem").Data("getWorkflowItemID"))
)
)
<div class="col-sm-2"></div>
<div id="comments-list" class="col col-sm-10">
#(Html.Kendo().ListView<WorkflowItemCommentModel>()
.Name("CommentList")
.TagName("div")
.Events(e => e.DataBound("onCommentListDataBound").Change("onCommentCriteriaChange"))
.ClientTemplateId("itemCommentTemplate")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("CommentsRead", "WFItem").Data("getWorkflowItemID"));
dataSource.Sort(sort => { sort.Add(f => f.CreatedDate); }).ServerOperation(false);
})
.Selectable(s => s.Mode(ListViewSelectionMode.Single))
)
Template:
#*//WFITEM COMMENT TEMPLATE*#
<script type="text/x-kendo-tmpl" id="itemCommentTemplate">
<div class="step">
<div class="step-wrapper">
<dl class="step-list-details">
<dt class="name"><b>Name:</b>#:CreatedByUserName# <b>Date:</b> #:CreatedDate#</dt>
<dd class="stepNum">
<b>Comment:</b>
<div contenteditable="true">
#:Comment#
</div>
</dd>
<dd class="title">
<b>Internal Comment:</b> #:InternalComment#
</dd>
<dd class="stepStatus">Status: Status Test</dd>
</dl>
<div class="btn btn-primary" id="viewStep">View</div>
</div>
</div>
</script>
I want my list text to render as it does in the grid with encoding set to false:
Yes, you can use #=Comment# to force the template to not encode the output. See this example from the documentation:
<div id="example"></div>
<script>
var template = kendo.template("<div id='box'>#= firstName #</div>");
var data = { firstName: "<b>Todd</b>" }; //Data with HTML tags
var result = template(data); //Pass the data to the compiled template
$("#example").html(result); //display "Todd" in a bold font weight
</script>
Be aware that this might expose your site to a cross-site scripting (XSS) vulnerability. At the very least, you will probably want to ensure that the data doesn't contain any <script> tags.
I am using asp.net mvc 3. I have to display a CheckBoxList and get the checked values from the CheckBoxList. For this I am using EditorTemplate. I have to show the Name of the checkbox as a hyper link. The following is my code.
Parent View:
if (Model.MyObject.PresentedDocuments != null && Model.MyObject.PresentedDocuments.Count > 0)
{
<div class="checkbox-container">
#Html.EditorFor(x => x.MyObject.PresentedDocuments)
</div>
}
EditorTemplate View:
#model Transaction.DocumentDto
#Html.HiddenFor(x => x.DocumentId)
#Html.HiddenFor(x => x.Type)
#Html.CheckBoxFor(x => x.IsSelected)
#Html.DisplayFor(x => x.Name)
Essentially I want to have #Html.DisplayFor(x => x.Name) to be surrounded by an anchor link whose href value is available in Transaction.DocumentDto. If I could do a foreach loop I could do the following:
foreach (var docs in Model.Documents)
{
<div class="checkbox-container">
<input type="checkbox" name="SelectedGroups" value="#docs.DocumentId" id="#docs.DocumentId"/>
<label for="#docs.DocumentId">
#docs.Name
</label>
</div>
}
Unfortunately I have to use only EditorTemplate.
The standard ASP.NET MVC template in Visual Studio 2013 generates a page Register.cshtml that defines the UI for registering new user into the system. I extended it to add a checkbox for "I accept the terms." Here is the code snippet:
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
#Html.CheckBoxFor(m => m.AcceptTerms, new { #class = "form-control" })
#Html.Label("I accept", new { #class = "control-label" })
</div>
</div>
The idea is that a chexkbox gets displayed below the password editbox. The text must get displayed on the right side of the checkbox.
Here is the partial image of how the output looks:
As you can see, the checkbox is getting center-aligned and "I accept" is flowing to the next line.
How can I keep the checkbox and the label together and also ensure that the checkbox is left-aligned with the editbox above it? Regards.
Do this...
<label>
I accept
#Html.CheckBoxFor(m => m.AcceptTerms)
</label>
Try this ... hope this will help
<div class="checkbox">
#Html.CheckBoxFor(model => model.IsMobileView, new { htmlAttributes = new { #class = "form-control pull-left" } })
</div>
It seems that 'label' or/and input type="checkbox" have the display type block.
To fast check try add style="display: inline-block" to both Label and CheckBoxFor. If I'm right, then you can correct your .css-files.
Disclaimer: I'm brand new to Razor. I can't seem to figure out the following:
When I use #Html element inside #Section, I get the following compilation error
An expression tree may not contain a dynamic operation.
Here is my Code:
#section login{
#using (Html.BeginForm(new {ReturnUrl = ViewBag.ReturnUrl}))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
#Html.LabelFor(m => m.UserName)
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
#*<fieldset>
<legend>Log in Form</legend>
#Html.LabelFor(m => m.UserName)
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
<li>
#Html.LabelFor(m => m.Password)
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</li>
<li>
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe, new {#class = "checkbox"})
</li>
<input type="submit" value="Log in" />
</fieldset>*#
}
}
As you can see, I'm trying to put these elements inside html tags, but I've commented a lot of it to troubleshoot. Any input on why I'm getting this error and how to fix it would be greatly appreciated.
Thanks!
Add your model class (fully namedspaced) as a #model directive at the top of your view.
e.g.
#model myapplication.mynamespace.LoginModel
and your LoginModel looks like:
public class LoginModel
{
public string UserName {get; set;}
public string Password {get; set;}
public bool RememberMe {get; set;}
}
TextBoxFor, CheckboxFor etc use expression trees and reflection to get at the real value. Without a real model it has no clue what type of values to expect and therefore can't build an expression tree at compile time.
I want to create forms in symfony2. I need this HTML structur for each control.
<div class="form-group">
<label class="col-md-2 control-label">Firstname:</label>
<div class="col-md-10"><input type="text" name="firstname" class="form-control">/div>
</div>
Now is my question, how can i add the div with the class form-group and how can i surround the input element with the div .col-md-10?
$builder->add('firstname', 'text', array(
'attr' => array(
'class' => 'form-control'),
'label_attr' => array(
'class' => 'col-md-2 control-label'
)
)
);
Check How to customize Form Rendering section of the documentation.
You may need to override the form_widget block (form_widget_compound block to go into details).
Find here the default behavior of each twig form helper.
The Form Theming Sub Chapter contains many relevant examples on how to customize any given form field block.