Drop Down Editor

3 posts, 1 answers
  1. Jake
    Jake avatar
    2 posts
    Member since:
    Feb 2018

    Posted 25 Feb Link to this post

    Hi There,

    I'm trying to get the ProductName from 'edit' from on click event and I want to take that ProductName  and pass it as a parameter to my controller, however, 

    it looks like the drop-down editor function is being executed first before the 'edit' click event. So if you try and run the code below, it will not pick up any value when edit command is clicked. Basically, I want to do a query using the ProductName before populating my drop-down list.

     

    <!DOCTYPE html>

    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Kendo UI Snippet</title>

        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
    </head>
    <body>
      
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
    <div id="example">
        <div id="grid"></div>

        <script>
    var cat = '';
            $(document).ready(function () {
                var dataSource = new kendo.data.DataSource({
                   pageSize: 20,
                   data: products,
                   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} }
                         }
                       }
                   }
                });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    height: 550,
                    toolbar: ["create"],
                    columns: [
                        { field:"ProductName",title:"Product Name" },
                        { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
                        { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
                        { command: "edit", title: " ", width: "150px" }],
                    editable: "inline",
                    edit: function(e) {
                      var model = e.model; //reference to the model that is about the be edited
                      cat = model.ProductName;
                      alert(cat);
    cat = model.ProductName;
                      var container = e.container; //reference to the editor container

                      var categoryDropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList"); //find widget element and then get the widget instance
                      // if DropDownListwidget is found
                      if (categoryDropDownList) {
                        //use DropDownList API based on the model values to accomplish your bussiness requirement.
                        //link: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist
                        console.log("DropDownList", categoryDropDownList);
                      }

                      var priceNumericTextBox = container.find("[data-role=numerictextbox]").data("kendoNumericTextBox"); //find widget element and then the widget instance
                      if (priceNumericTextBox) {
                        //use NumericTextBox API
                        //link: http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox
                        console.log("NumericTextBox", priceNumericTextBox);
                      }
                    }
                });
            });

          
            function categoryDropDownEditor(container, options) {
              alert(cat);
                $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        autoBind: false,
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"

                               //url: "@Html.Raw(Url.Action("MyAction", "MyController", new {Id = Model, Cat = Cat }))",

                            }
                        }
                    });
            }

        </script>
    </div>
    </body>
    </html>

  2. Answer
    Georgi
    Admin
    Georgi avatar
    301 posts

    Posted 27 Feb Link to this post

    Hello Jake,

    Based on the provided information I assume that the requirement is to access a certain field of the currently edited record. Please correct me if I am wrong.

    The options parameter of the editor function contains a reference to the edited model, therefore you can access all fields of the record through the options.model property:

    function categoryDropDownEditor(container, options) {
     
      var catergory = options.model.ProductName;
     
      $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
        autoBind: false,
        dataSource: {
          type: "odata",
          transport: {
          }
        }
      });
    }

    Below you will find a modified version of the provided code:


    Please try out the above approach and let me know how it works for you.

    I look forward to your reply.


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jake
    Jake avatar
    2 posts
    Member since:
    Feb 2018

    Posted 28 Feb in reply to Georgi Link to this post

    Thank you so much, Georgi! You've answered my question. Really appreciate your response.
Back to Top