I have a Grid with Edit Pupup Custom Template and I need to transfer the data from the controller to the DropdownList. I need some help.
This is the part of my controler
_______________________
using OVFixedAssets.OVDataContext;
namespace OVFixedAssets.Controllers
{
public class FixedAssetsController : Controller
{
private OVFixedAssetsEntities db = new OVFixedAssetsEntities();
public JsonResult GetProjects([DataSourceRequest] DataSourceRequest request)
{
var oventities = new OVFixedAssetsEntities();
{
var projects = oventities.Projects.Select(project => new Project()
{
ProjectID = project.ProjectID,
ProjectName = project.ProjectName
});
return Json(projects, JsonRequestBehavior.AllowGet);
}
}
____________________________
Grid View
@(Html.Kendo().Grid<OVFixedAssets.OVDataContext.tblAssetsDetail>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ProjectNo);
columns.Bound(c => c.AssetID);
columns.Bound(c => c.Item);
columns.Bound(c => c.Make);
columns.Bound(c => c.Model);
columns.Bound(c => c.SerialNumber);
columns.Bound(c => c.TagID);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(175);
})
.HtmlAttributes(new {style = "height: 750px; Width:90%" })
.ToolBar(toolbar => {
toolbar.Create();
})
.ColumnMenu()
//.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("FixedAssetDetails"))
.Resizable(resizable => resizable.Columns(true))
.Pageable( pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5)
)
.Navigatable()
.Filterable()
.Scrollable()
.Events(events => {
events.ColumnResize("onColumnResize");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(25)
.Model(model => model.Id(p => p.ID))
.Read(read => read.Action("tblAssetsDetails_Read", "FixedAssets"))
.Create(create => create.Action("tblAssetsDetails_Create", "FixedAssets"))
.Update(update => update.Action("tblAssetsDetails_Update", "FixedAssets"))
.Destroy(destroy => destroy.Action("tblAssetsDetails_Destroy", "FixedAssets"))
)
)
<script>
function onColumnResize(e){
//Implement the event handler for ColumnResize
}
</script>
_______________________________
EditTemplate
The edit template in inside Share\EditorTemplates
@using OVFixedAssets.Controllers
@model OVFixedAssets.OVDataContext.tblAssetsDetail
@{
ViewBag.Title = "Fixed Asset Details";
}
<p class="ovtitle1">Asset Details</p>
@(Html.Kendo()
.TabStrip()
.Name("tabstrip")
.Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In)))
.Items(tabstrip =>
{
tabstrip.Add()
.Text("Details")
.Selected(true)
.Content(@<text>
<div class="weather">
<div class="form-group">
<h5>Project No.</h5>
@*@(Html.Kendo()
.TextBoxFor(model => model.ProjectNo)
.Name("ProjectNo")
.HtmlAttributes(new { placeholder = "Project No.", required = "required", validationmessage = "Project Name", })
)*@
@(Html.Kendo().DropDownList()
.Name("ProjectsDropDownList")
.DataTextField("ProjectName")
.DataValueField("ProjectID")
.DataSource(source => { source.Read(read => { read.Action("GetProjects", "FixedAssets"); }); })
)
</div>
<div class="form-group">
<h5>Product Description</h5>
@(Html.Kendo()
.TextBoxFor(model => model.Item)
.Name("Item")
.HtmlAttributes(new { placeholder = "Item Description", required = "required", validationmessage = "Enter Asset Description", style = "width:500px" ,})
)
</div>
<div class="form-group">
<h5>Serial No.</h5>
@(Html.Kendo()
.TextBoxFor(model => model.SerialNumber)
.Name("SerialNumber")
.HtmlAttributes(new { placeholder = "Serial No." })
)
</div>
<div class="form-group">
<h5>Tag ID:</h5>
@(Html.Kendo()
.TextBoxFor(model => model.TagID)
.Name("TagID")
.HtmlAttributes(new { placeholder = "Tag ID." })
)
</div>
<div class="form-group">
<h5>Model No.</h5>
@(Html.Kendo()
.TextBoxFor(model => model.Model)
.Name("Model")
.HtmlAttributes(new { placeholder = "Model No." })
)
<div class="form-group">
<h5>Brand.</h5>
@(Html.Kendo()
.TextBoxFor(model => model.Make)
.Name("Make")
.HtmlAttributes(new { placeholder = "Brand Name." })
)
</div>
</div>
</div>
</text>);
tabstrip.Add()
.Text("Comments")
.Content(@<text>
<div class="weather">
<h5>Comments.</h5>
@(Html.Kendo()
.TextBoxFor(model => model.Comments)
.Name("Comments")
.HtmlAttributes(new { placeholder = "Comments" })
)
</div>
</text>);
tabstrip.Add()
.Text("Garantias")
.Content(@<text>
<div class="weather">
</div>
</text>);
tabstrip.Add()
.Text("Registro de Visitas")
.Content(@<text>
<div class="weather">
</div>
</text>);
})
)
</div>
-------------
I include some of the files.
Thanks...
5 Answers, 1 is accepted
I am attaching and MVC solution which is based on the code sample provided and demonstrates how you can bind the DropDownList DataSource correctly and link it to the Grid ViewModel.
In the current setup I have saved the projects data in the ViewBag and I have used the BindTo() method to pass the list of projects to the DropDownList in the custom edit template. You can also populate the DataSource with the read() method, but keep in mind that when the collection is saved in the ViewBag only one call to the service will be made.
In addition to the above, I have noticed that in your template the name of the Projects dropdown is "ProjectsDropDownList" which is different from the name of the field in your model - "ProjectNo". Please, make sure that the two names are identical in order to make the binding work correctly.
Regards,
Dimitar
Progress Telerik
Rank 1
Hi....
It's posible send another example using tables a and Entity Framework.
Thanks....
You can review the Grid popup editing example implementation with Entity Framework and LocalDB in the Kendo UI for ASP.NET MVC Sample Application. You can find more detailed information about how to setup and run the application locally from the link below:
The source for the sample application can be found in the installation directory of Progress Telerik UI for ASP.NET MVC by navigating to \wrappers\aspnetmvc\Examples\VS2015\Kendo.Mvc.Examples.sln.
Regards,
Dimitar
Progress Telerik
Rank 1
Hello Dimitar,
I've been working with this demo to better understand functionality with foreign keys. To be more specific I've worked with Views/grid/foreignkeycolumn.cshtml with its related controller and models and I can't just make it work, it does't create, update or delete any records from the sample local database. I only added "toolbar.Save();" hopping to make changes on DB with the "save changes" buton but it does not seem to work.
Any idea of why this is happening?
This sample project is supposed to be functional, right?
Hope u can help me out here.
Thanks.
Could you please confirm which editing mode you are using? Initially in this thread the Popup editing is discussed, while in the ForeignKey Column Demo the InCell editing is used?
I have tested the ForeignKey Demo in the Sample Application and the create/update requests are sent when the "Save changes" button is clicked and the batch option is enabled.
.DataSource(dataSource => dataSource .Ajax() .Batch(true)Here you will find a Demo where inCell editing is demonstrated.
Could you please check in the Network tab of Developer tools if the requests are sent when you are trying to update or create a record?
Looking forward for your reply.
Regards,
Neli
Progress Telerik