This question about Telerik MVC Grid.
I have two Grids with Master->Details relationship. These to grids are loaded using Ajax Binding. I want to create new Item in Details grid and pass ProductId field value from Master grid.
I have added property below but do not know how to get ProductId from Master grid. I have tried to pass value using ViewBag on Detail child loading it it seems ViewBag is not assigned then Ajax call is performed. Maybe someone know how to solve this problem?
Editable(editing => editing.DefaultDataItem(new UserViewModel { ProductId = ?????? })
When you have Master Grid and Detail Grid,
and you want to create record in the Detail Grid ,
You should add JavaScript logic which uses the OnSave event of the Detail Grid to pass additional value to the server (it should be the selected record in the Master Grid).
Check the documentation there are examples.
Have you tried using client side template for this?
Editable(editing => editing.DefaultDataItem(new UserViewModel { ProductId = <#= ProductId #> })
If you're using Ajax binding, you could also pass the parent's ID on insert:
dataBinding.Ajax().Insert("_Insert", "SubItem", new { productId= "<#= ProductId #>" }));
Don't forget to set your DataKey of the parent grid
.DataKeys(keys => keys.Add(c => c.Id))
Related
I am trying to populate a dropdown from another Controller. I have DeviceController that has a #Html.DropDownList that get populated. Originally I have the code that populates the DropDown in the controller. Now I am trying to move it to a Controller designated for dropdowns. So I have the code to populate the dropdown in one location instead of the same code in multiple Controllers. The dropdown loads correctly when I have it in the original controller however when I move it the DropDown controller I receive the following error There is no ViewData item of type 'IEnumerable<SelectListItem>' that has the key 'DropDownDeviceType'.
The code for my view -
#Html.DropDownList("DropDownDeviceType", null, htmlAttributes: new { #class = "form-control" })
From my DropDownController (If I have this code in my DeviceController it works as intended)
public void PopulateDevciceType(object selectDeviceType = null)
{
string voidInd = "N";
var deviceType = db.DeviceTypes
.Where(x => x.VoidInd == voidInd)
.OrderBy(x => x.DeviceType1);
//ViewData["DropDownDeviceType"] = new SelectList(deviceType, "DeviceTypeID", "DeviceType1", selectDeviceType);
ViewBag.DropDownDeviceType = new SelectList(deviceType, "DeviceTypeID", "DeviceType1", selectDeviceType);
}
In my DeviceController
//Populate dropdowns
DropDownController dropDown = new DropDownController();
dropDown.PopulateDevciceType(model.DeviceTypeID);
I understand your desire to farm out certain tasks to dedicated classes. However, I think you are overthinking this a little bit.
I'm not 100% sure what that error is actually telling you in terms of your code, but it seems like you've probably got some wonky view returns because your setting the ViewBag information within a different controller than the one that returns the view. Am I understanding that part of it correctly?
Instead of creating another controller class, create a static function somewhere that handles the list creations and ONLY the list creations. When it creates a list, have it return it.
Then, whenever you need a list to be populated, do this in the relevant controller method:
ViewBag.DropDownDeviceType= *wherever-your-static-method-is*.PopulateDeviceType(model.DeviceTypeID);
I can't figure out how to determine which item is selected in the my kendo dropdownlist. My view defines it's model as:
#model KendoApp.Models.SelectorViewModel
The ViewModel is defined as:
public class SelectorViewModel
{
//I want to set this to the selected item in the view
//And use it to set the initial item in the DropDownList
public int EncSelected { get; set; }
//contains the list if items for the DropDownList
//SelectionTypes contains an ID and Description
public IEnumerable<SelectionTypes> ENCTypes
}
and in My view I have:
#(Html.Kendo().DropDownList()
.Name("EncounterTypes")
.DataTextField("Description")
.DataValueField("ID")
.BindTo(Model.ENCTypes)
.SelectedIndex(Model.EncSelected)
)
This DropDownList contains the values I expect but I need to pass the selected value back to my controller when the user clicks the submit button. Everything works fine except I don't have access to which item was selected from the controller's [HttpPost] action. So, how do i assign the DropDownList's value to a hidden form field so it will be available to the controller?
For anyone who found this wondering how to get the selected value in JavaScript, this is the correct answer:
$("#EncounterTypes").data("kendoDropDownList").value();
From the documentation: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value
when select a value from a dropdown list, and in the selec event , we can get the selected value as following ,
#(Html.Kendo().DropDownList()
.Name("booksDropDown")
.HtmlAttributes(new { style = "width:37%" })
.DataTextField("BookName")
.DataValueField("BookId")
.Events(x => x.Select("onSelectBookValue"))
.DataSource(datasource => datasource.Read(action => action.Action("ReadBookDropDow", "PlanningBook").Type(HttpVerbs.Get)))
.OptionLabel("Select"))
javascript function like following ,
function onSelectBookValue(e) {
var dataItem = this.dataItem(e.item.index());
var bookId = dataItem.BookId;
//other user code
}
I believe this will help someone
Thanks
Hello I was just going through this problem,kept on searching for 2 hours and came up with a solution of my own.
So here is the line to fetch any data bidden to the kendo drop down.
$("#customers").data("kendoDropDownList").dataSource._data[$("#customers").data("kendoDropDownList").selectedIndex].colour;
Just change the id customers to the id you have given tot he kendo drop down.
Maybe you should be using the DropDownListFor construct of the Kendo DropDownList like so in your view:
#(Html.Kendo().DropDownListFor(m => m.EncSelected)
.Name("EncounterTypes")
.DataTextField("Description")
.DataValueField("ID")
.BindTo(Model.ENCTypes)
.SelectedIndex(Model.EncSelected)
)
This way, when you submit, it will be availble on the POST request and you won't need to put an hidden field anywhere.
BUT should you need to use the hidden field for some reason, put it there, subscribe the the select event of the dropdown list and put using JQuery (for instance) put the selected item on the hidden field.
It's your choice :)
If you want to read also out the text of the dropdown, you can get or set the value by using the following kendo function:
$('#EncounterTypes').data("kendoDropDownList").text();
REFERENCE TO THE DOCUMENTATION
Using this .val() as #Vivek Parekh mentions will not work - there is no function .val() in the kendo framework.
If you want you could use jQuery and get the value back: $('#EncounterTypes').val()
Updated DEMO
$("#EncounterTypes").kendoDropDownList().val();
You can get the selected item like following code and then use item.property to get further information
var selectedFooType = $("#fooType").data("kendoDropDownList").dataItem();
selectedFooType.name
//OR
selectedFooType.id
I have Kendo Grid and a ForeignKey column on a page. ForeignKey column is populated using ViewData as described below.
column.ForeignKey(x => x.ProductID, (List<Product>)ViewData["products"], "ID", "ProdName");
The Grid is editable in batch(InCell) mode as show below...
.Editable(editable => editable.Mode(GridEditMode.InCell)
I want to modify collection of ProductID column in the grid after page is loaded based on value selected on other drop-down defined outside of the Grid.
How can I achieve that? Can I do it using jQuery?
Similar example I found here...
http://www.telerik.com/community/forums/aspnet-mvc/grid/cascading-dropdowns-in-grid-edit---foreignkey-columns.aspx
Thanks.
I figured out how to filter the Product drop-down using an EditorTemplate for the foreign key column.
Here is my column definition for the Product.
c.ForeignKey(x => x.ProductID, (List<Product>)ViewData["products"], "ID", "ProdName").EditorTemplateName("ProductIDEditor");
Here is the editor template for Product, ProductIDEditor.cshtml
#using Kendo.Mvc.UI
#(Html.Kendo().DropDownListFor(m => m)
.AutoBind(false)
.OptionLabel("Select a value...")
.DataTextField("ProdName")
.DataValueField("ID")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("FilterProducts", "Home").Data("filterProducts"))
.ServerFiltering(true);
})
)
#Html.ValidationMessageFor(m => m)
In my main VIEW Index.cshtml, I added filterProducts JavaScript handler, that passes JSON object for productID to controller.
function filterChargeTypes()
{
return {
productID: $("#ProductID").val()
};
}
Here is the controller that listens to filtering event...
public ActionResult FilterProducts(string productID)
{
// do your filtereing based on productID.
}
FilterProducts will be called every time when user hits the drop-down to get filtered value.
You don't need the Editor Template. It will bind to a dropdown without it. You can use this, like you had, just minus the template:
c.ForeignKey(x => x.ProductID, (List<Product>)ViewData["products"], "ID", "ProdName")
or
c.ForeignKey(x => x.ProductID, (System.Collections.IEnumerable)ViewData["products"], dataFieldValue: "ID", dataFieldText: "ProdName")
And for filtering, you can just invoke .Filterable() on the grid.
I've two tables
1.Country
ID
CountryName
and other table is
2.State
State ID
State Name
Country Id
I am using this code to populate data in dropdownlist of country in citycontroller.cs
ViewBag.countries = new SelectList(db.Couns.OrderBy(c => c.CountryName).ToList(), "ID", "CountryName");
in create.cshtml
#Html.DropDownList("Select Country", ViewBag.countries as SelectList)
i want the functionality in which the state dropdown should be populated according to the selection of the country dropdown what should be done?????
If you have the list of states downloaded already to the client machine then knockout.js would be the way to go. If you want to download only the states that are related to the selected country once that selection is made you shohuld make an AJAX call to the server when a country is selected and have the success function populate the state list.
You will need to use Ajax calls for that. You may want to have a look at this answer I provided to a question similar to yours.
You can wse jQuery ajax to load the States when the country gets selected.
<script type="text/javascript">
$(function(){
$("#Country").change(function(){
var states="";
var countryId=$(this).val();
$.getJSON("#Url.Action("GetStates","Home")/"+countryId,function(data){
$.each(data,function(index,item){
states+="<option value='"+item.ID+"'>"+item.StateName+"</option>";
});
$("#States").html(states);
});
});
});
</script>
Assuming Country is the ID of your Country DropDown and States is the ID of your States Dropdow and you have an action method which accepts the country id as the parameter and get the states in JSON format
public ActionResult GetStates(int id)
{
var stateList=repo.GetStatesForCountry(id);
return Json(stateList,JsonRequestBehaviour.AllowGet);
}
Assuming repo.GetStatesForCountry returns a List of States based on the country Id passed. You may replace that function call with your method call which returns a list of State class objects.
Suggestion : I would try to avoid the dynamic ViewBag /ViewData approach to populate the Dropdwon and switch to a more strongly typed approach. Here is an example how to do it.
I have following code
#using (Html.BeginForm())
{
#Html.DropDownListFor(m => m.IDs, new SelectList(Model. IDs), Model.SelectedID)
}
So user selection from this combo bind to SelectedID property of the model. My understanding is that this binding happen only when form is submitted. Let’s say from the same page, I need to do an AJAX call but at this point ) Model.SelectedID does not provide any value because form hasn’t been submitted yet (although user has selected something from drop down). Any ideas how to best deal with this situation?
You can use javascript.
var selectedValue = $("#IDs").val();
bind a change event to your DD
$("#DDL_ID").change(function(){
var currVal = $(this).val();
//do ajax
});
As others have pointed you would get this value with javascript on the change of the drop down list.
I wanted to point out however, that your understanding of the overload you are using for the drop down list is incorrect. This overload will display a default option box label.
For example you could prompt the users to select select something from the list:
#Html.DropDownListFor(m => m.IDs, new SelectList(Model. IDs), "Select Something...")
If you were to post the form in your example as is, you can see the selected item come across in the form. If your view model is setup in such a fashion the model binder would take over and bind this value to your "SelectedID" property.
[HttpPost]
public string DropDown(FormCollection form)
{
var selectedItem = form["IDs"];
return selectedItem;
}