jube-fork/Jube.App/wwwroot/kendo/examples/editor/table-editing.html

<!DOCTYPE html>
<html>
<head>
    <title>Table Editing</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="demo-section k-content wide">
        <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
        &lt;table class=&quot;k-table&quot; style=&quot;width: 769px; height: 178px;&quot;&gt;
            &lt;tbody&gt;
                &lt;tr style=&quot;height: 22.905%;&quot; data-role=&quot;resizable&quot;&gt;
                    &lt;td style=&quot;width: 12.5%;&quot; data-role=&quot;resizable&quot; colspan=&quot;2&quot;&gt;&lt;strong&gt;Next&lt;/strong&gt;&lt;strong&gt; Q Marketing
                            Budget&lt;/strong&gt;&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot; colspan=&quot;2&quot;&gt;&lt;strong&gt;January&lt;/strong&gt;
                    &lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; colspan=&quot;2&quot; data-role=&quot;resizable&quot;&gt;&lt;strong&gt;February&lt;/strong&gt;
                    &lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; colspan=&quot;2&quot;&gt;&lt;strong&gt;March&lt;/strong&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr style=&quot;height: 22.905%;&quot; data-role=&quot;resizable&quot;&gt;
                    &lt;td style=&quot;width: 12.5%;&quot; data-role=&quot;resizable&quot; rowspan=&quot;5&quot;&gt;&lt;strong&gt;Campaign&lt;/strong&gt;&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%;&quot; data-role=&quot;resizable&quot;&gt;&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;Planned&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;Actual&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;Planned&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;Actual&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;Planned&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot;&gt;Actual&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr style=&quot;height: 15.0838%;&quot; data-role=&quot;resizable&quot;&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;Social Media&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;2000&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;1850&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;&lt;span
                            style=&quot;text-align: center;&quot;&gt;2000&lt;/span&gt;&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;&lt;span
                            style=&quot;text-align: center;&quot;&gt;2000&lt;/span&gt;&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;&lt;span
                            style=&quot;text-align: center;&quot;&gt;2000&lt;/span&gt;&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot;&gt;&lt;span style=&quot;text-align: center;&quot;&gt;2000&lt;/span&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr style=&quot;height: 14.5251%;&quot; data-role=&quot;resizable&quot;&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;TV Ads&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;40 000&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;55 000&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;&lt;span style=&quot;text-align: center;&quot;&gt;40
                            000&lt;/span&gt;&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;40 000&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;&lt;span
                            style=&quot;text-align: center;&quot;&gt;-&lt;/span&gt;&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot;&gt;-&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr style=&quot;height: 12.8492%;&quot; data-role=&quot;resizable&quot;&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;Flyers&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;550&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;550&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;-&amp;nbsp;&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;-&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;-&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot;&gt;-&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr style=&quot;height: 11.7318%;&quot;&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;Radio Ads&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;15 000&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;15 000&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;10 000&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;10 000&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot; data-role=&quot;resizable&quot;&gt;5000&lt;/td&gt;
                    &lt;td style=&quot;width: 12.5%; text-align: center;&quot;&gt;5000&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
    </textarea>

        <script>
            $("#editor").kendoEditor({
                tools: [
                    "tableWizard",
                    "createTable",
                    "addRowAbove",
                    "addRowBelow",
                    "addColumnLeft",
                    "addColumnRight",
                    "deleteRow",
                    "deleteColumn",
                    "mergeCellsHorizontally",
                    "mergeCellsVertically",
                    "splitCellHorizontally",
                    "splitCellVertically",
                    "tableAlignLeft",
                    "tableAlignCenter",
                    "tableAlignRight"
                ]
            });
        </script>
    </div>
</div>


    
</body>
</html>