Set other row cell values based on selected DropDownList Item in the grid

3 posts, 1 answers
  1. Vadim
    Vadim avatar
    16 posts
    Member since:
    Jul 2013

    Posted 31 Oct 2017 Link to this post

    I know this question has been asked many times but I was unable to find an answer, please help.
    1. I need to update a value of the column "ProductName" that is not editable. I need to do it when I change (select) value in the dropdown Category

    2. Keep the grid row in edit mode because I will change other fields in the row

    3.  And then click Update button to update the grid row. Or cancel - to restore the original values in the row

     

    Thank you!

     

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

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

        <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css">
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jszip.min.js"></script>
    </head>
    <body>
      
    <script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
    <div id="example">
      <div id="grid"></div>
        <script>

            var dataSource = new kendo.data.DataSource({
                pageSize: 20,
                data: products,
                autoSync: false,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { editable: false, nullable: true },
                            ProductName: { validation: { required: true }, editable: false },
                            Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                            UnitPrice: { type: "number", validation: { required: true, min: 1} }
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                height: 430,
                toolbar: ["create"],
                columns: [
                { field:"ProductName",title:"Product Name" },
                { field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
                { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                editable: "inline"
            });

            function categoryDropDownEditor(container, options) {
                $('<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: "http://demos.kendoui.com/service/Northwind.svc/Categories"
                        }
                    },
                    select: function() {
                        var grid = $("#grid").data("kendoGrid"),
                            model = grid.dataItem(this.element.closest("tr"));

                        model.ProductName = "changed";
                    }
                });
            }
            </script>
    </div>
    </body>
    </html>

  2. Answer
    Stefan
    Admin
    Stefan avatar
    2475 posts

    Posted 02 Nov 2017 Link to this post

    Hello, Vadim,

    Thank you for the example.

    Please have in mind that setting editable false to the mode will not allow any changes to the model value.

    In this scenario, I can suggest setting editable false to the Grid column. Still, note that this will change the value only after the update button is clicked and the row is re-rendered:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editable

    I made an example demonstrating this:

    http://dojo.telerik.com/EmeHel

    I hope this is helpful.

    Regards,
    Stefan
    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. Vadim
    Vadim avatar
    16 posts
    Member since:
    Jul 2013

    Posted 09 Nov 2017 in reply to Stefan Link to this post

    thank you for reply.

    I have found a perfect solution which is working to me.
    Review: In edit mode I don't want to have a field CostCentreTitle to be editable and on dropdown CostCentre change event to be able to update a non editable value CostCentreTitle 

    1. Made a field CostCentreTitle editable
    2.On the grid edit Edit event  find CostCentreTitle and make it disabled plus change a background of the text box applying my "not-editable" class . I need it because I highlight a selected row. 
    .not-editable {
            background-color: transparent;
            border: 0px;
        }

    Grid edit event:

     edit: function (e) {
                        //highlight edit row
                        gridElement.data("kendoGrid").select(".k-grid-edit-row");
                        var model = e.model,
                        container = e.container;

                        var CostCentreTitle = $('input[name *= "CostCentreTitle"]');
                        CostCentreTitle.attr('class', 'not-editable');
                        CostCentreTitle.attr("disabled", true);

                    },

    and the change event of the dropdownCostCentre will update a value of my model

    field: "CostCentre", title: "Cost Centre", width: "120px", filterable: true, template: "#= CostCentre #",
                            editor: function costCentreDropDownEditor(container, options) {
                                $('<input required id="CostCentre" name="' + options.field + '"/>')
                                    .appendTo(container)
                                    .kendoComboBox({
                                        placeholder: "Select...",
                                        dataTextField: "CostCentre",
                                        dataValueField: "CostCentre",
                                        change: function (e) {
                                            // prevent adding castom values
                                            var widget = e.sender;
                                            if (widget.value() && widget.select() === -1) {
                                                widget.value("");
                                            }
                                            var costCentre = this.value();
                                            if (costCentre != "") {
                                                data = this.dataSource.data();
                                                var selectedItem = $.grep(data, function (e) { return e.CostCentre === costCentre });

                                                var grid = gridElement.data("kendoGrid"),
                                                model = grid.dataItem(this.element.closest("tr"));

      model.set("CostCentreTitle", selectedItem[0].CostCentreTitle);

                                       
                                            }
                                        },

Back to Top