Hi,
Need to figure out the proper way to attach a new sheet. to the kendoSpreadsheet's option: sheets. I tried the below code:
$(document).ready(function () {
//render and initialize kendoSpreadsheet:
$("#spreadsheet").kendoSpreadsheet({
columns: 20,
rows: 200,
toolbar: true,
sheetsbar: true,
sheets: mySheets,
width: "100%"
});
//render and initialize kendoButton:
$("#load-new-sheet-btn").kendoButton({
icon: "forward",
themeColor: "primary",
click: swapSheets // want to render new set of sheets. Is this possible?
});
});
//assign a different JavaScript object to the sheets: option parameter (this doesn't seem to refresh the spreadsheet component/control:
function swapSheets()
{
var currSpreadSheet = $("#spreadsheet").data("kendoSpreadsheet");
console.log("BEFORE clearing sheets: currentSpreadSheet contents: ", currSpreadSheet.options.sheets)
currSpreadSheet.options.sheets = mySheetsTwo;
console.log("AFTER clearing sheets: currentSpreadSheet contents: ", currSpreadSheet.options.sheets);
currSpreadSheet.refresh();
}
You can see the whole code in action here in the Dojo:
Spreadsheet Demo Swapping Sheets | Kendo UI Dojo (telerik.com)
Also, my requirements want to load a stylized formatted sheet (ergo probably a sheet object), and X number of sheets with raw data…with a different dataSource associated to those raw data sheets.
The ultimate goal is to load data into a sheet object in from an API without rerendering the entire page or destroying the current spreadsheet component (and creating a new one). Most importantly, or we can constrain the question to how to point sheets: to a new JSON sheet structure.
Here is a screen shot of what is happening:
It seems like I can re-assign the sheets object, but refreshing or binding the new sheets object is not being done successfully.
Hope this all makes sense,
George
Hi,
Is it possible to remove or hide the space that is highlighted in green on the attached screenshot?
I want to make it look like this below:
This is for the Spreadsheet widget.
Thanks!
my cshtml file
@(Html.Kendo().Spreadsheet()
.Name("spreadsheet").HtmlAttributes(new { style = "width:100%;" })
)<script>
$(document).ready( function () {
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
$.ajax({
type: "POST",
url: '@Url.Action("GetFileFromDetails", "Spreadsheets")',
contentType: "application/json; charset=utf-8",
data: { data: myData },
dataType: "json",
success: function (recData) {
//alert(recData);
spreadsheet.fromJSON(recData.response);
},
error: function (ex) {
alert(ex);
}
});
});
</script>
my controller
[HttpPost] public ActionResult GetFileFromDetails() {
var workbook = Workbook.Load(file.InputStream, Path.GetExtension(file.FileName)); return Content(workbook.ToJson(), Telerik.Web.Spreadsheet.MimeTypes.JSON);
}
[HttpPost] public ActionResult Upload(HttpPostedFileBase file) { var workbook = Workbook.Load(file.InputStream, Path.GetExtension(file.FileName)); return Content(workbook.ToJson(), Telerik.Web.Spreadsheet.MimeTypes.JSON); }