End edit mode in spreadsheet

7 posts, 0 answers
  1. Su Pei
    Su Pei avatar
    11 posts
    Member since:
    Nov 2016

    Posted 20 Mar 2017 Link to this post

    Hi, 

    How to end the current cell edit mode in the toolbar button click event?

    Thanks! 

    Regards,

    Su Pei

  2. Nencho
    Admin
    Nencho avatar
    1874 posts

    Posted 21 Mar 2017 Link to this post

    Hello Su,

    Could you please elaborate a bit more on the scenario you aim to achieve. Currently, if you are editing some cell and click on the icons of the toolbar, the cell will loose its focus, hence the edit mode will end.

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

    Posted 22 Mar 2017 in reply to Nencho Link to this post

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Kendo UI Snippet</title>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     
        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jszip.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js">
      </script>
    </head>
    <body>
      <style>
        .k-state-disabled{
          color:#13084a;
        }
       
      </style>
    <div id="div_batchUpdate">
          <div id="ssBatchUpdate" style="width: 100%;"></div>
          <script>
            $(function() {
              $("#ssBatchUpdate").kendoSpreadsheet({
                columns: 26,
                rows: 30,
                sheetsbar: false,
                excel: {
                  // Required to enable Excel Export in some browsers
                  proxyURL: "//demos.telerik.com/kendo-ui/service/export"
                },
                formulabar:false,
                toolbar: {
                    insert: false,
                   data:false,
                   home: [
                         {
                              type: "button",
                              text: "Save",
                              value:"Save",
                              spriteCssClass: "fa fa-floppy-o",
                                click: function() {
                                 var transTrackerValue =spreadsheet.activeSheet().range("D2").values()[0];
                                    window.alert("Value:"+transTrackerValue);
                               }
                            },
                         "exportAs","filter","copy","cut","paste"
                         
                        ]
                },
                sheets: [
                  {
                    rows: [
                      {
                        height: 25,
                        cells: [
                          {value: "PO"},
                          {value:"Request Date"},
                          {value:"Current Promise Date"},
                          {value:"Trans Tracker Number"},
                        ],
                      },
                      {cells:[{value:"12345-1"},
                              {value:new Date("11-May-2016"),format: "dd-MMM-yyyy"},
                              {value:""}
                      ]}
                      ,
                      {cells:[{value:"23456-2"},
                              {value:new Date("22-Jun-2016"),format: "dd-MMM-yyyy"},
                              {value:""}
                      ]}
                    ],
                    columns: [
                      {width: 80},{width: 80},{width: 120},{width: 120},
                    ]
                  }
                ]
              });
              var spreadsheet = $("#ssBatchUpdate").data("kendoSpreadsheet");
              spreadsheet._view.tabstrip.tabGroup.find("li:eq(0) .k-link").text("PO Promise Date");
              var formulaBar = spreadsheet.element.children()[1];
              formulaBar.remove();
              spreadsheet.resize();
             
              var sheet = spreadsheet.activeSheet();
             sheet.frozenColumns(1);
              sheet.frozenRows(1);
             
              var range = spreadsheet.activeSheet().range("1:1,A:B");
             range.enable(false);
              var colDate = spreadsheet.activeSheet().range("C2:C");
                colDate.validation({
                                                dataType: "date",
                                                showButton: true,
                                                allowNulls: true,
                                                type: "reject",                      
                                         comparerType: "between",
                                                from: "DATEVALUE(\"1/1/2000\")",
                                                to: "DATEVALUE(\"1/1/2099\")",
                                                titleTemplate: "Date validaton error",
                                                messageTemplate: "Invalid Date"
                });
              colDate.format("dd-MMM-yyyy");
             
            });
          </script>
        </div>
    </body>
    </html>
  4. Su Pei
    Su Pei avatar
    11 posts
    Member since:
    Nov 2016

    Posted 22 Mar 2017 Link to this post

    Hi Nencho, 

    Please have a look on the above code.. 

    Thanks. 

    Regards,

    Su Pei

  5. Su Pei
    Su Pei avatar
    11 posts
    Member since:
    Nov 2016

    Posted 22 Mar 2017 Link to this post

    Hi Nencho,

    Please have a look on the above code. 

    Step :

    1) enter "111" in column trans tracker number D2

    2) Without click on other column, direct click on save button

    3) Prompt "Value: "

    4) Click on other column 

    5) Click save button, prompt "Value:111"

    Regards,

    Su Pei

  6. Nencho
    Admin
    Nencho avatar
    1874 posts

    Posted 24 Mar 2017 Link to this post

    Hello Su,

    Thank you for the provided example and detailed explanation.

    Indeed there was such an issue, in the version that you are using in the code snippet (2016.3.1028) with this behavior. However, this issue is already fixed and you can test the behavior, using our latest official release:

    http://dojo.telerik.com/@nenchef/eBUBa/2


    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Su Pei
    Su Pei avatar
    11 posts
    Member since:
    Nov 2016

    Posted 26 Mar 2017 in reply to Nencho Link to this post

    Hi Nencho,

    Ok. This has solved my problem.

    Thanks!

    Regards,

    Su Pei

Back to Top