This is a migrated thread and some comments may be shown as answers.

DropDownList Inside the Custom EditTemplate

5 Answers 101 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Edwin
Top achievements
Rank 1
Edwin asked on 08 Jun 2017, 04:09 AM

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

Sort by
0
Dimitar
Telerik team
answered on 09 Jun 2017, 12:46 PM
Hello Edwin,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Edwin
Top achievements
Rank 1
answered on 09 Aug 2017, 02:26 PM

Hi.... 

It's posible send another example using tables a and Entity Framework.

Thanks....

0
Dimitar
Telerik team
answered on 10 Aug 2017, 04:03 PM
Hello Edwin,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Geovanni
Top achievements
Rank 1
answered on 20 Jul 2018, 03:30 AM

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.

0
Neli
Telerik team
answered on 23 Jul 2018, 03:36 PM
Hello Geovanni,

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)
You could try the same approach and let us know about the behavior?
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DropDownList
Asked by
Edwin
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Edwin
Top achievements
Rank 1
Geovanni
Top achievements
Rank 1
Neli
Telerik team
Share this question
or