2 Problem in my Grid ?

[Ahmed]

Hi

i have download nice Tools knedo ui and try to use Grid in MVC - it works fine but i have two problems and i don't know how to resolve them 

1. i can't get filed from joined table to let me display text filed in my grid as example (Supplier table is joined to Products table in SupplierID) but i can't view CompanyName in my grid i try it as:

columns.Bound(o => o.Supplier).ClientTemplate("#=Supplier.CompanyName#").Width(160);

but it make grid now working ?

 2. i need to insert dropdownlist in my grid that contain Supplier  ID and "CompanyName" but it now working for me too i try add:

model.Field(o => o.SupplierID).DefaultValue(ViewData["defaultCategory"] as AjaxHierarchyEditing.Models.Supplier);

 and fill ViewData in Home Controller

 my full Code is:

HTML Code:

<div class="k-rtl">

    <script type="text/kendo" id="productsTemplate">
        @(Html.Kendo().Grid<ProductViewModel>()
            .Name("Categories_#=CategoryID#")
            .Columns(columns =>
            {

                columns.Bound(o => o.ProductName).Width(101).Title("اسم الصنف");
                columns.Bound(o => o.UnitPrice).Width(140).Title("سعر الوحده").HeaderHtmlAttributes(new { style = "font-size:12pt;" });
                columns.Bound(o => o.QuantityPerUnit).Width(200).Title("الكميه للوحده");
                columns.Bound(o => o.ReorderLevel).Width(200).Title("مستوي اعاده الطلب");
                columns.Bound(o => o.Supplier).ClientTemplate("#=Supplier.CompanyName#").Width(160);
                columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();

                });
            })
            .ToolBar(tools => tools.Create().Text("اضافه صنف جديد"))
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Pageable()
            .Sortable()
            .Filterable()
            .DataSource(source => source
            .Ajax()
            .Model(model =>
                {
                    model.Id(o => o.ProductID);
                    model.Field(o => o.ProductID).Editable(false);
                    model.Field(o => o.SupplierID).DefaultValue(ViewData["defaultCategory"] as AjaxHierarchyEditing.Models.Supplier);
                })
            .Events(events => events.Error("error_handler"))
            .Read(read => read.Action("Read_Product", "products", new { id = "#=CategoryID#" }))
            .Update(update => update.Action("Update_Product", "products"))
            .Create(create => create.Action("Create_Product", "products", new { id = "#=CategoryID#" }))
            .Destroy(destroy => destroy.Action("Destroy_Product", "products")))
            .ToClientTemplate()
        )
    </script>
</div>



<div class="k-rtl">
    @(Html.Kendo().Grid<Category>()
    .Name("Categories_")
    .Columns(columns =>
    {
        columns.Bound(e => e.CategoryName).Width(200).Title("اسم المجموعه"); ;
        columns.Bound(e => e.Description).Width(400).Title("الوصف"); ;
        columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            });
    })

    .ToolBar(tools => tools.Create().Text("اضافه مجموعه جديده"))
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable().Sortable().Filterable()
    .DataSource(source => source.Ajax()
    .Model(model =>
       {
            model.Id(e => e.CategoryID);
       })
     .Events(events => events.Error("error_handler"))
     .Read(read => read.Action("Read_category", "kinds"))
     .Update(update => update.Action("Update_category", "kinds"))
     .Create(create => create.Action("Create_category", "kinds"))
     .Destroy(destroy => destroy.Action("Destroy_category", "kinds")))
     .ClientDetailTemplateId("productsTemplate")
    )
</div>

<script type="text/javascript">
    function error_handler(e) {
        productsTemplate
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

Home Controller Code:

public ActionResult Index()
{
    PopulateCategories();
    return View();
}

private void PopulateCategories()
{
    ViewData["defaultCategory"] = new SelectList(context.Suppliers, "SupplierID", "CompanyName");
}

Product Controller Read Code:

public ActionResult Read_Product([DataSourceRequest] DataSourceRequest request, int id)
{
    return Json(context.Products.Where(i => i.CategoryID == id).ToDataSourceResult(request, e => new ProductViewModel
    {

        ProductID = e.ProductID,
        ProductName = e.ProductName,
        QuantityPerUnit = e.QuantityPerUnit,
        UnitPrice = e.UnitPrice,
        ReorderLevel = e.ReorderLevel,
        SupplierID = e.SupplierID,

    }));
}

 ProductViewModel Code:

    public ProductViewModel()
    {
        this.Order_Details = new HashSet<Order_Detail>();
        this.units = new HashSet<unit>();
    }

    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public Nullable<int> SupplierID { get; set; }
    //public Nullable<int> CategoryID { get; set; }
    public string QuantityPerUnit { get; set; }
    public Nullable<decimal> UnitPrice { get; set; }
    public Nullable<short> UnitsInStock { get; set; }
    public Nullable<short> UnitsOnOrder { get; set; }
    public Nullable<short> ReorderLevel { get; set; }
    //public bool Discontinued { get; set; }
    //public string EAN13 { get; set; }

    public virtual Category Category { get; set; }
    public virtual ICollection<Order_Detail> Order_Details { get; set; }
    public virtual Supplier Supplier { get; set; }
    public virtual ICollection<unit> units { get; set; }
}

 

so please how can i resolve those problems ?

[Ahmed]

Please i let you know i found an example that show me how to add dropdownlist in grid and it working now but i can't get dropdownlist on Edit mode "PopUp" and i don't know how to do that ?

i have add this part in my code to get products :

columns.ForeignKey(od => od.ProductID, (System.Collections.IEnumerable)ViewData["Products"], "ProductID", "ProductName");

and i can get them in dropdownlist when edit mode is inline - but when mode is popup i can't get the dropdownlist >> please see attached images ?

 

[Boyan Dimitrov]

Hello Ahmed,

Straight to your questions: 

   1. In the returned ProductViewModel from the controller read action method there is no Supplier object. In order to avoid sending the entire Supplier object to the client, you can add SupplierName property to the ProductViewModel and bind the column to this property. 

  2. Please review the Custom PopUp Editor code library that demonstrates how to use a custom editor template in the grid popup editing form

Regards,
Boyan Dimitrov
Telerik

 

 

[Ahmed]

Thanks a lot ... solved :)