I have a kendo grid in mvc with column property .Encoded(false)
In the controller I replaced Environment.NewLine with
<br>
But in the view there is a text instead of real new line. I tried both:
<br> or <br/>
It is not working either. What am I doing wrong?
Finally I solved it myself.
in the Grid:
columns.Bound(m => m.Address).Width(150).Encoded(false).ClientTemplate("#= getHtmlNewLinesString(Address) #");
and in the js:
function getHtmlNewLinesString(text) {
var regexp = new RegExp('\n', 'g');
return text.replace(regexp, '<br>');
}
You can also use css to solve this.
in html file:
col.Bound(c => c.Text)
//.Encoded(false)
.Title("text")
.HtmlAttributes(new { Class = "keepLineBreak" });
in css file:
.keepLineBreak {
white-space: pre-wrap;
}
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
The filter is not working in this case because the cell includes <br>.
Related
question is very simple, I have this line of code within a template:
#Html.TextAreaFor(m => m.AnswerText, new { #class="Textarea", placeholder=Model.QuestionPlaceholder })
The problem is that sometimes AnswerText contains special characters like &, so I have tried the following:
#{var text = HttpUtility.HtmlDecode(Model.AnswerText); }
#Html.TextAreaFor(m => text, new { #class="Textarea", placeholder=Model.QuestionPlaceholder })
And now the problem is that I can see properly the text, but it doesn't save.
I also have tried the following:
#Html.TextAreaFor(m => HttpUtility.HtmlDecode(m.AnswerText), new { #class="Textarea", placeholder=Model.QuestionPlaceholder })
but I get the following error:
update: I have tried the following:
<div class="InputField">
#Html.TextAreaFor(m => m.AnswerText)
</div>
but when I try to save & and then go back to the page and have a look I see &
How do you do this? It is Blazor, Razor, MVC, within an InputField
I didn't like how I solved it, but it works. There is probably a better way:
#Html.TextAreaFor(m => m.AnswerText, new { #class = "Textarea " + Model.ID, placeholder = Model.QuestionPlaceholder })
<script>
var elements = document.getElementsByClassName("Textarea " + #Model.ID)[0];
elements.value = unescapeHtml(elements.value);
function unescapeHtml(value) {
return String(value)
.replace(/&/g, '&')...;
}</script>
I have in my application a Kendo Multiselect component where I select my available options.
my View is like this:
div class="editor-field col-width45">
<div>
#(Html.Kendo().MultiSelectFor(model => model.FeaturesValues)
.DataTextField("Name")
.HtmlAttributes(new { #class = "size100Percent", Id = "FeaturesSelect" })
.DataValueField("Id")
.Placeholder("Selecione...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetFeatures", "Role");
})
.ServerFiltering(false);
}))
</div>
</div>
I want to select all the options at once, and not be selecting one by one.
I looked for a way to do this and all the solutions brought me to this result:
I added a button in my View.
I created a Js function to select all:
my code stayed like this:
div class="editor-field col-width45">
<div>
#(Html.Kendo().MultiSelectFor(model => model.FeaturesValues)
.DataTextField("Name")
.HtmlAttributes(new { #class = "size100Percent", Id = "FeaturesSelect" })
.DataValueField("Id")
.Placeholder("Selecione...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetFeatures", "Role");
})
.ServerFiltering(false);
}))
</div>
</br>
<div>
#(Html.Kendo().Button()
.Name("SelectAll")
.HtmlAttributes(new { type = "button" })
.Content("Selecionar todos")
.Events(ev => ev.Click("selectAll")))
</div>
JavaScript:
function selectAll() {
var multiSelect = $("#FeaturesSelect").data("kendoMultiSelect");
var selectedValues = [];
for (var i = 0; i < multiSelect.dataSource.data().length; i++) {
var item = multiSelect.dataSource.data()[i];
selectedValues.push(item.Id);
}
multiSelect.value(selectedValues);
multiSelect.trigger("change");
}
my result is this:
multiselect with button add all
Everything is working perfectly !!!
My question is:
Is it possible to create a checkbox inside the kendo Multiselect, to be used as select all, and not have this button?
What I want is something like this:
[multiselect without button][2]
enter image description here
You can add checkbox to header template which can be used to select - de select all elements.
Check this demo dojo
Though example here is shown using a Kendo UI JS, you can accomplish it using Kendo ASP.NET as well.
#(Html.Kendo().MultiSelect()
....
.HeaderTemplate("<label><input type='checkbox' id='selectAll'> Select All</label>")
I have prepared a quick dojo for you here. https://dojo.telerik.com/UpAFIdEx
This should hopefully be what you are after. I have just applied some simple styling just to get things looking a bit like your second image. but if you are using bootstrap or have css that handles positioning of elements this should work for you.
Any issues/questions let me know.
I want to add a blank selection item for KendoUi dropdownlist. I followed the same as mentioned in the below link.
http://www.kendoui.com/forums/ui/dropdownlist/how-to-allow-blank-selection-with-kendodropdownlist.aspx
But if I call the below in document.ready event,
$("#ddl").data("kendoDropDownList").one("open", function() {
$(this.ul[0].firstChild).html(" ");
});
I get error 'one' is null or undefined error. I have added the required reference files. What might be causing this? Is there any other way to add blank selection option?
I have defined the combobox as below in my mvc view.
<span class="list">
#(Html.Kendo().DropDownList()
.Name("facility").Events(events => events.Change("facilityChange"))
.OptionLabel(" ")
.DataSource(source => source.Read(read => read.Action("_GetFacilitiesForComboBox", "SuccessionInfo")))
.DataTextField("FacilityName")
.DataValueField("FacilityId")
.Value(Model.NextJobFacilityId.ToString())
.HtmlAttributes(new { style = "width:300px" })
)
</span>
Please help.
Achieved it by adding css
.k-popup .k-list .k-item {
min-height: 1.8em;
}
Reference - http://www.kendoui.com/forums/ui/dropdownlist/empty-selectitems-do-no-display-correctly.aspx
I am using mvc3 and razor is my view engine how i get date picker with out using scripts in my
view.
You can create a script in the directory scripts of your project.
Basic example:
$(document).ready(function () { $("#datepicker").datepicker({ });});
in your view:
#model YourProjectName.Models.User
....
<div class="editor-field">
#Html.TextBoxFor(model => model.Dateadd, new { #Value = DateTime.Now, id = "datepicker" })
#Html.ValidationMessageFor(model => model.Dateadd)
</div>
I think you are going to have to use a script, check out jqueryui datepicker. Its a nice easy to use library and supports theming
I answered here, check it out: http://forums.asp.net/post/4647234.aspx
Basically you're using a template with a script in one location and calling it with EditorFor.
To advisers here: it's a bad practice to use scripts inside partial views (templates).
In my case it does not work at all. Because accessing jquery happens before it's included as js file.
Plus you cannot predict where exactly you would put this datepicker control.
Also, you will have this "ready" block for every editor on the page.
RenderSection would bring some order to all this, but it does not work for partialviews and templates.
So just move javascript code from a template (partialview) to a view.
#model Nullable<System.DateTime>
#if ( Model.HasValue ) {
#Html.TextBox( "" , String.Format( "{0:yyyy-MM-dd HH:mm}" , Model.Value ) , new {
#class = "textbox" , #style = "width:400px;" } )
}
else {
#Html.TextBox( "" , String.Format( "{0:yyyy-MM-dd HH:mm}" , DateTime.Now ) , new {
#class = "textbox" , #style = "width:400px;" } )
}
#{
string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace( ".", "_" );
}
<script type="text/javascript">
$(document).ready(function () {
$("##id").datepicker
({
dateFormat: 'dd/mm/yy',
showStatus: true,
showWeeks: true,
highlightWeek: true,
numberOfMonths: 1,
showAnim: "scale",
showOptions: {
origin: ["top", "left"]
}
});
});
</script>
If you use an Editor Template for the DateTime type, you can use an HTML5 date picker (i.e. <input type="date" />). Essentially you put a view called DateTime.cshtml in a folder called Views/Shared/EditorTemplates, then you can style the editor however you like. One example is in an answer here.
Some examples I found that apparently worked with older versions of mvc suggest that there was a length parameter of sorts:
<%=Html.TextBox("test", 50)%>
But that may have been mistakenly setting the value.
How do this work in the current release? Passing in the style doesn't appear to have any effect.
The original answer is no longer working as written:
<%=Html.TextBox("test", new { style="width:50px" })%>
will get you a text box with "{ style="width:50px" }" as its text content.
To adjust this for the current release of MVC 1.0, use the following script (note the addition of the second parameter - I have mine starting as blank, adjust accordingly based on your needs):
<%=Html.TextBox("test", "", new { style="width:50px" })%>
For this you have to use HtmlAttributes, but there is a catch: HtmlAttributes and css class .
you can define it like this:
new { Attrubute="Value", AttributeTwo = IntegerValue, #class="className" };
and here is a more realistic example:
new { style="width:50px" };
new { style="width:50px", maxsize = 50 };
new {size=30, #class="required"}
and finally in:
MVC 1
<%= Html.TextBox("test", new { style="width:50px" }) %>
MVC 2
<%= Html.TextBox("test", null, new { style="width:50px" }) %>
MVC 3
#Html.TextBox("test", null, new { style="width:50px" })
Something like this should work:
<%=Html.TextBox("test", new { style="width:50px" })%>
Or better:
<%=Html.TextBox("test")%>
<style type="text/css">
input[type="text"] { width:50px; }
</style>
I -strongly- recommend build your HtmlHelpers. I think that apsx code will be more readable, reliable and durable.
Follow the link;
http://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.aspx
Don't use the length parameter as it will not work with all browsers. The best way is to set a style on the input tag.
<input style="width:100px" />
My real sample for MVC 3 is here:
<% using (Html.BeginForm()) { %>
<p>
Start Date: <%: Html.TextBox("datepicker1", DateTime.Now.ToString("MM/dd/yyyy"), new { style = "width:80px;", maxlength = 10 })%>
End Date: <%: Html.TextBox("datepicker2", DateTime.Now.ToString("MM/dd/yyyy"), new { style = "width:80px;", maxlength = 10 })%>
<input type="submit" name="btnSubmit" value="Search" />
</p>
<% } %>
So, we have following
"datepicker1" - ID of the control
DateTime.Now.ToString("MM/dd/yyyy") - value by default
style = "width:80px;" - width of the textbox
maxlength = 10 - we can input 10 characters only
new { style="width:50px", maxsize = 50 };
should be
new { style="width:50px", maxlength = 50 };
Set textbox with and maxlength in mvc3.0
#Html.TextBoxFor(model => model.SearchUrl, new { style = "width:650px;",maxlength = 250 })