open editor using inline template button

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

    Posted 29 Nov 2017 Link to this post

    Hi,
    I modified example to show you a possible solution for my grid.
    I need a button in the "text" non-editable field.  This button will open a window with editor.

    I need to display this button in the row always even user click on command "Edit".

    So I did it.

     

    Below are my questions:

    1). I don't know how to find e reference to the row that opened this window inside close event to get a dataItem and update a model.
    2). I am not sure if it is possible to change a text of the column after window close.
    3). I don't know why style of my "show" button changed after user click a Cancel button

    Thank you for you comments

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>editor button</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="https://kendo.cdn.telerik.com/2017.3.1026/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.4.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
    </head>
    <body>
      
    <div id="grid"></div>
    <div id="window">
        <textarea id="editor" rows="10" cols="30" style="height:440px" aria-label="editor" data-bind="value: text"></textarea>
    </div>
    <script>
        var dataItem;

        $("#grid").kendoGrid({
          editable: "inline",
          resizable: true,
          
            columns: [{
                    field: "name", width: "200px"
                },
                {
                    field: "text",
                    template: "<div class='contentDivs' style='white-space: nowrap; height: 25px; overflow: hidden; max-width:65%; float: left;'>#= text #</div><button class='editButtons' style='float:right'>show</button>",
                    width: "300px"
                },
                {
                    field: "age", width: "100px"
                },
                      { command: [{ name: "edit", text: { edit: "edit", update: "update", cancel: "cancel" } }]}
            ],
            dataSource: {
              schema: {
                    model: {
                      id: "id",
                        fields: {
                          id: {type: "number", editable:false},
                          name: { type: "string" },
                          text: { type: "string", editable: false},
                          age: { type: "number" }
                        }
                    }
          },
                data: [{
                  id: 1,
                        name: "Jane Doe",
                        text: "Lorem ipsum dolor lis in magna. In feugiat non ipsum a laoreet. Nulla facilisi.",
                        age: 30
                    },
                    {
                      id: 2,
                        name: "John Doe",
                        text: "Cras vitae nisl quis nulla accumsan porttitor a eget quam. Vestibulum tempor eu felis ac pulvinar. Morbi viverra odio sit ame. Pellentesque felis est, condimentum et pellentesque vel, luctus eget libero. Morbi non placerat diam, quis tincidunt ante.",
                        age: 33
                    }
                ]
            },
            dataBound: onDataBound
          
        });

        function onDataBound(e) {
            $(".contentDivs").children().css("display", "table-cell");
            $(".editButtons").kendoButton({
                click: function(e) {
                    var grid = $("#grid").data("kendoGrid");
                    var editor = $("#editor").data("kendoEditor");
                    var window = $("#window").data("kendoWindow");
                    var row = e.sender.element.closest("tr");
                    var dataItem = grid.dataItem(row);

                    kendo.bind(editor.element, dataItem);
                    window.open().center();
                }
            });
        };

        $("#window").kendoWindow({
            width: "600px",
            visible: false,
            modal: true,
            close: function(e) {
                e.sender.element.focus();
              var grid = $("#grid").data("kendoGrid");
              var editor = $("#editor").data("kendoEditor");
              // how to get row?
              var row; 
              var dataItem = grid.dataItem(row);
              
              // update Model
              //dataItem.text = editor.value();
              console.log(dataItem);
              // how to change the text in the field?

            },
            actions: [
                "Maximize",
                "Close"
            ],
        });
        $("#editor").kendoEditor();
    </script>
    </body>
    </html>

  2. Answer
    Stefan
    Admin
    Stefan avatar
    2479 posts

    Posted 01 Dec 2017 Link to this post

    Hello, Vadim,

    Thank you for the example.

    Regarding the questions:

    1) This can be achieved with a similar to the used approach, the difference is that the row and the dataItem value have to be global in order to be available in the correct scope.

    2) Yes, it is possible by changing the model value and refreshing the Grid.

    3) This occurs after canceling the row is re-rendered but the dataBound event is not called which leads to not initializing the buttons. The same logic could be called on the cancel event.

    I modified the example to demonstrate all of them:

    http://dojo.telerik.com/IqAbU

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-cancel

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-refresh

    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 02 Dec 2017 in reply to Stefan Link to this post

    Hi Stefan,
    Your solution was very helpful. I got exactly what I needed.
    I also added same code to restore button on grid "change" event as well (if user switch between rows)
    Instead of closing a window and do refresh I did slightly different . I wanted to stay in edit mode.
    So I came with this code:
    close: function(e) {
              e.sender.element.focus();
              var grid = $("#grid").data("kendoGrid");
              var editor = $("#editor").data("kendoEditor");
              // update Model
              var editorValue = editor.value();
              dataItem.text = editorValue;
       dataItem.dirtyFields["text"] = true;
                        dataItem.dirty = true;
            }

    And then when user click Update button, the model will be updated.

    P.S. I will appreciate if you could answer on my last reply:
    https://www.telerik.com/forums/how-to-trigger-validation-on-the-row-manually

    Thank you again,
    Vadim

Back to Top