Grid Custom template popup Save issue

2 posts, 0 answers
  1. technotes
    technotes avatar
    9 posts
    Member since:
    Jan 2013

    Posted 29 Sep 2015 Link to this post

    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>

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 01 Oct 2015 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top