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

Problem with Grid Popup Editor and Combo Boxes while in Add Mode.

3 Answers 126 Views
Grid
This is a migrated thread and some comments may be shown as answers.
L
Top achievements
Rank 1
L asked on 18 Sep 2014, 01:10 PM
I have a Grid with a popup editor that contains combo boxes.  Each of the boxes works fine when in Edit mode.  However, when I click Add New, and then "Update" button on the template....the values from the Combo Boxes are not being returned from the form.  The fields remain NULL.   I throw an alert up to verify that the selection was made...which it is.  But the record does not get sent to the controller with the value that is selected.  


Here is the Popup Editor Template

@model sgrc.vpd.home.Models.vwInventory
 
 
<script>
 
    function onSelect(e) {
            var combobox = $("#ItemType").data("kendoComboBox");
            var dataItem = this.dataItem(e.item.index());
            alert(dataItem.ItemType + " " + dataItem.TypeID);
     };
 
</script>
 
 
@{
    ViewBag.Title = "Edit Inventory Item";
}
 
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
 
        @Html.HiddenFor(model => model.ItemID)
        @Html.HiddenFor(model => model.VehicleID)
        @Html.HiddenFor(model => model.memorycard)
 
        @Html.HiddenFor(model => model.remarks)
        @Html.HiddenFor(model => model.signon)
        @Html.HiddenFor(model => model.signoff)
        @Html.HiddenFor(model => model.AssignedName)
 
        @Html.HiddenFor(model => model.caliber)
 
     
     
     
   <div id="tabstrip">
 
        <ul>
                <li class="k-state-active" >
                    Item Information
                </li>
                <li  >
                    Assignment Information
                </li>
                <li  >
                    Vehicle Information
                </li>
            </ul>   
 
        <div id="Item Information">
 
 
                <div class="edit-field">
                <br />
 
                <label for="ItemType" style="color:#212a33">Select Type:</label>
                    @(Html.Kendo().ComboBox()
                            .Name("ItemType")
                            .Placeholder("Select Item Type...")
                            .DataTextField("ItemType")
                            .DataValueField("TypeID")
                            .Filter("contains")
                            .Events(e => e.Select("onSelect"))
                            .DataSource(source =>
                            {
                                source.Read(read =>
                                {
                                    read.Action("GetItems", "Inventory");
                                })
                                .ServerFiltering(false);
                            })
                    )
 
 
                <label for="Status" style="color:#212a33">Select Status:</label>
                    @(Html.Kendo().ComboBox()
                            .Name("StatusID")
                            .Placeholder("Select Status...")
                            .DataTextField("Status")
                            .DataValueField("StatusID")
                            .Filter("contains")
                            .DataSource(source =>
                            {
                                source.Read(read =>
                                {
                                    read.Action("GetStatus", "Inventory");
                                })
                                .ServerFiltering(false);
                            })
                    )
                </div>
 
                <div class="edit-field">
                    @Html.LabelFor(model => model.serialnumber, "Serial Number/VIN")
                    @Html.TextBoxFor(model => model.serialnumber, new { style = "width: 80%; float:right" })
                    @Html.ValidationMessageFor(model => model.serialnumber)
                </div>
                             
                <div class="edit-field">
                    @Html.LabelFor(model => model.Description, "Description")
                    @Html.TextAreaFor(model => model.Description, new { cols = 83, rows = 5 })
                    @Html.ValidationMessageFor(model => model.Description)
                </div>
  
                <div class="edit-field">
                    @Html.LabelFor(model => model.PurchaseDate, "Date Purchased")
                    @Html.EditorFor(model => model.PurchaseDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })
                    @Html.ValidationMessageFor(model => model.PurchaseDate)
 
                    @Html.LabelFor(model => model.InServiceDate, "In Service Date", new { style = "color:#212a33" })
                    @Html.EditorFor(model => model.InServiceDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })
                    @Html.ValidationMessageFor(model => model.InServiceDate)
                </div>
 
        </div>
    
        <div id="Assignment Information">
 
                <div class="edit-field">
                <br />
                <label for="AssignedID" style="color:#212a33 "width: 80%" >Assigned Officer:</label>
 
                @(Html.Kendo().ComboBox()
                        .Name("AssignedID")
                        .DataTextField("FullName")
                        .DataValueField("PersonID")
                        .Placeholder("Select Officer")
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("GetOfficers", "Inventory");
                            })
                            .ServerFiltering(false);
 
                        })
 
                 )
 
 
                    @Html.LabelFor(model => model.AssignedDate, "Date Assigned", new { style = "color:#212a33" })
                    @Html.EditorFor(model => model.AssignedDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })
                    @Html.ValidationMessageFor(model => model.AssignedDate)
 
                </div>
 
 
 
                <div class="edit-field" style="width:40%">
                    <label for="AssignedBy" style="color:#212a33" >Assigned By</label>
                    @(Html.Kendo().ComboBox()
                            .Name("AssignedBy")
                            .DataTextField("FullName")
                            .DataValueField("PersonID")
                            .Placeholder("Select Officer")
                            .DataSource(source =>
                            {
                                source.Read(read =>
                                {
                                    read.Action("GetOfficers", "Inventory");
                                })
                                .ServerFiltering(false);
 
                            })
 
                     )
                </div>
 
 
                <div class="edit-field">
 
                    @Html.LabelFor(model => model.lastupdated, "Last Updated", new { style = "color:#212a33" })
                    @Html.EditorFor(model => model.lastupdated)
                    @Html.ValidationMessageFor(model => model.lastupdated)
 
 
                    @Html.LabelFor(model => model.lastupdatedby, "Last Updated By")
                    @Html.TextBoxFor(model => model.lastupdatedby, new { disabled = "disabled", style = "width: 30%; float:right" })
                </div>
                             
 
 
 
 
        </div>
 
        <div id="Vehicle Information">
 
            <div class="edit-field">
            <br />
                @Html.LabelFor(model => model.make, "Make", new { style = "color:#212a33" })
                @Html.TextBoxFor(model => model.make, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })
                @Html.ValidationMessageFor(model => model.make)
            </div>
         
            <div class="edit-field">
                @Html.LabelFor(model => model.model, "Model", new { style = "color:#212a33" })
                @Html.TextBoxFor(model => model.model, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })
                @Html.ValidationMessageFor(model => model.model)
            </div>
 
            <div class="edit-field">
                @Html.LabelFor(model => model.year, "Year", new { style = "color:#212a33" })
                @Html.TextBoxFor(model => model.year, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })
                @Html.ValidationMessageFor(model => model.year)
            </div>
 
            <div class="edit-field">
                @Html.LabelFor(model => model.color, "Color", new { style = "color:#212a33" })
                @Html.TextBoxFor(model => model.color, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })
                @Html.ValidationMessageFor(model => model.color)
            </div>
 
            <div class="edit-field">
                @Html.LabelFor(model => model.tag, "Tag", new { style = "color:#212a33" })
                @Html.TextBoxFor(model => model.tag, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })
                @Html.ValidationMessageFor(model => model.tag)
            </div>
    
        </div>
         
</div>
         
}
 
<script>
    $(document).ready(function () {
        $("#tabstrip").kendoTabStrip({
            animation: {
                open: {
                    effects: "fadeIn"
                }
            }
        });
    });
</script>
 
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}


Here is the grid. 

@(Html.Kendo().Grid<sgrc.vpd.home.Models.vwInventory>()
    .Name("grid")
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
    .Columns(columns =>
    {
 
        columns.Bound(dataInventory => dataInventory.serialnumber).Title("Serial#").Width(200);
        columns.ForeignKey(dataInventory => dataInventory.ItemType, (System.Collections.IEnumerable)ViewData["itemtypes"], "TypeID", "ItemType")
.Title("Type").Width(250);
         
        columns.ForeignKey(dataInventory => dataInventory.StatusID, (System.Collections.IEnumerable)ViewData["status"], "StatusID", "status")
.Title("Status").Width(250);
 
        columns.ForeignKey(dataInventory => dataInventory.AssignedID, (System.Collections.IEnumerable)ViewData["officers"], "PersonID", "FullName")
        .Title("Assigned To").Width(250);
        columns.Bound(dataInventory => dataInventory.Description).Title("Description").Hidden(true);
        //columns.Bound(dataInventory => dataInventory.StatusID).Title("status").Hidden(true);
        columns.ForeignKey(dataInventory => dataInventory.AssignedBy, (System.Collections.IEnumerable)ViewData["officers"], "PersonID", "FullName")
        .Title("Assigned By").Width(250);
        columns.Bound(dataInventory => dataInventory.AssignedDate).Title("Date Assigned").Format("{0:g}");
                 
  
        columns.Bound(dataInventory => dataInventory.ItemID).Hidden(true);
        columns.Bound(dataInventory => dataInventory.VehicleID).Title("VehicleID").Width(150).Hidden(true);
        columns.Bound(dataInventory => dataInventory.memorycard).Title("memorycard").Hidden(true);
        columns.Bound(dataInventory => dataInventory.year).Title("year").Hidden(true);
        //columns.Bound(dataInventory => dataInventory.status).Title("status").Hidden(true);
        columns.Bound(dataInventory => dataInventory.make).Title("Make").Hidden(true);
        columns.Bound(dataInventory => dataInventory.model).Title("Model").Hidden(true);
        columns.Bound(dataInventory => dataInventory.color).Title("Color").Hidden(true);
        columns.Bound(dataInventory => dataInventory.tag).Title("Tag").Hidden(true);
        columns.Bound(dataInventory => dataInventory.signon).Title("Signon").Hidden(true);
        columns.Bound(dataInventory => dataInventory.signoff).Title("Signoff").Hidden(true);
        columns.Bound(dataInventory => dataInventory.Ten84).Title("10-84").Format("{0:g}").Hidden(true);
        columns.Bound(dataInventory => dataInventory.lastupdated).Hidden(true);
        columns.Bound(dataInventory => dataInventory.lastupdatedby).Title("Updated By:").Hidden(true);
        //columns.Bound(dataInventory => dataInventory.AssignedID).Title("OfficerID").Hidden(true);
        columns.Bound(dataInventory => dataInventory.remarks).Title("Remarks").Hidden(true);
        columns.Bound(dataInventory => dataInventory.PurchaseDate).Title("Purchase Date").Format("{0:MM/dd/yyyy}").Hidden(true);
        columns.Bound(dataInventory => dataInventory.InServiceDate).Title("In Service Date").Format("{0:MM/dd/yyyy}").Hidden(true);
        columns.Bound(dataInventory => dataInventory.caliber).Hidden(true);
 
        columns.Command(commands =>
              {
                  commands.Edit();
                  commands.Destroy();
              }).Title("Commands").Width(180);
    })
    .ToolBar(toolbar =>
        {
            toolbar.Create();
           // toolbar.Save();
        })
         
    .Events(e => e.SaveChanges("onSaveChanges"))
 
    //.Events(events => events.Save("onSave"))
    //.Events(events => events.Edit("onEdit"))
 
 
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditInventory"))
    .DataSource(dataSource => dataSource
    .Ajax()
    .Events(e => e.Error("onError")) // Handle the "error" event (errors set in controller)
    .Batch(false)
    .ServerOperation(false)  // Paging, sorting, filtering and grouping will be done client-side
 
         
        .Model(model =>
            {
                model.Id(dataInventory => dataInventory.ItemID);
                //model.Field(dataDestruction => dataDestruction.CaseID).Editable(false);
            })
             
        .Create(create => create.Action("Single_Create", "Inventory"))
        .Read(read => read.Action("Item_Read", "Inventory"))
        .Update(update => update.Action("Single_Update", "Inventory"))
        .Destroy(destroy => destroy.Action("Item_Destroy", "Inventory"))
        )
 
        .AutoBind(true)
        .Pageable(page => page.Enabled(true).PageSizes(new[] { 10, 20, 30, 40 }))
        .Sortable()
        .Navigatable()
        //.Scrollable(scrolling => scrolling.Enabled(false))
        .Events(e => e.Change("onChange"))
        //.Filterable()
        //.Scrollable(scrolling => scrolling.Enabled(true))
        //.Scrollable(s => s.Height("auto"))
        .HtmlAttributes(new {style = "width:960px;"})
     .Filterable()
       
)

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 22 Sep 2014, 08:04 AM
Hi David,

I already answered to this query in duplicated support ticket created by you - #861057. Please keep in mind that it is highly recommended that you keep related questions in one support thread or a forum post, so that we can easily keep track of your support history and provide better answers in a shorter time.

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
L
Top achievements
Rank 1
answered on 22 Sep 2014, 01:26 PM
Vladimir, 

OK.  I was going on the chance that another member of the forum that isn't an admin may have experienced this and had a solution.   

Are these forums just for Admins to respond to?

David
0
Vladimir Iliev
Telerik team
answered on 23 Sep 2014, 12:39 PM
Hi David,

These forums are premium ones - the other members of the community can review/answer the questions posted here, however there is 48h guaranteed response time which means that if the question is not yet answered we will answer it.

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
L
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
L
Top achievements
Rank 1
Share this question
or