I need to capture a multi page form in pdf format and then save it to the server with the record and not to the client. This is the code I wrote that send it to the client, how can I modify it to send it to the server instead

root.options.set("pdf", {
multiPage: 'true'
});
$('#formContainer .appPage').each(function (section) {
kendo.drawing.drawDOM(this).then(function (group) {
group.options.set("pdf", {
margin: {
left: "1cm",
right: "1cm",
top: "1cm",
bottom: "1cm"
}
});
root.append(group);
});
});

kendo.drawing.pdf.saveAs(root, "App.pdf");

Hello,

I have been able to add text to the kendo.ui.progress with the below JQuery and CSS. However, there are only certain times when processing an AJAX operation that I would like to display text and animation via kendo.ui.progress. Is there a way to clear the "loading" message after the ajax call is complete?

hi,

Spreadsheet component is throwing an error while opening the attached file using fromFile method -> https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/methods/fromfile#:~:text=Clears%20the%20spreadsheet%20and%20populates,recent%20version%20of%20other%20browsers.

 If I remove the filters than it works fine.

Can you please check.

Regards,

Jaspreet 

I can't find an options to hide the deleteTag. I want the user to select/deselect items by clicking on the items in the multiselect dropdown, and not by clicking the deleteTag on each tag.

I can change the popup-message when the mouse is hovering the 'X', but I can't find an option to remove the 'X'

This article: https://docs.telerik.com/kendo-ui/knowledge-base/clear-selection-all-pages-grid

uses the undocumented property _selectedIds. If would prefer using a documented way, and since the article is rather old, maybe there is one today?

Hi, we are currently evaluating Kendo UI and are having some trouble figuring out how to bind results a REST API call to the grid. 

Most of the examples we have found are for other formats or local files. We are going to have to work exclusively with a vendor REST API so we need to figure this out in general. Ultimately we also want to be able to bind these results to a Diagram as well. But the focus is on a simple grid for now.

Any help would be appreciated including if there is a better way to do this.

<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script> 
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
<div class="box wide">
<div id="DDisplayCommitteeName"></div>
<div id="grid"></div>
    <div class="demo-section k-content wide">
        <div id="diagram"></div>
    </div>
<div>
        <h4>Export committee chart</h4>
        <div class="box-col">
            <button class='export-pdf k-button'>Export as PDF</button>
        </div>
        <div class="box-col">
            <button class='export-img k-button'>Export as Image</button>
        </div>
        <div class="box-col">
            <button class='export-svg k-button'>Export as SVG</button>
        </div>
</div>
</div>
<script type="text/javascript">
/* GRID BLOCK */
$.ajax({
       type: "GET",
       url: "https://#####?QueryName=$/_Ross/Committee Members&offset=0&limit=100&CommitteeName='Finance Committee'",
       // data: args, // parameters if available
   headers: {"RequestVerificationToken": document.getElementById("__RequestVerificationToken").value,"X-TypeNameHandling": "false"},
       dataType: "application/json",
       success: function (result) {

           var grid = $("#grid").data("kendoGrid");
           var dataSource = new kendo.data.DataSource({ data: result  });
           grid.setDataSource(dataSource);
           grid.dataSource.read();


       },
       error: function (httpRequest, textStatus, errorThrown) {
           alert("Error: " + textStatus + " " + errorThrown + " " + httpRequest);
       }
   });

Example json results:

{
    "Items": [
        {
            "Committee": "Governance Committee",
            "Member": "Mr. Brodie Archer",
            "Member ID": "22630",
            "Position": "Chair",
            "Status": "A",
            "TermStart": "2020-05-13T00:00:00",
            "TermEnd": "2022-05-31T00:00:00",
            "Title": "Director, Operations",
            "PositionRank": 10,
        },
        {
            "Committee": "Governance Committee",
            "Member": "Mr. David William Smith",
            "Member ID": "21537",
            "Position": "Member",
            "Status": "A",
            "TermStart": "2019-10-01T00:00:00",
            "TermEnd": "2021-10-31T00:00:00",
            "Title": "Team Lead",
            "PositionRank": 80,
        },
        {
            "Committee": "Governance Committee",
            "Member": "Mrs. Sue Pack",
            "Member ID": "20966",
            "Position": "Member",
            "Status": "A",
            "TermStart": "2019-10-01T00:00:00",
            "TermEnd": "2021-10-31T00:00:00",
            "Title": "",
            "PositionRank": 80,
        },
        {
            "Committee": "Governance Committee",
            "Member": "Ms. Claire F. Hosken",
            "Member ID": "19069",
            "Position": "Member",
            "Status": "A",
            "TermStart": "2019-10-01T00:00:00",
            "TermEnd": "2021-10-31T00:00:00",
            "Title": "Senior Vice President",
            "PositionRank": 80,
        }
    ],
    "Offset": 0,
    "Limit": 100,
    "Count": 4,
    "TotalCount": 4,
    "NextPageLink": null,
    "HasNext": false,
    "NextOffset": 0
}

Is it possible to set a margin-top:0px (or any other margin style) every time a new paragraph is inserted in the editor?

Thanks, Bob

Hi:

I'm trying to filter a treelist in a toolbar - in a similar manner that I have done with grids - but can't seem to get it to work.  I have a demo of my attempt at https://dojo.telerik.com/@rswetnam/olUQaQOb/3 - any assistance greatly appreciated.

Hi, 

I generate a grid definition upon a selection of information, and everything is working fine... until today
[note I am using cold fusion on the server side - which has caused no problems and that is what the CFSET tags are for below]

ignore the CFSET tags they exist for the code on the page and are not a problem

the cfinclude includes a grid definition which is generated on the fly to populate the grid. it basically defines that its pageable, the page sizes, button count, sizes the columns, and defines them. After the columns are defined there is a datasource: { data: [] }

this has the format of 

 datasource: { data: [

{fieldname:"value",fieldname:"value",fieldname:"value",fieldname:"value",fieldname:"value"}

{fieldname:"value",fieldname:"value",fieldname:"value",fieldname:"value",fieldname:"value"}

{fieldname:"value",fieldname:"value",fieldname:"value",fieldname:"value",fieldname:"value"}

] }

                        $("##ExactSearchGrid").kendoGrid({
                        toolbar: [
                                {name:"excel"},
                                {name:"Exact Selected Card", text:"View Selected Card", iconClass: "k-icon k-i-track-changes-enable"},
                                {name:"Create Card", text:"Create Card", iconClass: "k-icon k-i-change-manually"}, 
                                {name:"Exact Search Grid"}
                            ]
                            <cfset SearchQueryType = 'ExactSearchQuery'>
                            <cfset VSCType = 'EVSC'>
                            <cfset ExcelFilename = 'ExactSearch_' & Now() & '.xlsx'>
                            <cfinclude template="GridDefinition.cfm">
                            }

I discovered today that when this data array in dataSource is empty, events for buttons on the grid no longer trigger!!

IF I add a blank row of data at the end of the data array in dataSource, the grid thinks there is at least one record and the events are allowed

[however, the empty row has lines where a real empty grid would not]

this is a problem because we would like to have a button that only appears when there are no records that can then be used to kick off a process in our system

when the grid has data, i turn the buttons events off and on using CSS pointer-events: none; (by using addClass and removeClass)

.

.

.

.

Is there any way to turn on events which are negated when the grid is empty? or attach an event to the button that is on screen and can be pressed?

This actually took me a long time to figure out what was going on as i did not expect events to stop working when a grid was empty!!!!!

Thank you!