Custom Editing for DropDown Enum

[Roger]

In the example for custom editing at https://demos.telerik.com/kendo-ui/grid/editing-custom, the grid includes the field Category which includes a dropdown list which opens for editing and which is populated by a linked Category table.  The code for this shows as follows:

schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} }
                        }
                    }

and 

columns: [
                    { field:"ProductName",title:"Product Name" },
                    { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
...

 

If instead of a linked table, I wanted to use an enum, how could I achieve the same functionality.  Here's what the enum might look like defined in C#:

public enum Category
    {
        Beverages,
        Condiments,
        Meat,
        etc
    }

 

Any help greatly appreciated.

 

 

[Petar]

Hi Roger,

In the context of the example that you've sent us, the DropDownList can be defined as follows:

function categoryDropDownEditor(container, options) {
    $('<input required name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
                dataValueField: "CategoryName",
                dataTextField: "CategoryName",
            dataSource: [
                {CategoryName:"Beverages"},
                {CategoryName:"Produce"}, 
                {CategoryName:"Seafood"}]
        });
}

Here is an example demonstrating the usage of the above code. I am aware that the marked in yellow code is not exactly the best "enum" that you are used to. 

Talking about a scenario in which the Grid's data is not a complex object, we can use the approach demonstrated in this Dojo. Here the DropDownList editor of the Products column is defined like this:

function productDropDownEditor(container, options) {
    console.log(options);
    $('<input required name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: ["Chai", "Chang", "Ikura", "Konbu", "Tofu"]
        });
}

I hope the linked examples will help you implement what you need in your application.

Regards,
Petar
Progress Telerik

[Roger]

Thank you Petar.  In the example that you sent me, the Category is an object with properties such as the following record:

{
    ProductID : 2,
    ProductName : "Chang",
    SupplierID : 1,
    CategoryID : 1,
    QuantityPerUnit : "24 - 12 oz bottles",
    UnitPrice : 19.0000,
    UnitsInStock : 17,
    UnitsOnOrder : 40,
    ReorderLevel : 25,
    Discontinued : false,
    Category : {
        CategoryID : 1,
        CategoryName : "Beverages",
        Description : "Soft drinks, coffees, teas, beers, and ales"
    }

 

In the data that I receive from my api, I do not receive the full category but the CategoryID int only.  I was hoping that with the assistance of the enum as I defined it in my previous post, I could populate the dropdown list and match the CategoryIDs with enum names.  Is there a way to do that?

 

Regards,

Roger

[Petar]

Hi Roger,

To demonstrate your scenario, I will use the SupplierID field that comes from our API. The values returned for the SupplierID field are numbers as it is in your application. 

Here is a Dojo demonstrating what we can do for the SupplierID field. The field itself is defined as follows:

{ field:"SupplierID",title:"SupplierName",editor: supplierDropDownEditor, template: getSupplierTextValue }

The supplierDropDownEditor is defined as it is shown below. The DataSource is again defined as objects but the definitions in green are defined client-side. The values in yellow correspond to the values that we receive from the API. If we have 20 possible SupplierIDs, then the dataSource should contain 20 different elements, each corresponding to the different API data.

        function supplierDropDownEditor(container, options) {
          $('<input required name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
            dataValueField: "SupplierID",
            dataTextField: "SupplierName",
            dataSource: [
              {SupplierID: 1, SupplierName:"Supplier 1"},              
              {SupplierID: 2, SupplierName:"Supplier 2"},
              {SupplierID: 3, SupplierName:"Supplier 3"},
              {SupplierID: 4, SupplierName:"Supplier 4"},
              {SupplierID: 5, SupplierName:"Supplier 5"},              
              {SupplierID: 6, SupplierName:"Supplier 6"},
              {SupplierID: 7, SupplierName:"Supplier 7"},
              {SupplierID: 8, SupplierName:"Supplier 8"},
              {SupplierID: 9, SupplierName:"Supplier 9"},
            ]
          });
        }

The getSupplierTextValue function is used to define a client-friendly visualization of the SupplierID field in the Grid. 

Let me know if the suggested approach helps you implement what you need in your application.

Regards,

Petar
Progress Telerik

[Roger]

Excellent - Petar - this is very helpful and exactly what I was looking for.  Thanks!