This is a migrated thread and some comments may be shown as answers.

End edit mode in spreadsheet

6 Answers 286 Views
Spreadsheet
This is a migrated thread and some comments may be shown as answers.
Su Pei
Top achievements
Rank 1
Su Pei asked on 20 Mar 2017, 08:07 AM

Hi, 

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

Thanks! 

Regards,

Su Pei

6 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 21 Mar 2017, 01:42 PM
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.
0
Su Pei
Top achievements
Rank 1
answered on 23 Mar 2017, 03:34 AM
<!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>
0
Su Pei
Top achievements
Rank 1
answered on 23 Mar 2017, 03:42 AM

Hi Nencho, 

Please have a look on the above code.. 

Thanks. 

Regards,

Su Pei

0
Su Pei
Top achievements
Rank 1
answered on 23 Mar 2017, 03:46 AM

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

0
Nencho
Telerik team
answered on 24 Mar 2017, 12:42 PM
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 . However, this issue is already fixed and you can test the , 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 (charts) and form elements.
0
Su Pei
Top achievements
Rank 1
answered on 27 Mar 2017, 12:25 AM

Hi Nencho,

Ok. This has solved my problem.

Thanks!

Regards,

Su Pei

Tags
Spreadsheet
Asked by
Su Pei
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Su Pei
Top achievements
Rank 1
Share this question
or