Telerik Forums
Kendo UI for jQuery Forum
1 answer
418 views

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?

kendo.ui.progress.messages = {
      loading: "Processing file remittance. Please wait.."
};
kendo.ui.progress($("body"), true);
span.k-loading-text {
    font-size: 1.1rem;
    text-indent: 0;
    top: 55%;
    display: inline-block;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #555;
}
Neli
Telerik team
 answered on 16 Apr 2021
3 answers
233 views

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 

Veselin Tsvetanov
Telerik team
 answered on 15 Apr 2021
1 answer
121 views

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'

Martin
Telerik team
 answered on 15 Apr 2021
1 answer
693 views

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?

 

 

Tsvetomir
Telerik team
 answered on 15 Apr 2021
2 answers
2.0K+ views

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
}

 

Tsvetomir
Telerik team
 answered on 14 Apr 2021
3 answers
635 views

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

Misho
Telerik team
 answered on 14 Apr 2021
8 answers
420 views

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.

Anton Mironov
Telerik team
 answered on 13 Apr 2021
2 answers
204 views

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!  

 

 

 

 

Anton Mironov
Telerik team
 answered on 13 Apr 2021
11 answers
1.0K+ views

Seems Kendo is still not able to export image/PDF with the background. Any idea about this?

Dojo is here:  http://dojo.telerik.com/@jcbowyer/exuZi

Dimitar
Telerik team
 answered on 13 Apr 2021
1 answer
305 views

I have a sheet with a header column, that I would like to preserve during an import of an Excel file.

In a kendoUpload.success event I import the uploaded Excel file like this: $spreadsheet.fromJSON(e.response);

Is there a clever way to have e.response inserted into the second column starting at cell A2?

/Morten

Dimitar
Telerik team
 answered on 13 Apr 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?