Keno spreadsheets are new and the documentation is very scarce.

I'm trying to do something relatively simple.

I have a spreadsheet with stylized headers like this:

    this.sheetsHeader = [
                {
                    name: "ProductsEntry",
                    rows: [
                        {
                            height: 15,
                            cells: [
                                {
                                    value: "Name",
                                    bold: "true",
                                    background: "#00435e",
                                    textAlign: "center",
                                    color: "white",
                                    fontSize: 14,
                                }, {
                                    value: "Type",
                                    bold: "true",
                                    background: "#00435e",
                                    textAlign: "center",
                                    color: "white",
                                    fontSize: 14,
                                },
                                {
                                    value: "Currency",
                                    bold: "true",
                                    background: "#00435e",
                                    textAlign: "center",
                                    color: "white",
                                    fontSize: 14,
                                },
                                {
                                    value: "Rate",
                                    bold: "true",
                                    background: "#00435e",
                                    textAlign: "center",
                                    color: "white",
                                    fontSize: 14
                                },
                                {
                                    value: "StartDate",
                                    bold: "true",
                                    background: "#00435e",
                                    textAlign: "center",
                                    color: "white",
                                    fontSize: 14,
                                }
                            ]
                        }
                    ],
                    columns: [
                        { width: 200 },
                        { width: 200 },
                        { width: 90 },
                        { width: 90 },
                        { width: 110 }
                    ]
                }
            ];


and that gets initialized the normal way:

        $("#spreadsheet").kendoSpreadsheet({
            toolbar: false,
            sheetsbar: false,
            sheets: that.sheetsHeader
        });

Then later I have an event that clears the spreadsheet but I want to leave the headers intact.

If I do this:

    var sheet = spreadsheet.activeSheet();
    sheet.range(kendo.spreadsheet.SHEETREF).clear();

It wipes out the headers and leaves the sheet entirely empty.

I tried re-adding the headers in many different ways but nothing worked for me.

Aftear clearing the spreadsheet I tried:

     sheet.fromJSON(that.sheetsHeader[0].rows);

I also tried deleting the sheet and re-adding it:

     spreadsheet.removeSheet(0);
     spreadsheet.insertSheet(that.sheetsHeader);

Nothing really worked so far and there's no documentation for this sort of scenario. Any ideas?

I'm current implementing a grid and supplying it with local data (JSON String). However, I would like to implement CRUD functions for that grid. Can anyone guide me as how I can accomplish this?

This is what has been done so far to get the grid up and running:

 <script>               
                $(document).ready(function() {  
                    var myData = ${coursemodules},
                    dataSource = new kendo.data.DataSource({
                        data: myData,                         
                        batch: true,                           
                        pageSize: 30,                           
                        schema: {                               
                            model: {
                                id: "id",
                                fields: {                                      
                                    id: { editable: false, nullable: true},                                       
                                    name: { type: "string", validation: { required: true }},
                                    qualificationLevel: { type: "string", validation: { required: true }},
                                    description: { type: "string", validation: { required: true }},                                       
                                    published: { type: "boolean" },
                                    gateApprove: { type: "boolean" },
                                    duration: { type: "number", validation: { min: 1, required: true } },
                                    academicBody: { type: "string" }
                                }                               
                            }                           
                        }                       
                    });
                   
                    $("#grid").kendoGrid({                       
                        dataSource: dataSource,
                        height: 350,                       
                        scrollable: true,                       
                        sortable: true,                                               
                        pageable: true,
                        toolbar: ["create", "save", "cancel"],
                        columns: [                           
                            {                               
                                field: "id",                               
                                title: "ID",
                                width: '3%'
                            },                           
                            {                               
                                field: "name",                               
                                title: "Course Title",
                                width: '20%'
                            },                           
                            {                               
                                field: "description",
                                title:"Description",
                                width: '35%'
                            },                           
                            {                               
                                field: "published",
                                title: "Published",
                                width: '7%'
                            },
                            {                               
                                field: "gateApprove",
                                title: "Gate Approve",
                                width: '7%'
                            },
                            {                               
                                field: "duration",
                                title: "Duration",
                                width: '5%'
                            },
                            {                               
                                field: "academicBody.shortName",
                                title: "Academic Body",
                                width: '10%'
                            }
                        ],
                        editable: true
                    });               
                });           
            </script>                   

Is there a way to open the GridEditMode.PopUp windows when the users double clicks on a row.

I've got the doubleclick handler


double click event handler
$("#MyGrid").delegate("tbody>tr", "dblclick", function(){

//invoke the popup editor here

});

Do I need to give it an id?

I recently upgraded Kendo in my web app, from 2015 Q2 to 2016 Q1. One of the use case being heavily used in my app is broken now. Please go to this url to reproduce the problem - http://dojo.telerik.com/oJOTE.

I'm showing 2 pre-selected item in this example, Try to search for "chai" and see what happens to pre-selected items. They get cleared.

Then, try it after removing "minLength: 3" option, and repeat the same steps. It works fine. But I do need minLength option.

Please suggest asap.

Thanks,

George

Hi,

Does the Grid support Endless/infinite scrolling?

if no, is there a way to make this possible?

Thanks,

Mohammed

Hi,

Im using a kendo chart on a log scale, My values can not be 0 however they can be 1.

As shown in the dojo, my bars with value 1 are not shown. If you comment out the "type":log you will see the missing columns appearing.

http://dojo.telerik.com/iVuTe

Why is my chart behaving like this?

Thanks in advance!

I'm trying to have my charts and grids interact smoothly together. Is it possible to have multiple charts using the same data source? Then when clicking on a section of one chart, the other charts data shifts to reflect more narrowed/specific information?

 

Thank you.

Hi!

Which data format should use with the kendo UI AngularJS donut chart in order to get multiple inner donuts (see the attachment)? I have managed to draw a donut with one only by using the following simple data format:

[{ "source": "Hydro", "percentage": 22 }, { "source": "Solar", "percentage": 2 }, { "source": "Nuclear",  "percentage": 49 }, { "source": "Wind", "percentage": 27 }];

However, I need multiple rings. Could you please help me out? It would be cool if Telerik provided data structures also for AngularJS examples.

hello there,

 

I encounter a issue that, i have a directive in a pane of splitter, of course i can remove it and re-append it to the splitter. for now, the directive has a isolate scope, even though i had remove the current pane from the document, but the isolate scope is still there, is it makes the memory leak? because this operation maybe will be execute a lot time in a short time. so there will be a lot of scope objects in memory.

here is the demo in dojo

I am defining grid, with "inCell" mode. And I have a problem that the headers are selectable/focusable. Can any one tell me what makes the column headers selectable if I did not define "selectable: true", and why do the column header id changes to the grid's id  + "_active_cell" when it is selected.

This behavior exists in the following demo: http://dojo.telerik.com/IQIQu

I noticed that the property "navigatable: true" may be the cause to this behavior behavior but i think there is another property that affects that behavior,
because in the following example: ( http://jsfiddle.net/Eh8GL/ ) the property "navigatable" is set to "true" but the column headers are not selectable.

thanks!