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

Grid Custom Editor not saving values

1 Answer 170 Views
Grid
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 25 Jul 2018, 12:58 AM

     I've been trying to add a dropdown list to a grid cell for a while now and I can get the dropdown to appear but whenever it changes it doesn't seem to actually save the value.  When I choose a item the save event does end up firing but tabbing off of the field nothing has changed and the put doesn't get hit.  the other fields with just regular text boxes seem to work just fine.

Grid Code:

@(Html.Kendo().Grid<FieldTimeEntry.Web.Repos.Testing.DtsCrewDetLabor>()
                                                                                       .Name("dtsLaborGrid")
                                                                                       .ToolBar(toolbar =>
                                                                                       {
                                                                                           toolbar.Create();
                                                                                           toolbar.Save();
                                                                                       })
                                                                                       .Columns(columns =>
                                                                                       {
                                                                                           columns.Command(command => command.Destroy()).Width(100);
                                                                                           columns.Bound(p => p.EmpName);
                                                                                           columns.Bound(p => p.EmpNo);
                                                                                           columns.Bound(p => p.EmpBillCode);
                                                                                       })
                                                                                      .Editable(editable => editable.Mode(GridEditMode.InCell))
                                                                                      .Pageable()
                                                                                      .Navigatable()
                                                                                      .Sortable()
                                                                                      .Scrollable()
                                                                                          .Events(e =>
                                                                                          {
                                                                                              e.Save("onSave");
                                                                                              e.DataBound("onDataBound");
                                                                                          })
                                                                                       .DataSource(dataSource => dataSource
                                                                                           .Ajax()
                                                                                           .Batch(true)
                                                                                           .PageSize(20)
                                                                                           .ServerOperation(false)
                                                                                           .AutoSync(true)
                                                                                           .Model(m =>
                                                                                           {
                                                                                               m.Field(f => f.GfEmpNo).DefaultValue(Model.GfEmpNo);
                                                                                               m.Field(f => f.CrewCode).DefaultValue(Model.CrewCode);
                                                                                               m.Id(p => p.SeqNo);
                                                                                               m.Field(f => f.EmpNo);
                                                                                           })
                                                                                           .Create(create =>
                                                                                           {
                                                                                               create.Action("Create", "CrewsApi");
                                                                                               create.Type(HttpVerbs.Post);
                                                                                           })
                                                                                           .Read(read =>
                                                                                           {
                                                                                               read.Action("Get", "CrewsAPI", new { id = Model.CrewCode });
                                                                                               read.Type(HttpVerbs.Get);
                                                                                           })
                                                                                           .Update(update =>
                                                                                           {
                                                                                               update.Action("Put", "CrewsAPI");
                                                                                               update.Type(HttpVerbs.Put);
                                                                                           })
                                                                                           .Destroy(destroy =>
                                                                                           {
                                                                                               destroy.Action("Delete", "CrewsAPI");
                                                                                               destroy.Type(HttpVerbs.Delete);
                                                                                           })
                                                                                       ))

Editor Template:

@(Html.Kendo().DropDownList()
          .Name("EmployeeId")
          .DataTextField("NameAlpha")
          .DataValueField("EmployeeId")
          .DataTextField("NameAlpha")
          .DataValueField("EmployeeId")
          .Filter("contains")
          .OptionLabel("Select Employee")
          .AutoWidth(true)
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetEmployeesFiltered", "ReferenceData");
              })
              .ServerFiltering(true);
          })
          .Animation(a =>
          {
              a.Open(e =>
              {
                  e.Fade(FadeDirection.In);
              });
          }))

 

JS Events:

var lastEditIndex;
        function onSave(e) {
            lastEditIndex.row = this.tbody.children().index(e.container.parent());
            lastEditIndex.col = e.container.parent().children().index(e.container);
        }
 
        function onDataBound(e) {
            var grid = this;
            if (!$.isEmptyObject(lastEditIndex)) {
                var cell = grid.tbody.children().eq(lastEditIndex.row).children().eq(lastEditIndex.col);
 
                grid.current(cell);
                grid.table.focus();
            }
 
            lastEditIndex = {};
        }

 

 

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 27 Jul 2018, 11:30 AM
Hi Josiah,

I have investigated the provided configuration and noticed few things. Firstly the name of the editor is EmployeeId but there is no column in the grid which is bound to a EmployeeId field. The name of the field and the name of the editor should match as the data-bind attribute of the editor depends on its name. Furthermore I noticed the DataTextField and DataValueField are specified twice in the configuration of the editor.

I would recommend you to take a look at the following article which explains how to create a custom drop down editor step by step:


Furthermore, in the link below you will find a working sample which uses drop down editors:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
n/a
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or