DropdownList Change Event, change the Kendo Grid Data

Question

I want by changing the DropDownList, grid update and fill with new data, Below you can see my code, I dont know how run event on dropdownlist and how pass the selected item to the controller and the update my grid

this is my View:

         <div class="col-md-4">
            <div class="form-group">
                @Html.Label("questionnaireName", new {@class = "control-label col-md-3"})
                <div class="col-md-9" onclick="">
                    @Html.DropDownList("questionnairesID", null, new {style = "width:162px;Height:25px"})
                    @*@Html.ValidationMessageFor(model => model.questionnairesID)*@
                </div>
            </div>
        </div>
<div>
    @(Html.Kendo().Grid<Mehvar_New.Models.QuestionnaireDetail>()
    .Name("grid")
    .Columns(columns =>
    {
    columns.Bound(c => c.QuestionText);
    columns.Bound(c => c.Value);
    columns.Command(command => {command.Destroy(); }).Width(180);
  })
  .ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save();
  }) 
  .Editable(editable => editable.Mode(GridEditMode.InCell))
  .Scrollable()
  .DataSource(dataSource => dataSource
      .Ajax()
      .Batch(true)
      .Model(model => model.Id(p => p.ID))
      .Read(read => read.Action("QuestionnaireDetail_Read", "QuestionGrid"))
      .Create(create => create.Action("QuestionnaireDetail_Create", "QuestionGrid"))
      .Update(update => update.Action("QuestionnaireDetail_Update", "QuestionGrid"))
      .Destroy(destroy => destroy.Action("QuestionnaireDetail_Destroy", "QuestionGrid"))
  )
)

and this is my Controller:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Mehvar_New.Models;

namespace Mehvar_New.Controllers
{
  public class QuestionGridController : Controller
  {
    private proshat_94Entities db = new proshat_94Entities();

    public ActionResult Index()
    {
        Questionnaires questionnaires = new Questionnaires();
        Customer customer = new Customer();
        ViewBag.questionnairesID = new SelectList(db.Questionnaires, "QuestionnaireID", "QuestionnaireName");
        ViewBag.Code = new SelectList(db.Customer, "Code", "Name");
        return View();
    }

    public ActionResult QuestionnaireDetail_Read([DataSourceRequest]DataSourceRequest request)
    {

        var questionnairedetail = db.QuestionnaireDetail.ToList(); ;
        DataSourceResult result = questionnairedetail.ToDataSourceResult(request, questionnaireDetail => new
        {
            ID = questionnaireDetail.ID,
            QuestionText = questionnaireDetail.QuestionText,
            Value = questionnaireDetail.Value,
        });

        return Json(result);
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult QuestionnaireDetail_Create([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<QuestionnaireDetail> questionnairedetail)
    {
        var entities = new List<QuestionnaireDetail>();
        if (questionnairedetail != null && ModelState.IsValid)
        {
            foreach(var questionnaireDetail in questionnairedetail)
            {
                var entity = new QuestionnaireDetail
                {
                        QuestionText = questionnaireDetail.QuestionText,
                        Value = questionnaireDetail.Value,
                };

                db.QuestionnaireDetail.Add(entity);
                entities.Add(entity);
            }
            db.SaveChanges();
        }

        return Json(entities.ToDataSourceResult(request, ModelState));
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult QuestionnaireDetail_Update([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<QuestionnaireDetail> questionnairedetail)
    {
        var entities = new List<QuestionnaireDetail>();
        if (questionnairedetail != null && ModelState.IsValid)
        {
            foreach(var questionnaireDetail in questionnairedetail)
            {
                var entity = new QuestionnaireDetail
                {
                    ID = questionnaireDetail.ID,
                    QuestionText = questionnaireDetail.QuestionText,
                    Value = questionnaireDetail.Value,
                };

                entities.Add(entity);
                db.QuestionnaireDetail.Attach(entity);
                db.Entry(entity).State = EntityState.Modified;                        
            }
            db.SaveChanges();
        }

        return Json(entities.ToDataSourceResult(request, ModelState));
    } 

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult QuestionnaireDetail_Destroy([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<QuestionnaireDetail> questionnairedetail)
    {
        var entities = new List<QuestionnaireDetail>();
        if (ModelState.IsValid)
        {
            foreach(var questionnaireDetail in questionnairedetail)
            {
                var entity = new QuestionnaireDetail
                {
                    ID = questionnaireDetail.ID,
                    QuestionText = questionnaireDetail.QuestionText,
                    Value = questionnaireDetail.Value,
                };

                entities.Add(entity);
                db.QuestionnaireDetail.Attach(entity);
                db.QuestionnaireDetail.Remove(entity);
            }
            db.SaveChanges();
        }

        return Json(entities.ToDataSourceResult(request, ModelState));
    }

    protected override void Dispose(bool disposing)
    {
        db.Dispose();
        base.Dispose(disposing);
    }
}
}

Answer 1

Put your grid inside partial view and try to send data from controller to partial view, then refresh partial view. So first create a partial view:

@model Mehvar_New.Models.QuestionnaireDetail
<div>
    @(Html.Kendo().Grid<>(Model)
    .Name("grid")
    .Columns(columns =>
    {
    columns.Bound(c => c.QuestionText);
    columns.Bound(c => c.Value);
    columns.Command(command => {command.Destroy(); }).Width(180);
  })
  .ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save();
  }) 
  .Editable(editable => editable.Mode(GridEditMode.InCell))
  .Scrollable()
  .DataSource(dataSource => dataSource
      .Ajax()
      .Batch(true)
      .Model(model => model.Id(p => p.ID))
      .Read(read => read.Action("QuestionnaireDetail_Read", "QuestionGrid"))
      .Create(create => create.Action("QuestionnaireDetail_Create", "QuestionGrid"))
      .Update(update => update.Action("QuestionnaireDetail_Update", "QuestionGrid"))
      .Destroy(destroy => destroy.Action("QuestionnaireDetail_Destroy", "QuestionGrid"))
  )
)
</div>

Then create a div tag for partial view in your main view:

         <div class="col-md-4">
            <div class="form-group">
                @Html.Label("questionnaireName", new {@class = "control-label col-md-3"})
                <div class="col-md-9" onclick="">
                    @Html.DropDownList("questionnairesID", null, new {style = "width:162px;Height:25px"})
                    @*@Html.ValidationMessageFor(model => model.questionnairesID)*@
                </div>
            </div>
        </div>
<div Id="MyGridDiv">
</div>

Then add your partial view method to your controller:

[HttpGet]
        public ActionResult MyGrid(Mehvar_New.Models.QuestionnaireDetail questionnaireDetail)
        {
            return PartialView("MyGrid");
        }

Then you should arrange your jQuery:

$('#qustionid').change(function () {
        $.ajax({
            url: '/yourcontroller/QuestionnaireDetail_Read',
            type: 'GET',
            cache: false,
            async: true,
            data: { selectedValue = $(this).val(); },
        })
    .done(function (partialViewResult) {
        $("#MyGridDiv").html(partialViewResult);
    })
    }
    else {
        $("#MyGridDiv").html("");
    }
});

Now you should change your controller like:

public ActionResult QuestionnaireDetail_Read(int selectedValue)
    {

        var questionnairedetail = db.QuestionnaireDetail.ToList(); ;
        DataSourceResult result = questionnairedetail.ToDataSourceResult(request, questionnaireDetail => new
        {
            ID = questionnaireDetail.ID,
            QuestionText = questionnaireDetail.QuestionText,
            Value = questionnaireDetail.Value,
        });

        return PartialView("MyGrid", questionnaireDetail);;
    }

Check details of the codes, They aren't accurate!.