I'm wanting to create a login page using the Telerik Kendo UI Textboxes so I will need my password input masked. Does anyone have any suggestions? I've tried:
.TextBoxFor(m => m.Password)
.HtmlAttributes(new { type = "password" })
below is my code as pretty much standard it is:
#(Html.Kendo().TextBox()
.Name("password")
.Placeholder("Password")
.Label(label => label
.Content("Password")
.Floating(true)
)
.HtmlAttributes(new { style = "width: 100%;border-radius: 7px;border-color: #ff4d41;" })
)
Getting to the stage I'd be faster just creating my own textboxes lol
as per my understanding based on your question
you need to add type="password" in kendo UI control.
Like below code
#(Html.Kendo().TextBox()
.Name("password")
.Placeholder("Password")
.Label(label => label
.Content("Password")
.Floating(true)
)
.HtmlAttributes(new {type="password", style = "width: 100%;border-radius: 7px;border-color: #ff4d41;" })
)
Output
As we know Password HTML helper available in MVC.
#Html.Password()
#Html.PasswordFor()
Related
I have a SQL Table result.
ProductNumber ProductNumberColorClass OrderNumber OrderNumberColorClass
I am trying to use Kendo to render this information. Basically i need the output as
ProductNumber OrderNumber
Data value and Apply Css class( ProductNumberColorClass )
Basically this is a report with a lot of columns. The user can select only the columns that he wants to see.
I am able to render the grid using the examples from the web site. I am not able to apply.
My application is Asp.net mvc application
Update
I will try your feedback. This is my code. Basically i wanted to avoid coding for each column as the list is big around 50 . the report can be customized so the user can hide some columns. .So i used a loop. however in this scenario, the clienttemplate is not work. I am not very sure, if it is a code issue too.
If you can find what is wrong in my code it will help me learn about the issue too.
meanwhileI am going to manually type the columns and add a attribute as visible
#(Html.Kendo().Grid <DataTransferObjects.ViewModels.UserReportDataModel>()
.Name("Grid")
.HtmlAttributes(new { style = "height: 550px;" })
.Pageable(pageable => pageable
.Input(true)
.Numeric(false)
)
.Sortable()
.Scrollable(
scr => scr.Height(430)
)
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetReportData", "ShortTermPlanner").Data("AdditionnalParameters"))
.PageSize(20)
.ServerOperation(false)
)
.Columns(columns =>
{
var colIndex = 0;
foreach (var col in Model.lstHeaderInformation)
{
if (col.SqlColumnName == "ProductNumber")
{
columns.Bound(col.SqlColumnName)
.Title(col.ColumnHeader)
.Filterable(false)
.Visible(col.IsVisible)
.Width(1190)
.ClientTemplate("<div style='background-color:red; text-align:center;width:70px'> #= ProductNumber # </div>");
}
else
{
columns.Bound(col.SqlColumnName)
.Title(col.ColumnHeader)
.Filterable(true)
.Visible(true)
.Width(300)
.Locked(true)
.HtmlAttributes(new { #class = "selectedRow" });
}
}
})
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
)
Update 2 Adding the clienttemplate and specifying the column information worked. Thanks
However i am curious, is there a better way where i can loop through a 3 table which defines the column name, title and class that needed to be displayed and applied to my report.
what i am looking is
MY Report -- Select * from Report
My header table Select colname, title, class from reportcoldefinication
so now for each matching colname from reportcoldefinication
and Report. add a col to the grid with the class applied.
You can use the template functionality for columns in the Kendo grid.
columns.Template(#<div class= '#=ProductNumberColorClass #'> #= ProductNumber#<div/>)
Have implemented one in the example in the below link. Its implemented using JQuery but you can use the razor syntax for kendo for achieving the same.
http://dojo.telerik.com/ukIma/3
There's a few questions on similar topics. However, they don't actually address my issue.
DisplayFormat for TextBoxFor in MVC
Display a formatted date in an EditorFor()
ASP.NET MVC EditorFor DateTime
I've been searching and reading up and cannot find an answer to this.
I'm currently using this to format my input box:
#Html.TextBoxFor(modelItem => item.Quantity, new { style = "width: 30px;" })
From my model, I have the brief data annotation:
[Required, Range(1, 100)]
public int Quantity { get; set; }
So I get this:
When I use
#Html.EditorFor(modelItem => item.Quantity, new { style = "width: 30px;" })
I get this:
What I want is the scroll, but to format the width.
I'm wondering, is there a way to format the width of an EditorFor with data annotations? If not, what is the easiest way to make such a format, to avoid repetition.. bootstrap, css? I'm not happy with the inline styling.
From the comments, your using MVC-4. You cannot pass html attributes to the EditorFor() method unless your using MVC-5.1 or higher (refer the release notes - the section on Bootstrap support for editor templates)
One option is to use the TextBoxFor() method and pass type="number" to render the browsers numeric control
#Html.TextBoxFor(m => m.Quantity, new { type = "number ", style = "width: 30px;" })
Another would be to create a custom EditorTemplate (say _NumericControl.cshtml)
#model System.Int32
#Html.TextBoxFor(m => m, new { type = "number ", style = "width: 30px;" })
and call it using #Html.EditorFor(m => m.Quantity, "_NumericControl")
but this would really only be of any real benefit if the template were also to include other html elements, for example #Html.LabelFor(m => m) and #Html.ValidationMessageFor(m => m) and perhaps even the associated button so that the EditorFor() method renders all elements.
I use Kendo validator in my MVC application and want to change the position of validation message from below to right of the input. Although the html code of Kendo UI validation appears right of the input, the same code shows validation message below the input instead of right of it. Is there any mistake or how to convert it to razor? Please note that there is no space between "required" and "validationmessage" in razor code, but when using it as html code an error encountered. Any idea?
You might have a look at: http://jsbin.com/kubohuniki/1/edit?html,output
This line shows validation message on "right" of the input:
<label>Label RIGHT</label>
<input id="Name" class="k-textbox" required validationmessage="required field" />
This line shows validation message on "below" of the input:
<label>Label BELOW</label>
#Html.Kendo().TextBoxFor(m => m.Name, new { #class="k-textbox", requiredvalidationmessage="required field" })
try this (updated)
#Html.TextBoxFor(m => m.Question, new { #class = "k-textbox",
required = "true", validationmessage = "required field" })
#Html.ValidationMessageFor(model => model.Question)
I am trying not to generate autocomplete in browser for that I am trying this
#Html.TextBoxFor(
model => model.UserName,
new { #class = "form-control", autocomplete = "off" })
#Html.ValidationMessageFor(m => m.UserName, "", new { #class = "text-danger" })
which generate HTML like this
<input type="text" value="" name="UserName" id="UserName" data-val-required="User name is required." data-val="true" class="form-control" autocomplete="off">
In other views I have use the same and it is working fine. but in login view autocomplete="off" not working. for doing so I have clear model state like this in controller
ModelState.Remove("UserName");
reference taken from the following sites
How to Turn Off Form Autocompletion
Disable autocomplete on html helper textbox in MVC
How to disable autocomplete in MVC Html Helper
Remove browser autocompletion in MVC
I still wonder what is wrong in my code? Your suggestion means a lot to me.
As per Bharat's answer it actually, the issue is not of the autocomplete,
the issue comes from the browser's saved logins.
but we can overcome this without going to clear saved passwords of the browser.
As per my intention, all browsers doing similar duties that the field before the password is assumed as Username and it uses the last logged in data will be pasted automatically even if we do autocomplete="off".
The solution is to make the password's field autocomplete="new-password", but this will work only in HTML5 or above supported browsers only...
The issue comes from the browser's saved logins.
When these issue arise at my side, i removed saved logins from my browser and it solved my issue.
visit https://support.mozilla.org/en-US/questions/962690
https://support.google.com/chrome/answer/95582?hl=en
It is Working in MVC 5, to auto-complete off
#Html.TextBoxFor(model => model.UserName,
new { #placeholder = "UserName", #id = "txtUserName", #autocomplete = "new-user" })
#Html.PasswordFor(model => model.Password,
new {#placeholder = "Password", #id = "txtPassword", #autocomplete = "new-password" })
I have a telerik grid with a checkbox. I am using a client template. There is a .DataBinding Ajax call attached.
When the grid initially comes up, instead of a checkbox, it has the id value as text.
If I hit refresh, the ajax call gets executed and when it comes back the checkbox appears. Is there any way to force the ajax call to happen when the grid initially paints so that I have a checkbox and not text ...
Code sample:
<% Html.Telerik().Grid(Model.AdminSongQueue)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.UserTrackAssignmentID)
.ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= UserTrackAssignmentID #>' />")
.Title("Check")
.Width(50)
.HtmlAttributes(new {style="text-align:center"});
})
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("_CheckBoxesSongGrid", "RightsToolSvc"))
.Scrollable()
.Pageable()
.Render();
%>
Yes, this is possible: You just have to call the empty constructor of the Grid class like this and the grid binds by calling the ajax select method for the initial data load, too:
Html.Telerik().Grid<YourModelDataType>().Name("Grid")...
In my View (viewname.cshtml, MVC) I added the following before my .ClientTemplate:
.Template(
#<text> <input type='checkbox' id='chkMessage' name='checkedMovies' value='<#= ID #>' /> </text>)
...
This post is related, I found my answer here