Asp net Core Grid - dropdown not show selected value

1 Answer 737 Views
DropDownList Grid
Lukas
Top achievements
Rank 1
Iron
Lukas asked on 19 Dec 2021, 01:58 PM | edited on 19 Dec 2021, 01:59 PM

Hello I facing one issue with Grid. I have in custom DropDownListFor my model.

Everything like load option for dropdown, create new row with default works fine but when I change form default to other item in View I see still default value. But when I submit create or update button I see selected item..

I attached 2 screenshots where in default you will see default value and on click you see selected (attachment selected)

Here is my view ManageRecipe.cshtml

@{
}
@model Recipes.Business.ViewModels.Recipes.ManageRecipeViewModel
@using Recipes.Business.ViewModels.Recipes
<div class="container-fluid">
    <div class=" d-sm-flex align-items-center justify-content-between mb-4">
                <h3 class="h3 mb-2 text-gray-800">@ViewBag.FormName</h3>
    </div>
    <div class="card-shadow mb-4">
        <form method="post">
        <div class="card-header py-3 border-all">
            <div class=" d-sm-flex align-items-center justify-content-between mb-4">
                <h5 class="h5 mb-2 text-gray-800">Hlavička Receptury</h5>
            </div>
                <div class="form-row ">
                    <div class="col ">
                        <label asp-for="@Model.RecipeId">Číslo Receptury</label>
                        <input type="text" asp-for="@Model.RecipeId" class="form-control" required placeholder="Číslo Receptury">
                    </div>
                    <div class="col ">
                        <label asp-for="@Model.RecipeName">Název Receptury</label>
                        <input asp-for="@Model.RecipeName" type="text" class="form-control " required placeholder="Název Receptury">
                    </div>
                    <div class="col">
                        <label asp-for="SelectedCalculationId">Metoda výpočtu</label>
                             <kendo-combobox name="SelectedCalculationId" filter="FilterType.Contains"
                                                bind-to="Model.CalculationMethods"
                                                value="@Model.SelectedCalculationId"
                                                placeholder="Vyber metodu výpočtu..."
                                                datatextfield="CalculationMethodName"
                                                datavaluefield="CalculationMethodId"
                                                style="width:100%">
                                </kendo-combobox>
                    </div>
                </div>
                <div class="form-row">      
                    <div class="col">
                        <label asp-for="@Model.RecipeNote">Poznámka</label>
                        <input type="text" class="form-control text-xs" id="inpNote" placeholder="Poznámka k receptuře">
                    </div>
                    <div class="col" id="prescriptionInput">
                            <label for="prescriptionComboBox_input">Předpis</label>
                            <kendo-combobox name="prescriptionComboBox" filter="FilterType.Contains"
                                            bind-to="Model.Prescriptions"
                                            value="@Model.SelectedPrescriptionId"
                                            placeholder="Vyber předpis..."
                                            datatextfield="PrescriptionName"
                                            datavaluefield="PrescriptionId"
                                            style="width:100%"
                                            >
                            </kendo-combobox>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col">
                        <div class="form-check">
                            <label class="form-check-label" for="switch">
                                Receptura pro barvení
                            </label>
                            @(Html.Kendo().Switch()
                            .Name("IsColorRecipe")
                            .Messages(c=>c.Checked("Ano").Unchecked("Ne"))
                            .Events(ev => ev.Change("changeSwitch"))
                            .Checked(@Model.IsColorRecipe)
                            )
                        </div>
                    </div>
                    <div id="colorInputs"class="form-row" hidden >
                        <div class="col ">
                            <label asp-for="@Model.WaterInRecipe">Voda na sůl</label>
                            <input type="number" class="form-control text-xs" asp-for="@Model.WaterInRecipe" id="inpWater">
                        </div> 
                        <div class=" col">
                            <label asp-for="@Model.SaltInRecipe">Program </label>
                            <input type="number"  class="form-control text-xs" asp-for="@Model.SaltInRecipe" id="inpProgram">
                        </div>
                    </div>
                </div>
        </div>
         <div class ="card-body mt-2 py-3 border-all">
            <div class="table-responsive">
                @(Html.Kendo().Grid<RecipeLinesDetailViewModel>()
                .Name("#grid")
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                
                .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .Read(read=>read.Action("Recipes_ReadLines", "Recipes"))
                .Update(update => update.Action("Update", "Recipes"))
                .Create(create => create.Action("Create", "Recipes"))
                .Destroy(destroy => destroy.Action("Destroy", "Recipes"))
                .Model(m =>{
                    m.Id(id=>id.RecipeLineId);
                    m.Field(id=>id.RecipeLineId).Editable(false);
                    m.Field(f=>f.ChemistryRecipeViewModel).DefaultValue(
                        new ChemistryRecipeViewModel{
                            ChemistryId="1",
                            ChemistryName="testChemistry"
                        });
                }))

                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Save();
                    toolbar.Excel();
                    toolbar.Search();
                })

                .Columns(c=>{
                    c.Bound(c=>c.RecipeLineId).Hidden(true);
                    c.Bound(c=>c.ChemistryRecipeViewModel.ChemistryName).EditorTemplateName("ChemistryIdEditor");
                    c.Bound(c=>c.Dosage);
                    c.Bound(c=>c.Units);
                    c.Bound(c=>c.Rounded);
                    c.Bound(c=>c.Units);
                    c.Bound(c=>c.Comment);
                })
                .Excel(excel=>excel.ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
                .Pageable()
                .Sortable()
                .Filterable()
                .Editable())
            </div>
        </div>
        <div class="card-footer mt-2 py-3 border-top">
            <button class="btn btn-primary" type="submit">Uložit</button>
        </div>
        </form>
                       
    </div>
</div>


<style >
   .border-all{border: 0.15rem solid #9e9e9e !important;}
   .border-top{border-top: 0.15rem solid #36b9cc !important;}
   .k-grid .k-grid-search {
        margin-left: auto;
        margin-right: 0;
    }
</style>

@section Scripts{

<script>
    function changeSwitch(e){
        if(e.checked){
                $('#IsColorRecipe').attr('checked','true')
                document.getElementById("colorInputs").hidden = false;
                document.getElementById("inpWater").setAttribute("required","");
                document.getElementById("inpProgram").setAttribute("required","");
            } 
            else{
                document.getElementById("colorInputs").hidden = true;
                document.getElementById("inpWater").removeAttribute("required","");
                document.getElementById("inpProgram").removeAttribute("required","");
            }
    }
    
</script>
}

here is ChemistryIdEditor.cshtml


@model Recipes.Business.ViewModels.Recipes.ChemistryRecipeViewModel

@(Html.Kendo().DropDownListFor(x => x).DataSource(x => x.Read(y => y
.Action("AllChemistry", "Recipes")))
.DataTextField("ChemistryName").DataValueField("ChemistryId")
.Filter(FilterType.Contains)
.HtmlAttributes(new { data_bind = "value: ChemistryName" }))


here is model class RecipeLinesDetailViewModel


public class RecipeLinesDetailViewModel
    {
        
        public int? RecipeLineId { get; set; }
        
        public ChemistryRecipeViewModel ChemistryRecipeViewModel { get; set; }
        [UIHint("Units")]

        public UnitRecipeViewModel Units { get; set; }

        [Display(Name = "Dávkování")]
        public float Dosage { get; set; }
        [Display(Name = "Zaokrouhlení")]
        public float Rounded { get; set; }

        [Display(Name = "Poznámka")]
        public string? Comment { get; set; }
    }

and finally controller


using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using Recipes.Business.Interfaces;
using Recipes.Business.ViewModels.Recipes;
using Recipes.Data.Models;
using System;
using System.Collections.Generic;
using System.Linq;

namespace Recipes.Controllers
{
    public class RecipesController : Controller
    {
        IRecipeManager recipeManager;
        IChemistryManager chemistryManager;

        public RecipesController(IRecipeManager recipeManager,IChemistryManager chemistryManager)
        {
            this.recipeManager = recipeManager;
            this.chemistryManager = chemistryManager;
        }

        public IActionResult Index()
        {

            return View();
        }

        public IActionResult ManageRecipe()
        {
            ViewBag.FormName = "Nová receptura";

            return View(recipeManager.GetNewRecipeData());
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult ManageRecipe(ManageRecipeViewModel model)
        {
            if (!ModelState.IsValid)
            {
                return View(model);
            }
            return View();
        }
        public IActionResult Recipes_Read([DataSourceRequest] DataSourceRequest request)
        {
            
            return Json(recipeManager.GetRecipesOverView().ToDataSourceResult(request));
        }
        public IActionResult Recipes_ReadLines([DataSourceRequest] DataSourceRequest request)
        {
            var x = recipeManager.GetTestData();
            return Json(x.ToDataSourceResult(request));
        }
        public IActionResult AllChemistry()
        {
            return Json(recipeManager.GetRecipesChemistry());
        }
    }
}

I read all elated topic here but if I modify code I still have same result..

Can someone help me?

Many thx in advance

Lukas

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Lukas
Top achievements
Rank 1
Iron
answered on 19 Dec 2021, 05:06 PM

Problem found it was in Editor

Wrong Data_bind value

 

Tags
DropDownList Grid
Asked by
Lukas
Top achievements
Rank 1
Iron
Answers by
Lukas
Top achievements
Rank 1
Iron
Share this question
or