I am wanting to initially bind a Kendo UI spreadsheet to an empty datasource so the user is presented with an empty sheet. However I am running into this issue:
The data of the DataSource to which the Spreadsheet will be bound has to contain data items. Binding the widget to a DataSource with empty data leads to undesired side effects.
Is there any known workaround to this issue?
Why bind to an empty data source ? You could initialize an empty spreadsheet and use the sheets the initializer creates for it. A spreadsheet always has at least one sheet.
<div id="spreadsheet" style="width: 100%;"></div>
<script>
$(function() {
$("#spreadsheet").kendoSpreadsheet({
});
});
</script>
Related
I was trying to use the Kendo Grid UI control.
I am using the binding from Javascript with few template columns.
When the HTML is generated it gets two tables, one for header and one for body. This becomes hard for accessibility, can someone please guide me how do I set to generate only one table with header and data in it.
This issue is caused by setting grid to be scrollable. Scrollable property in Kendo UI for jQuery is true by default so you need to explicitly set it false.
If you are using Kendo UI for ASP.NET MVC then you have to remove GridBuilder's .Scrollable() method call.
I want to get sorted list items from bind object using kendo ui sortable listview. please refer the sample code from below.
http://dojo.telerik.com/#lilan123/eWofa/2
One way would be to use the Kendo event that is fired on the move or change of the sortable list to set the new index value of the item in the ng-repeat that was moved.
You set the event in the "k-on-change".
<ol id="sortable" kendo-sortable k-options="sortableOptions" k-on-change="change(kendoEvent)">
Then you add the event to the scope.
$scope.change = function(e) {
console.log(e);
alert("The e object has stuff like the old index:" + e.oldIndex);
//Get the correct item from the bound list based on index and change the index values in the list to match.
}
It seems like a hack, but then again, it always felt like a hack when using Telerik controls.
Here is a good blog post on using the events with angular, and what they claim are best practices. Hope it helps!
I would like to create static ClientTemplates for each row of the master grid. The master grid has a read.Action as datasource but the ClientTemplates should be already loaded without another request.
It is possible to use a foreach loop to create the ClientTemplates server-side like
<script id="detailTemplate_1" type="text/x-kendo-template">
#(Html.Kendo().Grid<MyModel>()...
<script id="detailTemplate_2" type="text/x-kendo-template">
#(Html.Kendo().Grid<MyModel>()...
The datasource should be a json string so I don't need another request.
The master grid should looks like
.ClientDetailTemplateId("detailTemplate_#=id#")...
You could load the data for all detail rows (and possible the main grid, if you want to cut down on total requests and can do without server-side paging etc) in an ajax request before creating the grid, then use the detailInit event (builder for MVC) to create the detail row content from that. I'm not sure whether this is possible using the MVC wrappers only.
I'm using Kendo Grid on an existing HTML table which is fine.
I'd like to do other stuff with the data. I've figured out how to get the dataItem for a selected row, but I'd also like to use the entire data source (i.e. the 'converted' HTML items) on the dataBound event.
I'm sure this is pretty simple, I just don't know where to look for the 'raw' data.
Any advice greatly appreciated.
This may not be the 'official' way to access the data, but it works. This is added to the Grid configuration:
dataBound: function(e) {
var data = this.dataSource.options.data;
}
Pretty simple really. Don't know why I couldn't find it sooner.
I need to implement a sought of onRendered() event that would ensure all of the grid is rendered before I do something, which is to .hide() it. My gaol is to have a .hide() and .show() button attached to the div the grid resides in, with the default status set at hidden. The problem is that at the point in which my script executes the initial .hide(), the grid is not fully created yet by the grid.js script. I would rather not do any delay loop. Much rather have a callback.
Any help would be appreciated
Thanks
Pat
This should work without a callback. I have a SlickGrid app where I show and hide the grid in response to UI events. The grid exists as soon as it is instantiated (with new Slick.Grid) and can be manipulated with the .hide()and .show() methods.
I did find one catch though...
If you create the div tag with display: none (so it is initially hidden) the grid columns do not initialise properly. To workaround this I create the div tag with visibility: hidden and remove this style before using the .hide()and .show() methods.
My code looks roughly like this:
<div id="mygrid" style="visibility: hidden"></div>
$grid = $("#mygrid")
grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);
// Hide grid by default, remembering to remove the visibility style
$grid.hide();
$grid.css("visibility", "visible");
// You can now show and hide the grid using normal jQuery methods
$grid.show();
$grid.hide();
Hope this helps.
The slick grid has implemented an event onRendered event github source. We can subscribe to this event and make the appropriate use of it.