I'm writing a web app in ASP.NET MVC using Kendo UI. I'm visualizing data in a Kendo Grid as follows:
#(Html.Kendo().Grid<MyModel>()
.Name("grid")
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax() // Specify that ajax binding is used
.Read(read => read.Action("ReadAction", "MyController", new { /*route values*/ }))
)
.Columns(columns =>
{
columns.Bound(n => n.Month).Title("Month").ClientTemplate("<input type='hidden' value='#=Month#' id='hfMonth'/>").Hidden();
columns.AutoGenerate(true);
})
.Pageable()
.Sortable()
Now I need to fire an update of the grid based on the change event of a <select>. How can I do this? I'm trying several possibilities from yesterday, with no success as all.
Without seeing your code for the combobox I would do the following:
View
#(Html.Kendo().ComboBox()
.Name("combo")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Foo", Value = "1"
},
new SelectListItem() {
Text = "Bar", Value = "2"
},
new SelectListItem() {
Text = "Baz", Value = "3"
}
})
.Events(events =>
{
events.Change("onChange");
})
)
JavaScript
function onChange(e) {
var grid = $("#grid").data("kendoGrid");
// if the selected value is not needed
grid.dataSource.read();
// if the selected value is needed use below instead
// changing the route parameter to match yours
var selectedValue = this.Value();
grid.dataSource.read({ id : selectedValue });
}
Update
As per #PierpaoloIlConteParis comments:
I didn't specify directly the parameters in the read.Action method, but instead I used the handler function like in this post telerik.com/forums/… Now when changing the combobox value the action fires with right parameters
Related
I am using kendo autocomplete control in my MVC project(Server side filtering).It list the data correctly. But the problem is when i submit the data to server the autocomplete value id is missing. Because there is no DataValueField attribute in this control. The bellow code is i am using
#(Html.Kendo().AutoComplete()
.Name("Patient")
.Placeholder("Enter Name")
.DataTextField("TextField")
.Filter("contains")
.MinLength(3)
.HtmlAttributes(new { style = "width:100%" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("function", "controller")
.Data("onAdditionalData");
})
.ServerFiltering(true);
})
)
How can i send the value to the server.
Thank you..
Since AutoComplete helper doesn't have DataValueField attribute, you need to use other HTML helper as workaround to pass another property value. Suppose your viewmodel has this setup:
public class ViewModel
{
// ID property example
public int PatientID { get; set; }
// other properties
}
You can create a hidden field or read-only textbox to store ID property mentioned above inside Razor view:
#Html.HiddenFor(m => m.PatientID)
Then, assign its value attribute from client-side script by creating a function which reads item index from autocomplete helper:
function selectPatient(e) {
var item = this.dataItem(e.item.index());
$('#PatientID').val(item.PatientID);
}
And finally set the function name bound for Events attribute:
#(Html.Kendo().AutoComplete()
.Name("Patient")
.Placeholder("Enter Name")
.DataTextField("TextField")
.Filter("contains")
.MinLength(3)
.HtmlAttributes(new { style = "width:100%" })
// add this line
.Events(ev => ev.Select("selectPatient"))
.DataSource(source => {
source.Read(read => {
read.Action("function", "controller")
.Data("onAdditionalData");
})
.ServerFiltering(true);
})
)
By following this setup, the PatientID property should have ID of the selected value from autocomplete helper when user submitted the form.
This is a known limitation of the AutoComplete widget. One way around it is to add an attribute via a template to store the data value on the control:
#(Html.Kendo().AutoComplete()
.Name("Patient")
.Placeholder("Enter Name")
.DataTextField("TextField")
.Filter("contains")
.MinLength(3)
.HtmlAttributes(new { style = "width:100%" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("function", "controller").Data("onAdditionalData");
})
.ServerFiltering(true);
})
.Events(events => events.Select("onPatientSelected"))
.Template("<span data-recordid=\"#= data.ID #\"> #: data.ID # – #: data.Name #</span>")
)
This assumes ID and Name are properties of the patient object.
Then you can handle the Select event to get the stored ID value when a selection is made:
function onPatientSelected(arg) {
var selectedPatientID = arg.item.find('span').data('recordid')
// do whatever with the ID, such as sending it to the server
}
You can access the dataItem in javascript, and then access the value property.
If you call myKendoAutoCompleteControl.dataItem() it will give you the currently selected item as an array of key/value pairs.
$("#myKendoAutoCompleteId").kendoAutoComplete({
dataTextField: "Text",
dataValueField: "Value",
dataSource: mydatasource,
filter: "startswith",
placeholder: "Search..."
//separator: ", "
});
var myKendoAutoCompleteControl =
$("#myKendoAutoCompleteId").data("kendoAutoComplete");
// once user has selected an item in the kendo auto complete control, you
can access the selected item.
var dataItemArray = myKendoAutoCompleteControl.dataItem();
var value = dataItemArray.Value
I am attempting to implement an Update on a current text area value.
The datatype is set for multiline in my model
[DataType(DataType.MultilineText)]
public string Text { get; set; }
When the page loads for the textarea, it does not populate.
#Html.TextAreaFor(a => a.Text, new { #Value = Model.Text })
But for a textbox it does populate
#Html.TextBoxFor(a => a.Text, new { #Value = Model.Text })
Is there something I'm missing? this seems pretty straight forward.
#Html.TextAreaFor(a => a.Text, new { id = "SomeID", placeholder = "Text", Value = Model.Text})
#Html.TextAreaFor(m => m.UserName) should be enough - ASP MVC takes care of populate current value from model to textarea.
Using { #Value = Model.Text } doesn't apply to textarea as it does not uses value attribute: How to add default value for html <textarea>?
This might be a duplicate question but I couldn't find the solution anywhere.
Below is the working code when I use single model object for dropdownlist
#Html.DropDownListFor(model => model.LocationId, new SelectList(Model.LocationItems,
"Value", "Text",selectedValue: Model.LocationId))
The above code works & the selected value is based on the model object i.e. index for drop down is location id.
However, when I use web grid I'm unable to set the selected value for the dropdownlist like
grid.Column(
header: "Locations",
format: (item) => #Html.DropDownList("LocationId", Model.First().LocationItems.Select(l => new SelectListItem
{
Text = l.Text,
Value = l.Value,
Selected = ((WebGridRow)item)["LocationId"].ToString() == l.Value
})))
The selected value in the drop down is always with index 1, where as it should be LocationId.
Is there any way to achieve this functionality?
You can add #Html.DropDownLists to grid in foreach like this:
List<WebGridColumn> columns = new List<WebGridColumn>();
foreach (var col in Model)
{
columns.Add(
new WebGridColumn()
{
header: "Locations",
Format = (item) => #Html.DropDownList("LocationId", #col.LocationItems.Select(l => new SelectListItem
{
Text = l.Text,
Value = l.Value,
Selected = ((WebGridRow)item)["LocationId"].ToString() == l.Value
}
)});
}
#grid.GetHtml(
columns: columns
I'm trying to develop a website using asp.net mvc 4 & EF6 where I'm using dropdownlist to assign datas to my required textboxes. So far I've managed to assign data to two textboxes where one holds the value of the selected item of dropdownlist & one holds the text given for the selected item. But I need to add another value from the selected item. My codes are below,
Controller
ViewBag.Clients = new SelectList(db.ClientInfoes, "age", "fullname"); //This is given
ViewBag.Clients = new SelectList(db.ClientInfoes, "id", "age", "fullname"); //I want something like this
View
#Html.DropDownList("Clients", "Select...")
// Textboxes are populated automatically by using jQuery
#Html.TextBoxFor(a => a.Fullname, new { id = "clientName", #readonly = "readonly" })
#Html.TextBoxFor(a => a.Age, new { id = "clientAge", #readonly = "readonly" })
How can I assign more than one value in the SelectList? Any way I can do that would be fine. Need this help badly. Thanks.
It looks like you want to show name and age both in the dropdown text, in that case you need to project the result coming from database :
var ClientInfoes = db.ClientInfoes
.Select(x=>
new {
id = x.id,
name = x.fullname+","+x.age
});
ViewBag.Clients = new SelectList(ClientInfoes, "id", "name");
I'm setting up a project with Kendo Ui for the first time, and I'm trying to create Kendo UI dropdown lists, but am getting:
ArgumentNullException was unhandled by user code.
--Value cannot be null.
My code is:
#(Html.Kendo().DropDownList()
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>()
{
new SelectListItem()
{
Text = "Active",
Value = "1"
},
new SelectListItem()
{
Text = "In-active",
Value = "2"
}
})
.Value("1")
) <-- the error is pointing to here.
Does anyone know what value is missing?
Thanks,
Each KendoUI component must have a name specified.
Add this:
.Name("whatYouWantForHtmlId")