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

Grid Custom template popup Save issue

1 Answer 107 Views
Grid
This is a migrated thread and some comments may be shown as answers.
technotes
Top achievements
Rank 1
technotes asked on 29 Sep 2015, 04:04 PM

I have create a custom popup template (First time doing this) And I have 6 fields first three are drop down list and the other two are a text box and two date pickers.

The Text box and date pickers record the data back to the model.  But the drop down list data is coming back as null. 

So when the Data source calls the Create action, the model that is passed has null values for the drop down list but has the values of the other fields

 Here is my View 

@(Html.Kendo().Grid<Portal.Model.DAX.PurchaseShipment>()
      .Name("Shipment")
      .Columns(columns =>
      {
          columns.Bound(c => c.CompanyId).Width(120);
          columns.Bound(c => c.VendAccount).Width(120);
          columns.Bound(c => c.VendShipId).Width(120);
          columns.Bound(c => c.DeliveryMode).Width(120);
          columns.Bound(c => c.ShipmentDate).Width(140).Format("{0:MM/dd/yy}");
          columns.Bound(c => c.EstimateShipmentDate).Width(140).Format("{0:MM/dd/yy}");
          columns.Bound(c => c.SourceOfData).Hidden(true).IncludeInMenu(false);
          columns.Bound(c => c.RecVersion).Title("Rec Version").Hidden(true).IncludeInMenu(false);
          columns.Bound(c => c.RecId).Title("RecId").Hidden(true).IncludeInMenu(false);
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
      })
      .ToolBar(toolbar =>
      {
          toolbar.Create();
          toolbar.Excel();
      })
      .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ShipmentEditor"))
      .Pageable(p => p.PageSizes(true).PageSizes(new int[] { 20, 50, 100, 1000 }))
      .Sortable(sortable =>
      {
          sortable.SortMode(GridSortMode.MultipleColumn);
      })
      .Filterable()
      .Scrollable(scrollable =>
      {
          scrollable.Enabled(true);
          scrollable.Height(450);
      })
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Model(model => model.Id(p => p.CompanyId))
          .Read(read => read.Action("PurchaseShipments_Read", "Shipment"))
          .Create(create => create.Action("PurchaseShipments_Create", "Shipment"))
          .Update(update => update.Action("PurchaseShipments_Update", "Shipment"))
          .Destroy(destroy => destroy.Action("PurchaseShipments_Destroy", "Shipment"))
      )
  )

 And Here is my Shipment Editor:

@model Portal.Model.DAX.PurchaseShipment
 
<style>
    .cont {
        padding-right: 5%;
        padding-left: 5%;
        margin-right: auto;
        margin-left: auto;
        padding-bottom: 5px;
    }
    .editor label {
      float: left;
      width: 100px; 
      text-align: right;
    }
    .editor input[type=text] {
      width: 300px;
      margin: 0 0 0 10px;
    }
</style>
<script>
    function filterByCompany() {
        return {
            companies: $("#companyDropDownList").val()
        };
    }
</script>
 
<div class="cont">
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
 
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.ShipId)
        @Html.HiddenFor(model => model.RecVersion)
        @Html.HiddenFor(model => model.RecId)
        @Html.HiddenFor(model => model.SourceOfData)
                        
        <div class="editor form-group">
            @Html.LabelFor(model => model.CompanyId, htmlAttributes: new { @class = "control-label col-md-2" })
            @(  Html.Kendo().DropDownListFor(model => model.CompanyId)
                .Name("companyDropDownList")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select ship to company...")
                .DataSource(s =>
                {
                    s.Read(read =>
                    {
                        read.Action("Companies_Read", "Shipment");
                    });
                })
                .HtmlAttributes(new { style = "width: 240px"})
            )
            @Html.ValidationMessageFor(model => model.CompanyId, "", new { @class = "text-danger" })
        </div>
 
        <div class="editor form-group">
            @Html.LabelFor(model => model.VendAccount, htmlAttributes: new { @class = "control-label col-md-2" })
            @(  Html.Kendo().DropDownListFor(model => model.VendAccount)
                .OptionLabel("Select ship from company...")
                .Name("Vendor")
                .DataTextField("Name")
                .DataValueField("VendId")
                .DataSource(s =>
                {
                    s.Read(read =>
                    {
                        read.Action("Vendors_Read", "Shipment")
                            .Data("filterByCompany");
                    });
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("companyDropDownList")
                .HtmlAttributes(new { style = "width: 240px"})
            )
            @Html.ValidationMessageFor(model => model.VendAccount, "", new { @class = "text-danger" })
        </div>
 
        <div class="editor form-group">
            @Html.LabelFor(model => model.DeliveryMode, htmlAttributes: new { @class = "control-label col-md-2" })              
                
            @(Html.Kendo().DropDownListFor(model => model.DeliveryMode)
                .Name("deliveryMode")
                .HtmlAttributes(new { style = "width:240px" })
                .OptionLabel("Select Carrier...")
                .DataTextField("Name")
                .DataValueField("Id")
                .DataSource(source => {
                    source.Read(read =>
                    {
                        read.Action("DeliveryMode_Read", "Shipment")
                        .Data("filterByCompany");
                    });
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("companyDropDownList")
            )
            @Html.ValidationMessageFor(model => model.DeliveryMode, "", new { @class = "text-danger" })
        </div>
 
        <div class="editor form-group">
            @Html.LabelFor(model => model.VendShipId, htmlAttributes: new { @class = "control-label col-md-2" })
            @(Html.Kendo().TextBoxFor(model => model.VendShipId)
                .Name("VendShipId")
                .HtmlAttributes(new { style = "width: 240px" })
            )
            @Html.ValidationMessageFor(model => model.VendShipId, "", new { @class = "text-danger" })
        </div>
 
        <div class="editor form-group">
            @Html.LabelFor(model => model.ShipmentDate, htmlAttributes: new { @class = "control-label col-md-2" })
            @(Html.Kendo().DatePickerFor(model => model.ShipmentDate)
                .Name("ShipmentDate")
                .HtmlAttributes(new { style = "width:240px" })
            )
            @Html.ValidationMessageFor(model => model.ShipmentDate, "", new { @class = "text-danger" })
        </div>
 
        <div class="editor form-group">
            @Html.LabelFor(model => model.EstimateShipmentDate, htmlAttributes: new { @class = "control-label col-md-2" })
            @(Html.Kendo().DatePickerFor(model => model.EstimateShipmentDate)
                .Name("EstimateShipmentDate")
                .HtmlAttributes(new { style = "width:240px" })
            )
            @Html.ValidationMessageFor(model => model.EstimateShipmentDate, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 01 Oct 2015, 12:29 PM

Hello technotes,

 

By looking at the code snippets you have provided, I suspect that the issue is caused by incorrect setup of the DropDownList widgets. When using [WidgetName]For helper, you should no set the Name. The name of the widget will be set automatically to the property name to which it is bound. This will make sure that the widget will be correctly bound to the appropriate field on the client-side. Thus, please remove the explicit Name settings from the widgets configuration.

 

Regards,
Rosen
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
technotes
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or