Develop Reference

How to hide a row in kendo ui grid

#{
ViewBag.Title = " Grid with Multicolumn headers";
}
#using Kendo.Mvc.UI
#using SampleUIApp.Areas.GridSample.Models
#model SampleUIApp.Areas.GridSample.Models.GridSampleModel
#{
ViewBag.Title = "Grid Sample - InLine Edit";
Layout = "~/Views/Shared/_PageLayout.cshtml";
}
#section pageBody {
<div style="float:right;margin-right:10px;margin-top:10px;margin-bottom:10px">
#(Html.Kendo().Button()
.Name("Hide_toolbar")
.Events(e => e.Click("Hidetoolbar"))
.Content("Hide Toolbar"))
#(Html.Kendo().Button()
.Name("Show_toolbar")
.Events(e => e.Click("Showtoolbar"))
.Content("Show Toolbar"))
</div>
<br />
<br />
#using (Html.BeginForm("InLineIndex", "GridSample", FormMethod.Post, new { #id = "InLineIndexMain" }))
{
<div id="DetailPanel" class="containerDiv100">
#(Html.Kendo().Grid<GridSampleModel>()
.Name("KendoGrid1") // Grid Name can be used in Javascript, if required.
//Columns defination of the fields.
.Columns(columns =>
{
columns.Template(m => m.SampleId).Title("<input id='checkAll', type='checkbox', class='check-box' />");
columns.Group(group=>group
.Title("Personal Information")
.Columns(info => {
info.Bound(m => m.SampleName).Title("Sample Name").Width(200).Filterable(true).HtmlAttributes(new { #style = "font-size:x-small" });
info.Bound(m => m.Age).Title("Age").Width(100).Filterable(false).Format("{0:d}").HtmlAttributes(new { #style = "text-align:right" });
info.Bound(m => m.Height).Title("Height").Width(150).Locked().Filterable(false).Format("{0:N2}").HtmlAttributes(new { #style = "font-size:x-small" });
info.Bound(m => m.City).Title("City (Auto Complete)").Width(350).Lockable(false).Filterable(true).ClientTemplate("#=City.CityName#");
})
);
//columns.Bound(m => m.Age).Title("Age").Width(100).Filterable(false).Format("{0:d}").HtmlAttributes(new { #style = "text-align:right" });
//columns.Bound(m => m.Height).Title("Height").Width(150).Locked().Filterable(false).Format("{0:N2}").HtmlAttributes(new { #style = "font-size:x-small" });
//columns.Bound(m => m.City).Title("City (Auto Complete)").Width(350).Lockable(false).Filterable(true).ClientTemplate("#=City.CityName#");
columns.Bound(m => m.Category).Title("Category (Drop Down List)").Width(400).Filterable(true).ClientTemplate("#=Category.CategoryName#");
columns.Bound(m => m.EmployeeList).Title("Employee (Multi Select)").Width(300).Filterable(true).ClientTemplate("#= renderSelectedEmployees(data.EmployeeList)#")
.EditorTemplateName("ClientEmployee");
columns.Bound(m => m.EntityStatus).Title("Status (CheckBox)").Width(200);
columns.Bound(m => m.CreditCard).Title("Credit Card No (Masked TextBox)").Width(250).HtmlAttributes(new { #Style = "font-size:x-small" });
columns.Bound(m => m.StartDate).Title("Start Date ").Width(150).Filterable(false).Format("{0:dd/MM/yyyy}").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Bound(m => m.EndDate).Title("End Date").Width(150).Filterable(false).Format("{0:dd/MM/yyyy}").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Bound(m => m.Qty).Title("Quantity").Width(100).ClientTemplate("#=Qty#").HtmlAttributes(new { #Style = "text-align:right" });
columns.Bound(m => m.Rate).Title("Rate").Width(100).ClientTemplate("#=Rate#").Format("{0:N2}").HtmlAttributes(new { #Style = "text-align:right" });
columns.Bound(m => m.LineValue).Title("Value").Width(100).Format("{0:n2}").HtmlAttributes(new { #Style = "text-align:right;" });
columns.Command(commands =>
{
commands.Edit().Text(" ");
commands.Destroy().Text(" ");
commands.Custom("Hide").Click("Hide").HtmlAttributes(new { #style = "min-width : 0;font-size:x-small;" });
}).Title("Commands").Width(200).HtmlAttributes(new { #style = "font-size:x-small" });
})
.ToolBar(toolbar =>
{
toolbar.Custom().Text("Add New Sample").Name("add").HtmlAttributes(new { #class = "Toolbar_right" }).HtmlAttributes(new { #style = "font-size:x-small" }).Url("~/GridSample/GridSample02/Create");
toolbar.Create().HtmlAttributes(new { #class = "Toolbar_right" }).HtmlAttributes(new { #class = "hide-button" });
})
.Editable(editable => editable.Enabled(#Model.EditEnable).Mode(GridEditMode.InLine)) // will make grid editable with all cells
// Here "Enabled(#Model.EditEnable)" will allow user to edit the grid control or not depending on Model's EditEnable value i.e. True / False
.Pageable() // Display grid data in multiple pages depending on PageSize parameter
.Scrollable(config => config.Enabled(true)) // Make grid Scrollable
.Filterable(config => config.Mode(GridFilterMode.Menu)) // Allow to set filters on different columns of the grid
.Sortable() // Allow user to sort the data in grid
.ColumnMenu() // Display menu with different actions on
// Display grid row in different colour it will be helpful to identify which grid row is selected.
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row))
.Navigatable()
.Resizable(config => { config.Columns(true); })
.Reorderable(config => { config.Columns(true); })
.Events(events => events.Save("OnCellDataModified").Edit("OnCellChange")) // Grid events to call javascripts on different actions.
.DataSource(source => source
.Ajax()
.Batch(false)
.PageSize(5)
.ServerOperation(false)
.Model(model =>
{
model.Id(m => m.SampleId);
model.Field(m => m.Category).DefaultValue(
ViewData["defaultCategory"] as CategoryViewModel);
model.Field(m => m.City).DefaultValue(
ViewData["defaultCity"] as CityViewModel);
//Given below code will not allow user
//to change (either manual / calculated) the given cell value
//But it will also do not change updated value in model
//model.Field(m => m.LineValue).Editable(false);
})
// Actions called from controller
.Read(read => read.Action("Fetch", "GridSample", new { area = "GridSample" }))
.Create(create => create.Action("InLine_Insert", "GridSample", new { area = "GridSample" }))
.Update(update => update.Action("InLine_Update", "GridSample", new { area = "GridSample" }))
.Destroy(delete => delete.Action("Delete", "GridSample", new { area = "GridSample" }))
)
)
</div>
<script type="text/javascript">
// Code added for Keyboard Navigation Support
$(document.body).keydown(function (e) {
if (e.altKey && e.keyCode == 87) {
$("#grid").data("kendoGrid").table.focus();
}
});
function OnSelectEmply(e) {
// This sample javascript function called from Employee MultiSelect Partial View
}
function CalculateTotValue(data) {
return data.Qty * data.Rate;
}
function OnCellChange(e) {
//alert("Cell Change");
//Disable the edit mode depending on the model value of EntityStatus field i.e. True / False
$("#LineValue").prop("disabled", e.model.EntityStatus);
//Set Default values while adding new row in Grid
if (e.model.isNew() && !e.model.dirty) {
e.container
.find("input[name=SampleName]") // get the input element for the field
.val("Sample Name - 4") // set the value
.change(); // trigger change in order to notify the model binding
}
}
function OnCellDataModified(e) {
//alert("Cell Data Modified");
if (e.values && e.values.LineValue) {
//alert("Calculate # LineValue");
var qty = e.values.Qty || e.model.Qty;
var rate = e.values.Rate || e.model.Rate;
e.model.set("LineValue", rate * qty);
e.values.set("LineValue", rate * qty);
$("#KendoGrid1").data("kendoGrid").refresh();
}
else {
if (e.values && (e.values.Qty || e.values.Rate)) {
//alert("Calculate # Qty, Rate");
var qty = e.values.Qty || e.model.Qty;
var rate = e.values.Rate || e.model.Rate;
e.model.set("LineValue", rate * qty);
e.values.set("LineValue", rate * qty);
$("#KendoGrid1").data("kendoGrid").refresh();
}
}
}
function renderSelectedEmployees(List) {
//alert(List.length);
if (List != undefined && List[0] != undefined) {
var text;
$.each(List, function (index) {
if (text == undefined)
text = List[index].EmployeeName;
else
text = text + ", " + List[index].EmployeeName;
})
//alert($("#LineValue").width);
if (text.length > 30) {
text = text.substring(0, 5) + " .... (" + List.length.toString().trim() + ")"
}
return text;
}
else
return "";
}
function Hide(e)
{
var grid = $("#KendoGrid1").data("kendoGrid");
////e.preventDefault();
//var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
//var row = $(this).closest("tr");
//var rowIdx = $("tr", grid.tbody).index(row);
//grid.tbody.find("tr:first").hide();
grid.tbody.closest("tr").Hide();
//grid.tbody.closest("tr").hide();
//var item = this.dataSource.get(); //Get by ID or any other preferred method
//this.tbody.find("tr[data-uid='" + item.uid + "']").hide();
}
function Hidetoolbar() {
$(".k-grid-add").hide();
}
function Showtoolbar() {
$(".k-grid-add").show();
}
$("#kendoGrid1").on("click", ".hide-button", function () {
alert("reached");
$(this).parent().parent().hide();
});
</script>
}
}
As you can see there is custom command button know as hide in my grid.. i wish to hide the row when that button is clicked..
how do i get hat done?
i have tried a line as grid.tbody.find("tr:first").hide();
but this works only for the first line. wha should i do for the other rows?

Your selector will find only the first tr, so only the first line.
You need to change your selecor to:
grid.tbody.closest("tr").hide();

This code is very ugly:
commands.Custom("Hide").Click("Hide").HtmlAttributes(new { #style = "min-width : 0;font-size:x-small;" });
It is mixing server-side code with css and javascript. Forget about the click event and do not give it style attribute. You should give it a class attribute. Let's name its class hide-button.
Define a rule for your hide-button elements in CSS, like this:
.hide-button {
min-width: 0;
font-size: x-small;
}
Make sure that this CSS rule is loaded in your page.
Then, your Javascript should be defined. Since you have not given us the HTML the code generated, I will assume your HTML contains a grid, which contains a tbody, which contains tr elements, which contain td elements. One of the td elements will contain your hide-button in each row. So, you should define this behavior:
$("body").on("click", ".hide-button", function() {
$(this).parent().parent().hide();
});
Note, that since you did not give me enough information, I have used assumptions in my answer. As a result, if any of my assumptions was wrong, the answer will not work for you. If you have any more problems, then make sure that you give me all the information.

MVC Syncfusion Grid - HTML EJ Grid - Get Primary Key of Selected Row in Jquery

Below is my grid code, how do I get the Primary Key Value when the cell is clicked in jquery?
I have tried searching online and can't find a working example. Is there another way to get the value without using jquery or javascript?
<div id="CampaignGrid">
#(Html.EJ().Grid.Test.Test>("Grid")
...
})
.Columns(col =>
{
col.Field("iCampaign").HeaderText("Campaign").IsPrimaryKey(true).TextAlign(TextAlign.Left).Width(50).AllowEditing(false).Add();
col.Field("vCampaignName").HeaderText("Campaign Name").IsPrimaryKey(false).TextAlign(TextAlign.Left).Width(260).AllowEditing(false).Add();
})

when you are setting fields like col.Field("iCampaign"), you determine a tag with attribute name="iCampaign",which will be used in model binding.
so you can use a jquery selector like this :
$('[name = "iCampaign"]')

you can also solve your problem this way :
#(Html.EJ().Grid<EmployeeView>("MasterGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource1)
.SelectedRowIndex(0)
.Columns(col =>
{
col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(125).Add();
col.Field("FirstName").HeaderText("First Name").Width(100).Add();
col.Field("LastName").HeaderText("Last Name").Width(100).Add();
col.Field("Title").HeaderText("Title").Width(150).Add();
col.Field("BirthDate").HeaderText("Birth Date").TextAlign(TextAlign.Right).Width(100).Format("{0:MM/dd/yyyy}").Add();
col.Field("Country").Width(100).HeaderText("Country").Add();
})
.ClientSideEvents(eve => { eve.RowSelected("rowSelected"); })
)
<script type="text/javascript">
$(function () {
window.rowSelected = function (args) {
var employeeID = args.data.EmployeeID;
var detaildata = ej.DataManager(window.gridData).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, employeeID, false).take(10));
var gridObj = $("#DetailGrid").ejGrid("instance");
gridObj.model.dataSource = ej.DataManager(detaildata.slice(0, 5));
$("#DetailGrid").ejGrid("refreshContent");
}
});
</script>

You can try this
#(Html.EJ().Grid<EmployeeView>("MasterGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource1)
.SelectedRowIndex(0)
.Columns(col =>
{
col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(125).Add();
col.Field("FirstName").HeaderText("First Name").Width(100).Add();
col.Field("LastName").HeaderText("Last Name").Width(100).Add();
col.Field("Title").HeaderText("Title").Width(150).Add();
col.Field("BirthDate").HeaderText("Birth Date").TextAlign(TextAlign.Right).Width(100).Format("{0:MM/dd/yyyy}").Add();
col.Field("Country").Width(100).HeaderText("Country").Add();
})
.ClientSideEvents(eve => { eve.CellEdit("cellEdit"); })
)
<script type="text/javascript">
function cellEdit(args)
{
var pkName = args.primaryKey[0];
var pkValue = args.rowData[pkName];
}
</script>

mvc 4 How to call javascript function after #Html.RadioButtonFor clicked

View Has :
<div Monthly #Html.RadioButtonFor(m => m.DDPaymentOption, "Monthly", true)
Yearly #Html.RadioButtonFor(m => m.DDPaymentOption, "Yearly", true)
</div>
tried
$(":radio").click(function () {
var Selectedvalue = $(this).val();
var isDiv = document.getElementById('instalmentScheduleDiv');
if (Selectedvalue == "Yearly")
{
isDiv.className = "HideDiv";
}
});
Does not hit the function

Use this code
$('#DDPaymentOption').click(function(){
if($(this).val()=='Yearly')
{
$('#instalmentScheduleDiv').addClass('HideDiv');
}
});
And if you are using HideDiv Class to hide the div you can jquery methods to show or hide your div element like
$('#instalmentScheduleDiv').hide(); // to hide the element
and/or
$('#instalmentScheduleDiv').show(); // to show the element

$("input[type=radio]").change(function () {
var Selectedvalue = $(this).val();
var isDiv = $("#instalmentScheduleDiv");
if (Selectedvalue == "Yearly")
{
isDiv.hide();
} else {
isDiv.show();
}
});

All credit goes to: codingbiz
This is how you can do this.
function updatePostID(val)
{
document.getElementById('PostID').value = val;
//and probably call document.forms[0].submit();
}
Then have a hidden field or other control for the PostID
#Html.Hidden("PostID", Model.addcomment.PostID)
//OR
#Html.HiddenFor(model => model.addcomment.PostID)
How do I update a model value in JavaScript in a Razor view?

Make cell readonly in Kendo Grid if condition is met

Let's say I have a data like this:
[
{ID: 1, SomeForeignKeyID: 4, IsFkEnabled: true},
{ID: 2, SomeForeignKeyID: 9, IsFkEnabled: false}
]
Kendo Grid is using this data:
columns.Bound(m => m.ID);
columns.ForeignKey(p => p.SomeForeignKeyID, ViewBag.ForeignKeys as IEnumerable<object>, "Value", "Name");
Here's the problem: how to make ForeignKey column editable, but only in rows, where IsFkEnabled == true? Edit mode is InCell.

Notes:
this solution works for in-cell editing only (inline or popup editing
require a different approach)
the first approach can lead to unwanted visual effects (grid
jumping) under certain circumstances; if you experience that, I
recommend approach #2
approach #2 may not work if you want to use the MVC wrappers (although it may be possible to extend Kendo.Mvc.UI.Fluent.GridEventBuilder); in that case, you'll need to bind the edit handler in JS
Approach #1
Use the grid's edit event and then do something like this:
$("#grid").kendoGrid({
dataSource: dataSource,
height: "300px",
columns: columns,
editable: true,
edit: function (e) {
var fieldName = e.container.find("input").attr("name");
// alternative (if you don't have the name attribute in your editable):
// var columnIndex = this.cellIndex(e.container);
// var fieldName = this.thead.find("th").eq(columnIndex).data("field");
if (!isEditable(fieldName, e.model)) {
this.closeCell(); // prevent editing
}
}
});
/**
* #returns {boolean} True if the column with the given field name is editable
*/
function isEditable(fieldName, model) {
if (fieldName === "SomeForeignKeyID") {
// condition for the field "SomeForeignKeyID"
// (default to true if defining property doesn't exist)
return model.hasOwnProperty("IsFkEnabled") && model.IsFkEnabled;
}
// additional checks, e.g. to only allow editing unsaved rows:
// if (!model.isNew()) { return false; }
return true; // default to editable
}
Demo here (updated for Q1 2014)
To use this via the MVC fluent syntax, simply give the anonymous edit function above a name (e.g. onEdit):
function onEdit(e) {
var fieldName = e.container.find("input").attr("name");
// alternative (if you don't have the name attribute in your editable):
// var columnIndex = this.cellIndex(e.container);
// var fieldName = this.thead.find("th").eq(columnIndex).data("field");
if (!isEditable(fieldName, e.model)) {
this.closeCell(); // prevent editing
}
}
and reference it like this:
#(Html.Kendo().Grid()
.Name("Grid")
.Events(events => events.Edit("onEdit"))
)
The disadvantage to this is that the editor gets created first before the edit event is triggered, which can sometimes have undesirable visual effects.
Approach #2
Extend the grid by overriding its editCell method with a variation that triggers a beforeEdit event; for that to work with grid options, you'll also need to override the init method:
var oEditCell = kendo.ui.Grid.fn.editCell;
var oInit = kendo.ui.Grid.fn.init;
kendo.ui.Grid = kendo.ui.Grid.extend({
init: function () {
oInit.apply(this, arguments);
if (typeof this.options.beforeEdit === "function") {
this.bind("beforeEdit", this.options.beforeEdit.bind(this));
}
},
editCell: function (cell) {
var that = this,
cell = $(cell),
column = that.columns[that.cellIndex(cell)],
model = that._modelForContainer(cell),
event = {
container: cell,
model: model,
field: column.field
};
if (model && this.trigger("beforeEdit", event)) {
// don't edit if prevented in beforeEdit
if (event.isDefaultPrevented()) return;
}
oEditCell.call(this, cell);
}
});
kendo.ui.plugin(kendo.ui.Grid);
then use it similar to #1:
$("#grid").kendoGrid({
dataSource: dataSource,
height: "300px",
columns: columns,
editable: true,
beforeEdit: function(e) {
var columnIndex = this.cellIndex(e.container);
var fieldName = this.thead.find("th").eq(columnIndex).data("field");
if (!isEditable(fieldName, e.model)) {
e.preventDefault();
}
}
});
The difference of this approach is that the editor won't get created (and focused) first. The beforeEdit method is using the same isEditable method from #1.
See a demo for this approach here.
If you want to use this approach with MVC wrappers but don't want / can't extend GridEventBuilder, you can still bind your event handler in JavaScript (place below the grid MVC initializer):
$(function() {
var grid = $("#grid").data("kendoGrid");
grid.bind("beforeEdit", onEdit.bind(grid));
});

None of these approaches worked for me. A very simple implentation looks like this
edit: function (e) {
e.container.find("input[name='Name']").each(function () { $(this).attr("disabled", "disabled") });
}
Where edit is part of the kendo grid declaration and Name is the actual name of the field.

Please try with the below code snippet.
VIEW
<script type="text/javascript">
function errorHandler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function onGridEdit(arg) {
if (arg.container.find("input[name=IsFkEnabled]").length > 0) {
arg.container.find("input[name=IsFkEnabled]").click(function () {
if ($(this).is(":checked") == false) {
}
else {
arg.model.IsFkEnabled = true;
$("#Grid").data("kendoGrid").closeCell(arg.container);
$("#Grid").data("kendoGrid").editCell(arg.container.next());
}
});
}
if (arg.container.find("input[name=FID]").length > 0) {
if (arg.model.IsFkEnabled == false) {
$("#Grid").data("kendoGrid").closeCell(arg.container)
}
}
}
</script>
<div>
#(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ID);
columns.Bound(p => p.Name);
columns.Bound(p => p.IsFkEnabled);
columns.ForeignKey(p => p.FID, (System.Collections.IEnumerable)ViewData["TestList"], "Value", "Text");
})
.ToolBar(toolBar => toolBar.Save())
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Events(e => e.Edit("onGridEdit"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).Editable(false);
})
.Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
.Update(update => update.Action("ForeignKeyColumn_Update", "Home"))
)
)
</div>
MODEL
namespace MvcApplication1.Models
{
public class TestModels
{
public int ID { get; set; }
public string Name { get; set; }
public bool IsFkEnabled { get; set; }
public int FID { get; set; }
}
}
CONTROLLER
public class HomeController : Controller
{
public ActionResult Index()
{
List<SelectListItem> items = new List<SelectListItem>();
for (int i = 1; i < 6; i++)
{
SelectListItem item = new SelectListItem();
item.Text = "text" + i.ToString();
item.Value = i.ToString();
items.Add(item);
}
ViewData["TestList"] = items;
return View();
}
public ActionResult ForeignKeyColumn_Read([DataSourceRequest] DataSourceRequest request)
{
List<TestModels> models = new List<TestModels>();
for (int i = 1; i < 6; i++)
{
TestModels model = new TestModels();
model.ID = i;
model.Name = "Name" + i;
if (i % 2 == 0)
{
model.IsFkEnabled = true;
}
model.FID = i;
models.Add(model);
}
return Json(models.ToDataSourceResult(request));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ForeignKeyColumn_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<TestModels> tests)
{
if (tests != null && ModelState.IsValid)
{
// Save/Update logic comes here
}
return Json(ModelState.ToDataSourceResult());
}
}
If you want to download demo then click here.

The simplest way is to use the dataBound event to conditionally apply one of the special CSS classes to the cells that the grid ignore for editing:
http://dojo.telerik.com/izOka
dataBound: function(e) {
var colIndex = 1;
var rows = this.table.find("tr:not(.k-grouping-row)");
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var model = this.dataItem(row);
if (!model.Discontinued) {
var cell = $($(row).find("td")[colIndex]);
cell.addClass("k-group-cell");
}
}
},

Another approach is to use your own "editor" function for column definition that provides either an input element or a plain div depending on your condition.

Use Template column instead of Bound column
columns.Template(#<text></text>).ClientTemplate("#=Id#").Title("Id");

Combining Razor, Ajax, JSON

I try to make following parts run, but always failed. The objective is: if a target in combobox is selected, the mediaId's combobox should be filled with respective values. At this moment I just emulate the values of mediaId combobox. Can anyone show me how to combine them correctly? Thx in advance.
The view Medium.cshtml:
<script src="#Url.Content("~/Scripts/PartialLoad.js")" type="text/javascript"></script>
<div class="editor-label">
#Html.LabelFor(model => model.Files[i].TargetId)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.Files[i].PTargetId, (ViewData["targets"] as SelectList).MakeSelection(Model.Files[i].PTargetId))
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Files[i].MediaId)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.Files[i].MediaId, (ViewData["mediaIds"] as SelectList).MakeSelection(1))
</div>
The javascript partialload.js
$(document).ready(function () {
$("#targets").change(function () { GetMValues("#targets", "#mediaIds"); });
});
function ClearDrop(objSource) {
$(objSource).empty();
}
function GetMValues(objSource, objDest) {
var url = '/GetMValues/';
$.getJSON(url, { id: $(objSource).val() },
function (data) {
ClearDrop(objDest); $.each(data, function (index, optionData) {
$(objDest).append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");
});
});
}
The homecontroller.cs
public ActionResult GetMValues(String id)
{
int myId = 0;
int.TryParse(id, out myId);
var mediumIds = new List<long>();
int max = myId + 3;
// just to emulate the data in the list
for ( long l = 1 ; l < max ; l++ ){
mediumIds.Add(l);
}
var select = new SelectList(mediumIds, "PTargetId", "TargetId");
return Json(select, JsonRequestBehavior.AllowGet); //allow get needed to allow get calls
}

Here you are using an id selector for the dropdownlist: $("#targets") but your dropdown doesn't seem to have such id. Maybe you want to assign it an id or a class:
#Html.DropDownListFor(
model => model.Files[i].PTargetId,
(ViewData["targets"] as SelectList).MakeSelection(Model.Files[i].PTargetId),
new { id = "targets" }
)
But because this seems to be repeated and you cannot have multiple elements with the same id a class selector is probably more appropriate:
#Html.DropDownListFor(
model => model.Files[i].PTargetId,
(ViewData["targets"] as SelectList).MakeSelection(Model.Files[i].PTargetId),
new { #class = "targets" }
)
and then:
$(document).ready(function () {
$(".targets").change(function () {
...
});
});
Same remark obviously for #mediaIds.