I was looking at the documentation for the insertSheet method for Kendo Spreadsheet, at the below link:
http://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#methods-insertSheet
I didn't see any examples on how to actually use this method. I tried searching on Kendo forums but didn't have any luck. Has anyone used this method or seen any examples of usage that we can use as a reference?
Thanks in advance.
I have provided a very simple dojo showing how to insert a sheet and then rename it.
https://dojo.telerik.com/AXulOsAS
If you look at the demo's for the spreadsheet control it gives you some insight into the control but this is still a relatively new element to the kendo UI suite so the documentation is a little sparse.
https://demos.telerik.com/kendo-ui/spreadsheet/index
have added the dojo code here just in case:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/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/2019.1.115/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script></head>
<body>
<div id="ss">
</div>
<script>
$('document').ready(function(){
$('#ss').kendoSpreadsheet();
var ss = $('#ss').data('kendoSpreadsheet');
ss.insertSheet();
ss.renameSheet(ss.sheets()[1], 'test 1');
});
</script>
</body>
</html>
Related
I have done literally everything to make it work but it is not working yet
I loaded from cdn just as it is in the preview documentation
<!-- add to document <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.css"
rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-
plugin-image-preview.css" rel="stylesheet">
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-
preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
To enhance into a filepond element I have
<script>
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement );
</script>
and lastly
<input type="file">
It just shows up as a file and not with image preview. What am I missing?
The plugins have not been registered with FilePond.
This should work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FilePond Plugin Image Preview Demo</title>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
</head>
<body>
<input type="file"/>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
// Register the plugin with FilePond
FilePond.registerPlugin(FilePondPluginImagePreview);
// Get a reference to the file input element
const inputElement = document.querySelector('input[type="file"]');
// Create the FilePond instance
const pond = FilePond.create(inputElement);
</script>
</body>
</html>
Live demo here: https://pqina.github.io/filepond-plugin-image-preview/
I'm looking at the docs and I see how this is confusing, will improve them as soon as I have some time.
I am new in SAP and trying to develop a SAPUI5 application, but faced some problems when reusing views/partial views. I want to have a partial view and pass custom data in a specefic format (data changes but model is same), and reuse these partial view many times in one page, every time passing different data. Somehow like Tiles, but very cuszomized.
what do you suggest me to use?
I have tryied to make new instance of a regular view but faced this error:
GET https://sapui5.hana.ondemand.com/resources/view/List.view.xml 404
(Not Found)
this is my code to make new instance:
var firstListView=sap.ui.xmlview("firstViw", "view.List");
thanks for your help
Update:
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ushell"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{
"sap.ui.appName": "./"
}'>
</script>
<script src="../libs/jquery.cookie.js"></script>
<link href="css/site.css" rel="stylesheet" type="text/css" />
<link href="css/library.css" rel="stylesheet" type="text/css" />
<link href="css/theme/library.css" rel="stylesheet" type="text/css" />
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
appWidthLimited:false,
app: new sap.ui.core.ComponentContainer({
name: "sap.ui.appName"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
and this is the folder structered:
Please have a look at chapter “Reusing UI Parts: Fragments” of the UI5 SDK.
Here is an excerpt. Please have a look whether this helps.
I am trying to get Kendo Ui (Free Version working). I am trying to implement the date picker with the below code but alls I get is an empty input field. Does anyone have any suggestions on how to resolve this?
<!DOCTYPE html>
<html>
<head>
<link href="/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo/2015.3.1111/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.core.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.calendar.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.popup.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.datepicker.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.data.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.list.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.combobox.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.dropdownlist.min.js></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.multiselect.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.validator.min.js"></script>
<input id="TimeSlot" name="TimeSlot" type="datetime" />
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#datepicker").data("kendoDatePicker");
});
</script>
</body>
</html>
You need to reference all these javascript files in order for the DatePicker to work. You can use the Kendo UI Custom Download tool to find out which javascript files you need to reference and to download a custom javascript file that contains everything you need:
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.calendar.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.popup.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.datepicker.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.data.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.list.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.combobox.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.dropdownlist.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.multiselect.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.validator.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.aspnetmvc.min.js"></script>
UPDATE:
Your text-box's id is "TimeSlot", but in your script you're referring to #datepicker which doesn't even exist. Change your script to this:
<script type="text/javascript">
$(document).ready(function () {
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#TimeSlot").data("kendoDatePicker");
});
</script>
By the way, you won't need kendo.aspnetmvc.min.js if you don't want to use Kendo's Html Helpers, which is not something that I would recommend if you are using asp.net MVC. With kendo.aspnetmvc.min.js, you wouldn't even need the script, you could just replace your text-box (input tag) with this:
#(Html.Kendo().DatePicker().Name("TimeSlot"))
Am using jquery draggable collision plugin which throws the error on loading the page that is "Type Error i is undefined"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type= "text/javascript" src="js/jquery-ui.js"></script>
<script type= "text/javascript" src="js/jquery-collision.min.js"></script>
<script type= "text/javascript" src="js/jquery-ui-draggable-collision.min.js"></script>
<script type= "text/javascript" src="js/common.js"></script>
</head>
<body>
<div id="header">Sprite Generator</div>
<div id="droppable" >
<div id="overLay">Drop Files Here</div>
</div>
<div id="cssDetails">
<div id="cssHead">CSS Data</div>
</div>
<div id="errorMessage"></div>
</body>
</html>
This is the code I use. Kindly help, am not aware what is going wrong here.
The error lies in the draggable collision plugin file. Each time the method .data("draggable") is called, an undefined value is returned.
There is a slight difference between jQuery UI 1.9.2 and 1.10.3. In this last version, .data("draggable") has been replaced by .data("ui-draggable").
You should :
Either use an old version of jQuery UI plugin,
or use the last version, then replace .data("draggable") by .data("ui-draggable") in the jquery-ui-draggable-collision.min.js file.
In my own case, I used the second solution. But your case may be different, since I don't know which version of jQuery UI plugin you are using now.
The README for jQuery UI Draggable Collision reads:
Load jquery-ui-draggable-collision and its dependencies:
<script src="jquery-1.8.3.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="jquery-collision-1.0.2.js"></script>
<script src="jquery-ui-draggable-collision-1.0.2.js"></script>
It doesn't explain why you need to load modules separately, but my suspicion is there's a conflict going on somewhere. I'd try including the specific individual files (core, widget, mouse, draggable, collision, and ui-draggable-collision) and see if that works. Without more information in your question, it's hard for me to try a set of specific things, but this may be your best bet.
When I include the js for lightbox it prevents my other js from running; which means my jquery nav and slide down effects for divs stop working. Am I including the files in the correctly? I tried the endconflict() in the top of my script but that didn't work. Any help is greatly appreciated.
Thx
<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" /> <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
***<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />***
<script type="text/javascript" src="js/jquery.js"></script>
<script src="javascript/jquery-1.7.1.min.js"></script>
<script src="javascript/bootstrap.js"></script>
***<script type="text/javascript" src="../lightbox2.05/js/prototype.js"></script>
<script type="text/javascript" src="../lightbox2.05/js/scriptaculous.js"></script>
<script type="text/javascript" src="../lightbox2.05/js/lightbox.js"></script>***
<script>
<a href="images/Screen Shot 2012-02-27 at 9.51.49 PM.png" rel="lightbox">
<img src="../../images/Screen Shot 2012-02-27 at 9.56.49 PM.png" height="180" width="460" alt="">
</a>
The problem is that lighbox uses pieces of Scriptaculous and Prototype, which are other javascript libraries like jQuery is. They don't play nicely with each, so you have to tell jQuery to avoid them.
Rather than the typical document ready setup that you normally put your jQuery code in:
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});
You will instead wrap your jQuery code in this:
jQuery(document).ready(function($){
// Stuff to do as soon as the DOM is ready;
});
You can read more about handling javascript library conflicts here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries