Telerik Forums
Kendo UI for jQuery Forum
1 answer
232 views

Hi there,

I'm using a Kendo Scheduler pretty much out of the box.  In month view, if there are multiple items it stacks them vertically with a down arrow if there are too many - enough to fit 2 items on the screen.  However, if there is only 1 item it still shrinks it to the same smaller size and therefore truncates some of the content visually (see screenshot).  Is there anything I can do about this?

Here is my view scheduler declaration :-

@( Html.Kendo().Scheduler<Models.DiaryItemViewModel>()
    .Name("diary")
    .Editable(false)
    .Date(schedulerInitDate)   // sets the initial date for when it loads as today - in month view this takes you to current month, week view to current week etc.
    .StartTime(new DateTime(2015, 6, 1, 7, 00, 00))  // sets the start time in day view - 1/6/2015 is arbitrary here, could be any date!
    .EndTime(new DateTime(2015, 6, 1, 19, 00, 00))   // sets the end time in day view - 1/6/2015 is arbitrary here, could be any date!
    .EventTemplate("<div title='#= title #'>" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'><span style='font-weight: bold;'>#= title #</span></div>" +
                        "#if(Confirmed) {#<div class='k-event-template' style='width:100%; margin-bottom:6px;'><img src='/Content/images/icons/calendar.png' /> Appointment Confirmed</div>#" +
                        "} else {#<div class='k-event-template' style='width:100%; margin-bottom:6px;'><img src='/Content/images/icons/calendar-grey.png' /> Appointment Unconfirmed</div>#}#" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'>#= Reference #</div>" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'><span style='font-weight: bold;'>Visit By:</span> #= VisitBy #</div>" +                 
                    "</div>")
    .Views(views =>
    {
        views.MonthView();
        views.WeekView();
        views.DayView();
    })
    .Timezone("Etc/UTC")
    .DataSource(d => d
        .ServerOperation(true)
        .Read(read => read.Action("GetAppointments", "Diary").Data("getAdditionalData"))
    )
    .Resources(resource =>
    {
        resource.Add(m => m.Title)
        .Title("Type")
        .DataTextField("Title")
        .BindTo(new[] { 
                        new { text = "General", value = "General", color = "#ffffff" } ,
                        new { text = "Legionella", value = "Legionella", color = "#000000" } ,
                        new { text = "Survey", value = "Survey", color = "#cccccc" } 
                    });
    })
    .Events(e => e
        .DataBound("onSchedulerOpen")
    )
)

Thanks, Mark

Vladimir Iliev
Telerik team
 answered on 24 Sep 2015
3 answers
176 views

Hello.

When some error occures on server-side during Scheduler request, this error is transferred to client as 400 Bad request with some description. Then in dataSource error handler function I show modal window with error description:

JS:

01.self.dataSourceError = function (xhr, error) {
02.            if (xhr.xhr.responseJSON && xhr.xhr.responseJSON.ErrorDescription) {
03.                self.showError(xhr.xhr.responseJSON.ErrorDescription);
04.            } else {
05.                self.showError(xhr.xhr.responseText);
06.            }
07.        };
08. 
09.self.showError = function(text) {
10.            var errorWindow = self.getErrorWindow();
11. 
12.            self.errorMessage = text;
13.            $scope.$apply();
14.            errorWindow.center();
15.            errorWindow.open();
16.        };
17. 
18.self.getErrorWindow = function () {
19.            if (angular.isUndefined(self.errorWindow)) {
20.                return $("#errorModal").data("kendoWindow");
21.            }
22.            return self.errorWindow;
23.        };

Error window HTML:

01.<div kendo-window="main.errorWindow" k-title="'Ошибка'" id="errorModal"
02.         k-width="450" k-height="130" k-visible="false" k-modal="true"
03.         k-resizable="false" k-pinned="true" k-draggable="false">
04.        <div class="error-message">
05.            {{main.errorMessage}}
06.        </div>
07.        <div class="error-ok-button">
08.            <button class="k-button k-primary" ng-click="main.errorWindow.close()">OK</button>
09.        </div>
10.    </div>

Now, while error window is shown, the editor form is automatically closed in background.

But I need Editor window to stay opened while user do not press cancel button or while save operation on server does not succeed.

How I can acomplish this?

I already tried such code from this forum: (this post)

1.var scheduler = $("#scheduler").data("kendoScheduler");
2.  
3.    scheduler.one("dataBinding", function (e) {
4.      e.preventDefault(); // cancel grid rebind if error occurs - this prevents window to closing
5.  
6.      /* some error handling */
7.    });

But this code (while doing what I need to do at the first look) breaks widget - if user will press OK button for second time there will be an error in console something about "Cannot read property ***  of undefined" - I dont remember property name. This error fires from somewhere in kendo source code.

 

Vladimir Iliev
Telerik team
 answered on 24 Sep 2015
3 answers
127 views

Hello,

I have created a diagram that contains just one rectangle and a connection leaving from that shape but without a destination shape, when I tried to save this diagram, I had an error, isn't it possible to save a diagram that contains a connection without a destination shape? (attached the diagram example)

Daniel
Telerik team
 answered on 24 Sep 2015
1 answer
219 views

Hello!

First of all I'm using Kendo UI with AngularJS.

I use schema.parse function to reprocess the results. However, the issue I've is that in parse function I manually overwrite some columns ​with a call from a angular service, which returns promise. The columns which are overwritten via promise are not defined. You can easily imagine that via this example:

- I define two fields: code: {type: 'number'}, name: {type: 'string'}

- Via API call only code is obtained (name is undefined)

- in parse function I call a service which obtains me name (code parameter is passed into it).

 

Example of parse function:

parse: function(data) {
    //data.name = 'test'; // THIS WORKS
    service.call(data.code).then(function(result){
            data.name = result; //DOESN'T WORK
    });
    return data;
}

 

Any possibility to achieve the wanted behaviour? Or some other option to be sure that dependant data can be provided manually (so not via API)?

Rosen
Telerik team
 answered on 24 Sep 2015
2 answers
114 views

Dear Telerik,

We need to be able to set the select command in the database request in order to get only desired data.
We tried to do it by adding a select "data: {$select: 'ProductName, UnitPrice, Discontinued'}", but the response still contains unnecessary data.
You can see the example here: http://dojo.telerik.com/AreTu
We were wandering how can we achieve desired behaviour?

 

See attached picture.

Regards,

 

 

Peter

Peter Beyer
Top achievements
Rank 1
 answered on 24 Sep 2015
1 answer
1.0K+ views
I am currently putting together a UI that uses Kendo drop down lists and Kendo combo boxes. Under certain circumstances I need to be able to disable them so they are no longer selectable.
My current implementation has several of each that are created using the html helpers in razor views and I would like to be able to disable them in javascript. What would be the best way to
do this? The items bound to some of the drop downs are sometimes complex objects so I still need access to the currently selected item when they are disabled.
Konstantin Dikov
Telerik team
 answered on 24 Sep 2015
1 answer
263 views

Hi,

I've constructed a page which containers some paragraph blocks and charts. I have a button that will export the DOM to an A4 PDF. I have some influence on the paragraphs, but the charts are not being scaled to the A4 format.

The page is based on Bootstrap, so I use rows and columns.

kendo.drawing.drawDOM($(".page-container"),
        {
            paperSize: "A4",
            margin: { left: "20mm", top: "20mm", right: "20mm", bottom: "20mm" }
        })
        .then(function (group) {
            // Render the result as a PDF file
            return kendo.drawing.exportPDF(group);
        })
        .done(function (data) {
            // Save the PDF file
            kendo.saveAs({
                dataURI: data,
                fileName: "Proposal.pdf",
                forceProxy: true,
                proxyURL: '@Url.Action("Download")'
            });
        });

Questions

  • Is Bootstrap not supported at all?
  • Can I have influence on the size of the charts like I can with e.g. <p> tags by adding the .k-pdf-export class?
  • Can I have influence on where I put page breaks?

Thanks in advance,
Daniel

 

T. Tsonev
Telerik team
 answered on 24 Sep 2015
2 answers
294 views

Hi,

 I have configured a grid which is using a template column, and the value of that template column comes from a function. When I load the grid, the templated column displays correct value. But the issue is, that function is being called many time, my expectation was; It will be called as per the row count in grid, but it seems to be firing for each cell in the grid. Please refer to this link to see the issue :

http://dojo.telerik.com/EnUvO

Please let me know, in case I have configured something incorrectly. 

Regards,

Ajay Kaushik

Ajay
Top achievements
Rank 1
 answered on 23 Sep 2015
4 answers
180 views

Hello there,

 I have a kendo grid with 1 locked column, and rows of data that can be null, sometimes a entire row returns null for data.The row height will be mess up when a entire raw has null value. Is there a fix for that?

 Here's a live version to demonstrate my problem.

 

Anna
Top achievements
Rank 1
 answered on 23 Sep 2015
2 answers
211 views

Hello, I am trying to put a delete button in a grid toolbar. Here is an example of what am I doing http://dojo.telerik.com/aREne . My problem is when I press delete button a confirmation appears at the bottom but when I confirm the operation nothing happens.?.

What I am missing?

Carlos
Top achievements
Rank 1
 answered on 23 Sep 2015
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?