I have so many kendo MVC UI textboxes and numerictextbox maximum character property in easy way ,
what are all the ways present to solve this
CODE:
there are so many text and numeric boxes like this
#Html.Kendo().TextBoxFor(model => model.CompanyTypeName).HtmlAttributes(new { style = "width:50px", #maxlength = "5" }).Name("CompanyTypeName")
You could look into using Editor Templates. Then you can make a single change to, for example, your String.cshtml file and all your EditorFor lines for string properties will utilize the same code.
Your code example above would change to:
#Html.Kendo().EditorFor(model => model.CompanyTypeName)
Then, you can add a String.cshtml file to your Shared/EditorTemplates folder that looks something like:
#model object
#Html.Kendo().TextBoxFor(model => model).HtmlAttributes(new { style = "width:50px", #maxlength = "5" })
Related
The below code works and I can create a measurement modal that displays the kgs, grams etc but was wondering if there is a way to do it as a dropdown select2 instead as the list is quite short. the two I've tried below show just the label but no select2 box. Any ideas? regards
$columns = [];
$columns[] = ['label'=>'Quantity','name'=>'quantity','type'=>'number','required'=>true];
$columns[] = ['label'=>'Measure','name'=>'measures_id','type'=>'select2','datatable'=>'measures,measure'];
$columns[] = ['label'=>'Measure2','name'=>'measures_id','type'=>'select2','validation'=>'required|integer|min:0','width'=>'col-sm-5','datatable'=>'measures,measure'];
// $columns[] = ['label'=>'Measure','name'=>'measures_id','type'=>'datamodal','datamodal_table'=>'measures','datamodal_columns'=>'measure','datamodal_select_to'=>'measure:measure','required'=>true];
Found how to do it by changing select2 to select.Not sure what the difference is.
From:
$columns[] = ['label'=>'Measure','name'=>'measures_id','type'=>'select2','datatable'=>'measures,measure'];
to:
$columns[] = ['label'=>'Measure','name'=>'measures_id','type'=>'select','datatable'=>'measures,measure'];
That's correct. Since I cannot comment I'll suggest you the difference by adding an aswer.
The difference is:
Select : Standard HTML element, rendered by the browser and working according to its own code.
Select2: Select2 is a jQuery library that "improves" your select elements by adding HTML code to render options and adding functions. For example, you may add a search box to filter your options, or you can style the dropdown better.
Library url : select2.org
I am trying to alternate a CSS class in a <fieldset>. Normally a #helper function would work fine (see the #helper below), however I have two (2) circumstances that won't allow it to work properly.
First, I am using a Input.Edit.cshtml field template in ~/Views/EditorTemplates/Fields.
This basically means that as I build up a form, the Input.Edit.cshtml file is being called each time for as many <input>'s as I have in my form.
Second, I am using a condition to check the path of the URL in order to only apply this CSS alternating class on pages below a certain path. Specifically, I want to apply this change to pages under my ~/Services path. On all other pages I do not want the change applied. I check this condition using Request.Url.AbsoluteUri as you see below.
This is where I think my problem lies, as the alternating code is applied but then because it is called again for the same condition on the same page it is applied incorrectly due to my logic.
Now it could be that I am just stuck with the problem.
Here is the code:
#{
string CurrentUrl = Request.Url.AbsoluteUri;
}
#helper ResponsiveCss(string cssClass)
{
if (ViewBag.count == null) { ViewBag.count = 0; }
<text>class="#(ViewBag.count % 2 == 1 ? cssClass : "one-half last")"</text>
ViewBag.count++;
}
#if (CurrentUrl.Contains("Services"))
{
<fieldset #ResponsiveCss("one-half")>
//Label and Input code
</fieldset>
}
What should happen is that the class="one-half" is applied on the first <fieldset> that is created in the form, and then class="one-half last" on the second that is created.
Instead what is happening is that class="one-half" is NOT being applied on the first <fieldset> that is created, but rather ALL <fieldset>'s are being created with class="one-half last".
Sorry if that is not clear. Any thoughts on if I can make this work given the circumstances (and how)? Thanks.
Hopefully this solves your problem.
Alternating style
Instead of alternating the class name, you can use the nth-of-type or nth-child pseudo-classes.
fieldset:nth-of-type(odd) {}
fieldset:nth-of-type(even) {}
See this example: http://jsfiddle.net/cx9UG/
Note: These pseudo-classes can also be used in JQuery selector and document selector (querySelector and querySelectorAll)
CSS depending on URL
This is really CSS depending on the view. Just create two CSS bundles then apply in to the appropriate views.
View with alternating style #Styles.Render("~/Content/alternating")
View without alternating style #Styles.Render("~/Content/mono")
The EditorTemplate should not need to know the URL.
I am using a WebGrid to display a list of items,
I like to set the background color of the rows based on a condition. I want to set the background color of the entire row, not just one cell.
Any example?
thank you
This is an old question, but I just stumbled upon it and have an answer that I don't think is too hacky. The previous answer supplied only works if the value you're using to conditionally change the background color is the value of a table cell.
If that's not the case, you can set a data- attribute for the first cell in your table rows using the Format property of a WebGridColumn. Here, the first column of my table contains hyperlinked IDs. I'm defining it in my code-behind (controller action in MVC) and I've added a data-in-error attribute from the IsInError property of my object. You can set the value of this attribute in whatever way makes sense for your application.
new WebGridColumn
{
ColumnName = "Id",
Header = "ID",
Format = (x) => new HtmlString(String.Format("{1}", x.Value.IsInError, x.Value.Id))
});
Then, using jQuery, I find all of the rows in my table that have an anchor in the first cell of the row, and set the class of that row to 'error'.
$(document).ready(function () {
$('table tbody tr td:first-child a[data-in-error="True"]').each(function () {
$(this).parent().parent().addClass('error');
});
});
Hope this helps.
Is jQuery an option? If so, check out: http://devpinoy.org/blogs/keithrull/archive/2010/06/09/how-to-change-table-cell-color-depending-on-its-value-using-jquery.aspx
We're using the Html.DropDownList and other controls in various MVC3 user data entry forms.
When a user is editing a records data values and they haven't specified values for a DropDownList then the optionLabel text of 'Select One' is displayed in the input field.
We'd like to make it more obvious to the end-user when they're viewing a screen of data that 'Select One' isn't a data value by showing it in a different font colour (blue ?) and in italics.
Has anyone any ideas how to simply achieve this ?
If the DropDownList is required... just mark that field as requiered using the somehow standard red "(*)". If the user submit the form, the client side validation will display the message telling the user that this field is required.
The level of customization of the <select> HTML element is pretty limited. IIRC you could change the color but I am not sure that you can show it in italics:
#Html.DropDownListFor(
x => x.Foo,
Model.Foos,
"-- select a foo --",
new { #class = "foo" }
)
and then in your CSS file define the .foo rule:
.foo option:first-child {
color: red;
}
If you want more customizations of the look and feel of the standard <select> element you might take a look at some of the available jQuery plugins.
Is it possible to render a Grid with one row selected as default (set the right page number and highlight the row)?
For highlighting, try using the "OnRowDataBound" event
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
with something like
function onRowDataBound(e) {
var myId = $('#MyId').val();
if (e.dataItem.Id == myId)
e.row.className = 't-state-selected';
}
I'm still trying to figure out how to set the correct initial page number. This bloke might be on to something.
Use the Grid RowAction method, eg:
.RowAction(row => row.Selected = row.DataItem.CustomerCode.Equals(ViewBag.ID))
It is perhaps possible if you iterate in the grid source, locate the row which has to be selected in it, than use a formula to detect on which page will be displayed, and finally change the page index on initial load and select it.