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.
Related
I have used vue vform for my form, here is the function to edit modal,
editModal(household){
this.form.reset();
$('#addNewHouseholdModal').modal('show');
this.form.fill(household); // this line fills the form with data to be edited
}
But I have form fields for which data is stored in another table. I have received the data but mnot able to figure out how to display them in the form. Please help me with it. Below is the household data i have passed in my form above.
id: 1
address_details_id: 14
ward: 2
house_no: "2"
family_no: "45"
geolocation: "{"latitude":"1.1","longitude":"1.1"}"
address_details: Object
id: 14
province: "23"
name: "Strret"
All details are filled in the form except Address details which is an object, how do I fill name from address details in the form? Thank you. Help will be appreciated.
I think you need to pass first the data before you open the modal.
editModal(data) {
isEditting = true
this.form.family_no = data.family_no
this.form.house_no = data.house_no
this.form.address = data.address
$('#addNewHouseholdModal').modal('show');
}
and then you form must be like this
<modal>
<input type="text" v-model="form.family_no" />
<input type="text" v-model="form.house_no" />
<input type="text" v-model="form.address" />
<modal>
How can I bind a local array to the MVVM dropdownlist of kendo.
I have an array like this
var array = [0.0, 20.00]
and I want to bind it to my input control
<input data-role="dropdownlist"
data-bind='"source: ' + array + '"' />
Its not working. Any ideas how I can achieve this?
thanks
The MVVM source binding accepts model field, and not a variable in the window scope. If you would like just bind the DropDownList to primitive values, then use the data-source attribute:
<input data-role="dropdownlist" data-source="array" />
Here is a runnable demo.
If you would like to use the source binding, then define a view model. Here is another demo that demonstrates this approach.
It's hard to tell from your question whether you have forgotten to use kendo.bind() to bind the View to the ViewModel but I suggest you also review the Kendo UI Framework Source Binding documentation for the syntax of data-bind. Also check the DropDownList MVVM Demo for a more complete example. A minimalist implementation is shown below:
<body id="appRoot">
<p>Minimalist DropDownList example</p>
<input data-role="dropdownlist" data-bind="source: array">
<script>
// Ideally you would use this viewModel variable instead of the plain JavaScript object literal below
var viewModel = kendo.observable( { array: [ 0.0, 20.00 ] } );
kendo.bind($("#appRoot"), { array: [ 0.0, 20.00 ] } );
</script>
</body>
I want to show datas retrieved from database in a form and I am using spring MVC in my project.
I know in knockout to set a value in input textfield we use like
ko.observable("somevalue");
for example in this fiddle
and but we are assiging this somevalue in javascript code.My values are retrived from server and to show data I used
<input class="span8" type="text" data-bind="value: name" data-required="true" data-trigger="change" name="name" value="${currentpatient.user.name}">
but in this way the data is not getting printed.So can any body please tell me how to dynamic values
My values are retrived from server and to show data I used but in this way the data is not getting printed
For example your server returned a User instance that has properties such as: firstName and lastName,
then to access these properties you do in jsp like:
to get firstName: ${user.firstName}.
same to get lastName: ${user.lastName}.
to get access inside knockout.js do like:
// Here's my data model
var ViewModel = function() {
this.firstName = ko.observable('${user.firstName}');
this.lastName = ko.observable('${user.lastName}');
};
ko.applyBindings(new ViewModel()); // This makes Knockout get to work
I am trying to use the new Kendo UI grid from asp.net mvc 3.
I am having a table the table is generated automatically from a controller in asp.net mvc 3.
And display it with Kendo.ui grid.
However, I am having the html code inside of the cells instead of the html controls
Example:
it display in the cell: <input checked="checked" class="check-box" disabled="disabled" type="checkb.. instead of an input, the code in the View is #html.input
or Edit | Details | <a href="/Adm instead of a link ( code in the View is #Html.actionLink)
How can I make it encode html code ?
This is my script:
$(document).ready(function() {
$("#calendrierMatch").kendoGrid({
});
});
Thanks
The KendoUI Grid automatically encodes the content of the grid, that's why you get the text <input type= ... instead of the actual input controll.
You can disable the encoding for a given column with using the encoded options (see documentation):
encoded: Boolean(default: true) Specified whether the column content
is escaped. Disable encoding if the data contains HTML markup.
So you need something like:
$(document).ready(function(){
$("#grid").kendoGrid({
//...
columns: [
{
field: "Column containing HTML",
encoded: false
}
]
});
});
in model binding kendo grid Razor Html Page use this code
#Html.Kendo().Grid(Model).Name("GridName").Columns(col =>{
col.Bound(m => m.ID);
col.Bound(m => m.Name);
col.Template(#<text>
#Html.Raw(HttpUtility.HtmlDecode( item.Text))
</text>);
})
You need to add the template feature of kendo grid.
In the below code i have created a text box inside the cell of kendo grid.
{
field: "Total",
title: "Total",
width: "40px",
template: "<input type='text' class=\"quantity_total\" id='txtTotal_${ItemId}'
name='txtTotal_${ItemId}' maxlength='8' onkeypress = 'return
fnCheckNumeric_total(event,this.id)' />"
},
Good evening everyone I have a question regarding validation of drop-down list values. I have a view that is bound to a view model type called ReservationData.
This object contains a property CustomerVehicles of type List<VehicleData>. VehicleData has two int properties VehicleMakeId and VehicleModelId.
On my view I am trying to loop over the number of items in the CustomerVehicles collection and displaying two dropdowns for each, a vehicle make dropdown and a vehicle model dropdown using DropDownListFor.
When I try to submit and validate I do not see any validation errors displayed on the screen.
Just in case you are wondering I have added a ValidationMessageFor for each dropdown as well. I am not sure if this is an issue with the structure of my view model and its complexity and how the controls need to be named or how the ids need to be set. Any help would be greatly appreciated.
Here is the code for the looping over the collection:
#for (var i = 0; i < Model.CustomerVehicles.Count(); i++)
{
var vehicleNumber = i + 1;
<div class="vehicle-selection-wrapper">
<div class="content-container">
<h3>
Vehicle #vehicleNumber</h3>
<img class="vehicle-image" alt="manufacturer image" src="#Url.Content("~/Content/images/default-vehicle.gif")" /><br />
#Html.LabelFor(m => m.CustomerVehicles[i].VehicleMakeId)
#Html.DropDownListFor(m => m.CustomerVehicles[i].VehicleMakeId
, new SelectList(Model.VehicleMakes, "Id", "Name")
, #UIDisplay.Dropdown_DefaultOption, new { #class = "long-field" })<br />
#Html.ValidationMessageFor(m => m.CustomerVehicles[i].VehicleMakeId)<br />
#Html.LabelFor(m => m.CustomerVehicles[i].VehicleModelId)
#Html.DropDownListFor(m => m.CustomerVehicles[i].VehicleModelId
, new SelectList(new List<CWR.Domain.VehicleModel>(), "Id", "Name")
, #UIDisplay.Dropdown_DefaultOption, new { #class = "long-field" })
#Html.ValidationMessageFor(m => m.CustomerVehicles[i].VehicleModelId)
</div>
</div>
}
Ok so I also noticed that in the generated HTML the selects that are generated are missing the HTML5 data-val attributes that are associated to elements to handle validation. Here is the generated HTML
<select class="long-field" id="CustomerVehicles_0__VehicleMakeId" name="CustomerVehicles[0].VehicleMakeId"><option value="">-- Select --</option>
</select><br />
<span class="field-validation-valid" data-valmsg- for="CustomerVehicles[0].VehicleMakeId" data-valmsg-replace="true"></span><br />
<label for="CustomerVehicles_0__VehicleModelId">Model</label>
<select class="long-field" id="CustomerVehicles_0__VehicleModelId" name="CustomerVehicles[0].VehicleModelId"><option value="">-- Select --</option>
</select>
<span class="field-validation-valid" data-valmsg-for="CustomerVehicles[0].VehicleModelId" data-valmsg-replace="true"></span>
Additionally in my VehicleData class the VehicleMakeId and VehicleModelId properties are decorated with a Required attribute.
UPDATE:
Ok so I was testing and noticed that if I keep my code identical except I swap the Html.DropdownListFor calls with Html.TextboxFor calls then the validation works. What could be causing this? Could it be a framework bug with the unobtrusive validation?
UPDATE: Contains Fix
So after posting this same question on the ASP.NET Forums, I was able to get a solution. In the post you will be able to see that there is a bug in the unobtrusive validation framework and how it handles validation of dropdownlists. The user counsellorben does a good job in explaining the problem as well as a solution (including sample code) that will assist others in avoiding this issue in the future, or at least until Microsoft builds in a fix in to the framework.
Thank you everyone for your assistance.
I too have come across this obviously massive oversight regarding client side validation with dropdownlists in MVC 3 and the best solution I can offer is to put the missing HMTL attributes in yourself.
In your view model create a property like this.
public Dictionary<string, object> CustomerVechicleAttributes
{
get
{
Dictionary<string, object> d = new Dictionary<string, object>();
d.Add("data-val", "true");
d.Add("data-val-required", "Please select a Vechicle.");
return d;
}
}
Then in your code, enter
#Html.DropDownListFor(m => m.CustomerVehicles[i].VehicleMakeId
, new SelectList(Model.VehicleMakes, "Id", "Name")
, #UIDisplay.Dropdown_DefaultOption,
**Model.CustomerVechicleAttributes** })
Just add the Model.CustomerVechicleAttributes as htmlAttributes to your dropdownlist.
This will inject the necessary attributes that are missing. You will of course need to add any other attributes you may need like your class attribute.
Hope this helps.
This is the simpliest way I found to do it, just adding data-val-*-* attributes in HtmlAttributes of DropDownListFor, inside the view. The following method works with RemoteValidation too, if you do not need remote validation, simply remove the elements containing data-val-remote-*:
#Html.DropDownListFor(m => m.yourlistID, (IEnumerable<SelectListItem>)ViewBag.YourListID, String.Empty,
new Dictionary<string, object>() { { "data-val", "true" },
{ "data-val-remote-url", "/Validation/yourremoteval" },
{ "data-val-remote-type", "POST" }, { "data-val-remote-additionalfield", "youradditionalfieldtovalidate" } })
I hope it may help. Best Regards!
you should try to add data annotations on your view model properties first so you could see the validation messages.
you might find what you need here
http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.aspx
or create custom ones if needed.
what exactly do you need to validate?
I had exactly the same problem with the field getting correctly validated in TextBoxFor but not in DropDownListFor.
#Html.DropDownListFor(m => m.PaymentTO.CreditCardType, Model.CreditCardTypeList, "Select Card Type", new { style = "width:150px;" })
Since I had another DropDownListFor working on the same page, I knew that it wasn’t a generic DropDownListFor problem. I also have a complex model and parent object PaymentTO wasn’t initialized. When I set viewTO.PaymentTO = new PaymentTO(); in the Controller, the validation for the DropDownListFor started to work. So there is probably a problem with DropDownListFor, but the fix can be as simple as initializing the object in the controller.