This is a migrated thread and some comments may be shown as answers.
Custom Editing for DropDown Enum
4 Answers 7 Views
This is a migrated thread and some comments may be shown as answers.
Roger
Top achievements
Rank 2
Roger asked on 26 Jan 2021, 04:02 PM

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.

 

 

4 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 28 Jan 2021, 10:23 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Roger
Top achievements
Rank 2
answered on 28 Jan 2021, 08:34 PM

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

0
Accepted
Petar
Telerik team
answered on 01 Feb 2021, 02:06 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Roger
Top achievements
Rank 2
answered on 01 Feb 2021, 03:41 PM
Excellent - Petar - this is very helpful and exactly what I was looking for.  Thanks!
Tags
Grid
Asked by
Roger
Top achievements
Rank 2
Answers by
Petar
Telerik team
Roger
Top achievements
Rank 2
Share this question
or