I am a beginner to kendo controls. What's the use of Content method and Name method in kendo controls?
<%=Html.Kendo().Button()
.Name("textButton")
.HtmlAttributes( new {type = "button"} )
.Content("Text button") %><br /><br />
Name is actually the id attribute which we use in html,and,content is the text of that control.
Related
I have a kendo window defined in a cshtml file and opened from the client side via javascript. The window is meant to display error messages from validation checks done in javascript. Is there a way to pass a string to the window from javascript?
Here's the window definition in the cshtml file:
#(Html.Kendo().Window()
.Name("ErrorWindow")
.Title("INVALID")
.Content(#<text>
<div class="metro" style="height:136px; padding-left:30px; padding-top:20px">
<div style="padding:0px 20px 3px 0">
<div>
<p id="ErrorInfo">
</p>
</div>
</div>
<p style="padding-top:20px; padding-left:0px; padding-bottom:20px">
#(Html.Kendo().Button()
.Name("closeErrWndButton")
.HtmlAttributes(new { type = "button", #class = "k-primary", #style = "min-width:90px" })
.Tag("span")
.Content("OK")
.Events(ev => ev.Click("CloseErrorWindow"))
)
</p>
</div>
</text>)
.Modal(true)
.Resizable()
.Width(560)
.Visible(false)
)
Here's how it's opened in javascript:
var wnd = $("#ErrorWindow").data("kendoWindow");
wnd.center().open();
I'm hoping to do this completely client side if possible, ie. no ajax call.
It sounds like you want to raise a 'kendo-themed' message dialog box for the user to peruse.
Consider using the Kendo UI Dialog component. The examples state
Description
The Kendo UI Dialog is a modal popup that brings information to the user. It also provides actions through the action buttons to prompt the user for input or to ask for a decision. The component can also contain more complex UI elements that require the focus of the user. The Dialog widget is a subset of the Kendo UI Window widget where the most prominent difference is the added functionality for actions.
The example shows using an existing div as the basis of the dialog. You can however use a more sophisticated approach that will dynamically create, attach and destroy the dialog basis, all within a single closure function.
Is there any way I can set a kendo ui dropdowns data source to a property of an object? Example.
If I have following object
Person:{
FirstName: 'Nilesh',
Gender: 'Male',
GenderList:['Male','Female']
}
If I have a form in which I show a text box for the first name and a dropdownlist for the gender, I want to bind the kendo ui dropdownlist to the GenderList Property of the object.
I want to do this in angularjs
Is this even possible? If yes how can we get this to work?
I used following html to render the kendodropdown list.
<input kendo-drop-down-list k-data-source="Person['GenderList']" />
but this does not work.
Any help appreciated.
I have tested your code and this works for me:
In your controller:
$scope.Person = {
FirstName: 'Nilesh',
Gender: 'Male',
GenderList: ['Male', 'Female']
}
In your html:
<input kendo-drop-down-list k-data-source="Person['GenderList']" />
The only difference is var Person is declarate into $scope. This is necessary for angular data-binding.
I am trying to use the place holder in DropDown but it's not taking. please help to find out how to add the placeholder in DropDown List :
#Html.DropDownList("Category", ViewData["Category"] as IEnumerable<SelectListItem>, new { #class="flexselect form-control" ,#placeholder="---Select---"})
First for placeholder you don't need to use # at the beginning of it, '#' is only for class. for DropDownList set default text:
#Html.DropDownList("Category", ViewData["Category"] as IEnumerable<SelectListItem>, "---Select---", new { #class="flexselect form-control"})
I am creating a static using Html.LabelFor(...).
I have to set Name attribute of the label dynamically using JQuery.
You can set the css class, and set inline styles and any other attribute (even non-existant ones like name) using the htmlAttributes parameter provided in one of the overloads of LabelFor
ie
<%: Html.LabelFor(model=>model.Title,
new { style="xyz", #class="abc", #name="MyTitle" }) %>
this would create a label something like:
<label for="Title" style="xyz" class="abc" name="MyTitle">Title</label>
The reason for the # before class, is that "class" is a reserved word in c#, so you need to qualify it using the # symbol.
If I understand your question and comments together, you're just trying to change the text of a label. The MVC LabelFor turns into an HTML <label> and that doesn't have any attributes like a text box does.
If you need to change it with JS/jQuery then give it an ID and use the html method.
Markup:
#Html.LabelFor(m => m.Something, new { id = "somethingLabel" })
#Html.TextBoxFor(m => m.Something)
jQuery:
$("#somethingLabel").html("New Label Text");
You could also use text instead of html - the difference is just that it escapes the input.
I'm using MVC 3 with razor as the view engine and the unobtrusive client validation enabled.
I'm trying to create a form where the user has a radio button group to select their preferred contact method - either phone or email. Depending on the option selected, I want to show the appropriate textbox, but then also enable/disable the required validator for the appropriate textbox.
My markup looks something like this at the moment (Just starting out with MVC so please point out any obvious mistakes):
<div id="prefferedContact">
<p>Preferred Contact Method *</p>
<input type="radio" id="contactMethodEmail" name="PreferredContactMethod" value="email" #if (Model.PreferredContactMethod != "phone"){<text>checked="checked"</text>} /> <label for="contactMethodEmail">by email</label>
<input type="radio" id="contactMethodPhone" name="PreferredContactMethod" value="phone" #if (Model.PreferredContactMethod == "phone"){<text>checked="checked"</text>} /> <label for="contactMethodPhone">by phone</label>
</div>
<div id="contactMethodDetails" class="formItem">
<div id="emailAddressBox">
#Html.LabelFor(x => x.Email, "Email address")
#Html.TextBoxFor(x => x.Email, new { #class = "textbox" })
</div>
<div id="phoneNumberBox">
#Html.LabelFor(x => x.PhoneNumber, "Phone number")
#Html.TextBoxFor(x => x.PhoneNumber, new { #class = "textbox" })
</div>
</div>
</div>
</div>
There's some jquery function that adds an onclick event to the radio buttons to toggle between the two boxes depending on the selected value.
The Model - for these specific fields - doesn't have any required validation on it at the moment but is binding fine. Also, validation is working on other fields as expected
I really just need to get an idea of:
(a) is it possible to toggle validation on and off
(b) does this impact the ModelState validation in anyway (or do I need to customise it)
I had also thought of having the one textbox for the contact data, but I wanted to have regular expression validation for the email and for the phone number separately. If I was to have a single textbox, could I switch the validation rules on the textbox depending on the selected option???
Hope that's clear enough with enough information.
Thanks
Joel
You can perform class-level validation if you need to enforce rules based on multiple properties:
http://weblogs.asp.net/scottgu/archive/2010/12/10/class-level-model-validation-with-ef-code-first-and-asp-net-mvc-3.aspx
Unfortunately, this seems to only work server-side, so you'd have to implement custom client-side validation.
Another option would be to have two different models, one for each scenario (with common properties in a base class), but this might be a little more complicated.