DropDownList Inside the Custom EditTemplate

4 posts, 0 answers
  1. Edwin
    Edwin avatar
    2 posts
    Member since:
    Oct 2012

    Posted 07 Jun Link to this post

    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...

     

  2. Dimitar
    Admin
    Dimitar avatar
    226 posts

    Posted 09 Jun Link to this post

    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.
  3. Edwin
    Edwin avatar
    2 posts
    Member since:
    Oct 2012

    Posted 09 Aug in reply to Dimitar Link to this post

    Hi.... 

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

    Thanks....

  4. Dimitar
    Admin
    Dimitar avatar
    226 posts

    Posted 10 Aug Link to this post

    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.
Back to Top