kendo ui grid with dropdownlist

时间:2013-12-04 05:55:15

标签: c# asp.net asp.net-mvc kendo-ui kendo-grid

我在使用asp.net mvc的kendo ui ajax网格中使用dropdownlist我正在使用dropdownlsit的更改方法因为其中一个网格列与下拉列表绑定但是当我设置值时我得到[object object]任何人都可以帮助我谢谢

<%: Html.Kendo().Grid<SSTS.Models.FaresBasedViewModel>()
.Name("grid2")
      .Columns(columns =>
      {
           columns.ForeignKey(p => p.StudentNumber, (System.Collections.IEnumerable)ViewData["students"], "StudentNumber", "StudentNumber")
        .Title("StudentNumber").Width(150);    
          columns.Bound(student => student.GivenName).Width(150);      
          columns.Bound(student => student.DateGovernmentFunded).Width(150);
          columns.Bound(student => student.SectionNumber).Width(150); ;
          columns.Bound(student => student.Description).Width(150);
          columns.Bound(student => student.Distance).Width(150);
          columns.Bound(student => student.FareNumber).Width(150); 
          columns.Bound(student => student.FareType).Width(150); 
          columns.Bound(student => student.TopeUpCode).Width(150);
          columns.Bound(student => student.ApplicationID).Width(150); 

          columns.Command(commands =>
          {
              commands.Edit(); 
              commands.Destroy(); 
          }).Title("Commands").Width(150);
      })
      .ToolBar(toolbar => toolbar.Create()) 
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .DataSource(dataSource =>
          dataSource.Ajax()
         .Events(events => events.Change("change"))
            .Model(model =>
            {
                model.Id(student => student.FareBaseID); 
                model.Field(p => p.StudentNumber).DefaultValue("");   

            })
           .Create(create => create.Action("FaresBased_Create", "ServiceUse"))  
           .Read(read => read.Action("FaresBased_Read", "ServiceUse")) 
           .Update(update => update.Action("FaresBased_Update", "ServiceUse")) 
           .Destroy(destroy => destroy.Action("FaresBased_Destroy", "ServiceUse")) 
        )
          .Pageable().Scrollable()
%>



    function change(e) {
        if (e.field == "StudentNumber") {
            var model = e.items[0];

            model.set("GivenName", model);

        }
    }

2 个答案:

答案 0 :(得分:0)

您应使用selectvalue使用id中的DropDownList作为参数设置DropDownList中的值。

答案 1 :(得分:0)

以下是我如何使用DropDownList过滤网格的示例。

@{
    ViewBag.Title = "Contacts";
    var customerId = ViewContext.RouteData.Values["id"];
}

<h2>@ViewBag.Title</h2>

@(
Html.Kendo()
    .Grid<Fss.Areas.Customers.Models.Contact>()
    .Name("contacts")
    .Columns(columns =>
    {
        columns.Bound(c => c.Active).ClientTemplate("<input type=\"checkbox\" disabled=\"disabled\" value=\"#= ContactId #\" # if (Active) { #checked='checked'# } #/>");
        columns.Bound(c => c.LastName);
        columns.Bound(c => c.FirstName);
        columns.Bound(c => c.Email);
        columns.Bound(c => c.Phone);
        columns.Bound(c => c.Mobile);
        columns.Bound(c => c.Changed).Format("{0:HH:mm:ss d/M/yyyy}");
        columns.Bound(c => c.ChangedBy);
        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        }).Width(172);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            @item.CreateButton()
            <div class="toolbar">
            @Html.Label("Customer", new { @class = "customer-label" })
            @(Html.Kendo()
                  .DropDownList()
                  .Name("customers")
                  .DataTextField("Name")
                  .DataValueField("CustomerId")
                  .AutoBind(true)
                  .Events(e => e.Change("changeCustomer"))
                  .Value(customerId.ToString())
                  .DataSource(source => source.Read(read => read.Action("GetCustomers", "Contacts")))
            )
            </div>
            </text>);
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable(pageable => pageable.ButtonCount(5))
    .Sortable(sortable => sortable.AllowUnsort(true).SortMode(GridSortMode.MultipleColumn))
    .Scrollable()
    .Filterable()
    .Reorderable(con => con.Columns(true))
    .Resizable(con => con.Columns(true))
    .ColumnResizeHandleWidth(5)
    .HtmlAttributes(new { style = "height:600px;" })
    .Events(e => e.Edit("edit"))
    .DataSource(dataSource => dataSource.Ajax()
                                        .PageSize(10)
                                        .Events(events => events.Error("error_handler"))
                                        .Model(model =>
                                        {
                                            model.Id(c => c.ContactId);
                                            model.Field(f => f.CustomerId).Editable(false);
                                            model.Field(f => f.Changed).Editable(false);
                                            model.Field(f => f.ChangedBy).Editable(false);
                                            model.Field(f => f.Error).Editable(false);
                                        })
                                        .Filter(filter => filter.Add(c => c.CustomerId.ToString() == customerId.ToString()))
                                        .Create(c => c.Action("Create", "Contacts").Data("getCustomerId"))
                                        .Read(r => r.Action("Read", "Contacts"))
                                        .Update(u => u.Action("Edit", "Contacts"))
                                        .Destroy(d => d.Action("Delete", "Contacts")))
)

<style scoped="scoped">    
    #contacts .k-toolbar
    {
        min-height: 27px;
        padding: 1.3em;
    }

    .customer-label
    {
        vertical-align: middle;
        padding-right: .5em;
    }

    .toolbar
    {
        float: right;
    }
</style>
<script type="text/javascript">
    function getCustomerId() {
        return {id:$("#customers").val()};
    }
    function changeCustomer(e) {
        var value = this.value(), grid = $("#contacts").data("kendoGrid");

        if (value) {
            grid.dataSource.filter({ field: "CustomerId", operator: "eq", value: parseInt(value) });
        }
        else {
            grid.dataSource.filter({});
        }
    }
    function edit(e) {        
        $.each(["Changed", "ChangedBy", "Error", "ContactId", "CustomerId"], function (index, value) {
            e.container.find("label[for='" + value + "']").parent().attr("style", "display:none;");
            e.container.find("input[name='" + value + "']").parent().attr("style", "display:none;");
        });
    }
</script>
@Scripts.Render("~/bundles/editing")

这是控制器代码:

using AutoMapper;
using Fss.Areas.Customers.Models;
using Fss.Models;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System;
using System.Linq;
using System.Web.Mvc;
using System.Web.Routing;

namespace Fss.Areas.Customers.Controllers
{
    public class ContactsController : Controller
    {
        FssData.EntitiesModel _DbContext;

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create([DataSourceRequest]
                                   DataSourceRequest request, Contact contact, int id)
        {
            if (contact != null && this.ModelState.IsValid)
            {
                var currentDateTime = this._DbContext.GetDateTime();
                var customer = this._DbContext.Customers.FirstOrDefault(c => c.CustomerId == id);

                if (customer != null)
                {
                    var dataContact = Mapper.Map(contact, new FssData.Contact());
                    dataContact.CustomerId = customer.CustomerId;
                    dataContact.SyncId = Guid.NewGuid();
                    dataContact.Created = currentDateTime;
                    dataContact.CreatedBy = this.User.Identity.Name;
                    dataContact.Changed = currentDateTime;
                    dataContact.ChangedBy = this.User.Identity.Name;
                    this._DbContext.Add(dataContact);
                    this._DbContext.SaveChanges();
                    Mapper.Map(dataContact, contact);
                }
            }

            return this.Json(new[]
                             {
                                 contact
                             }.ToDataSourceResult(request, this.ModelState));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Delete([DataSourceRequest]
                                   DataSourceRequest request, Contact contact)
        {
            if (contact != null && this.ModelState.IsValid)
            {
                var dataContact = this._DbContext.Contacts.FirstOrDefault(c => c.ContactId.Equals(contact.ContactId));
                if (dataContact != null)
                {
                    this._DbContext.Delete(dataContact);
                    this._DbContext.SaveChanges();
                }
            }

            return this.Json(new[]
                             {
                                 contact
                             }.ToDataSourceResult(request, this.ModelState));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Edit([DataSourceRequest]
                                 DataSourceRequest request, Contact contact)
        {
            if (contact != null && this.ModelState.IsValid)
            {
                var currentDateTime = this._DbContext.GetDateTime();
                var dataContact = this._DbContext.Contacts.FirstOrDefault(c => c.ContactId.Equals(contact.ContactId));

                if (dataContact != null)
                {
                    Mapper.Map(contact, dataContact);

                    dataContact.Changed = currentDateTime;
                    dataContact.ChangedBy = this.User.Identity.Name;

                    this._DbContext.SaveChanges();

                    Mapper.Map(dataContact, contact);
                }
            }
            return this.Json(new[]
                             {
                                 contact
                             }.ToDataSourceResult(request, this.ModelState));
        }

        public ActionResult Customer(int id)
        {
            return this.View();
        }

        public ActionResult GetCustomers()
        {
            return this.Json(this._DbContext.Customers.Select(c => new { Name = c.Name, CustomerId = c.CustomerId }), JsonRequestBehavior.AllowGet);
        }

        public ActionResult Index()
        {
            var customer = this._DbContext.Customers.FirstOrDefault();
            return this.RedirectToAction(actionName: "Customer", routeValues: new { id = customer != null ? customer.CustomerId : 0 });
        }

        public ActionResult Read([DataSourceRequest]
                                 DataSourceRequest request)
        {
            return this.Json(this._DbContext.Contacts.Select(c => Mapper.Map<Contact>(c)).ToDataSourceResult(request));
        }

        protected override void Initialize(RequestContext requestContext)
        {
            this._DbContext = ContextFactory.GetContextPerRequest();
            base.Initialize(requestContext);
        }
    }
}