Telerik Forums
UI for ASP.NET MVC Forum
9 answers
2.8K+ views
I'm trying to set up a pie chart.  When I set the width of the ChartArea to a pixel based value it's fine but when I set it to a percentage value it doesn't work.

            @(Html.Kendo().Chart()
                  .ChartArea(c => c.Background("#DAECF4"))
                  .HtmlAttributes(new { style = "margin:0 auto;border:none; width: 100%;" })
                  .Name("chart").......(rest of code omitted)

When I look at the HTML in Firebug I see that it has created a div called chart with a width of 100% but the child svg element has a width of 100px - which means it doesn't display correctly.  Whatever I change the percentage width to, I get the svg element width of that amount in pixels instead of percent e.g. 90% ->90px.

Anyone got any ideas?  Does this control support percentage widths?  
Vyn
Top achievements
Rank 1
 answered on 09 May 2014
3 answers
271 views
Hi,

I am using Kendo Scheduler to show the appointments. I have appointment creation/edition screen. I want to redirect it to that page whenever user tries to add/modify an appointment/ Recurring  appointment  from Scheduler. I want to hide the Edit Recurring Item popup message in KendoUI Scheduler while editing recurring appointment as I want to edit the whole series instead of editing single occurrence. So whenever user tries to edit recurring appointment, i want to redirect it to appointment editing screen with all the details without showing any message.

Thanks,
Raghu.
Alexander Popov
Telerik team
 answered on 09 May 2014
3 answers
170 views
Hi,

I am trying to configure a scheduler.

I want to customise each day in the 'month' view, to work with my datasource.
for example: if i want to add a div with the background black or blue then it depends on the field "title" in my datasource etc...

I am having problems configuring my datasource. For some reason I do not see the data returned from the server appearing on my scheduler.

I am tearing out my hair !!!!

Attached it the code I am using for reference.

Please help !!! Where am I going wrong?

Thanks,

Jack.







<script id="editor" type="text/x-kendo-template">


    @*<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd')#</span>*@
    <div>dddd</div>
    <div>#: title #</div>
</script>


<script id="editor2" type="text/x-kendo-template">


    <div>#: title #</div>
<h3>aaaa</h3>
<p>
   <label>Title: <input name="title" /></label>
</p>
<p>
   <label>Start: <input data-role="datetimepicker" name="start" /></label>
</p>
<p>
   <label>Start: <input data-role="datetimepicker" name="end" /></label>
</p>
</script>




<script>
    var tempContent = $("#editor").html();
    var template = kendo.template(tempContent);


    $("#scheduler").kendoScheduler({
            date: new Date(2014, 4, 2, 0, 0, 0, 0),
            startTime: new Date("2014/6/13 00:00 AM"),
            //height: 600,
            views: [
                {
                    type: "day",
                    dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date,'d')#</u>")
                },
                {
                    type: "month",
                    dayTemplate: kendo.template("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd')#</span><div>aaaa</div>")/*template(template)*/,
                    dayHeaderTemplate: kendo.template("<u>#=kendo.toString(date,'ddd')#</u>")
                    
                }
            ],
            selectable:true,
            timezone: "Etc/UTC",
            //dataSource: [
            //{
            //    id:1,
            //    title: "Fast and furious 6",
            //    image: "../../content/web/scheduler/fast-and-furious.jpg",
            //    imdb: "http://www.imdb.com/title/tt1905041/",
            //    start: new Date("2014/6/13 17:00"),
            //    end: new Date("2014/6/13 18:30")
            //},
            //{
            //    id:2,
            //    title: "The Internship",
            //    image: "../../content/web/scheduler/the-internship.jpg",
            //    imdb: "http://www.imdb.com/title/tt2234155/",
            //    start: new Date("2014/6/14 14:00"),
            //    end: new Date("2014/6/14 15:30")
            //}
            //],
            editable: {
                template: $("#editor2").html()
            },


            dataSource: {
                batch: true,
                transport: {
                    read: {
                        url: "@Url.Action("Read","OmittedDaysScheduler",new { brnEntID=ViewBag.BranchEntityID})",
                        dataType: "jsonp"
                    },
                    update: {
                        url: "@Url.Action("Update","OmittedDaysScheduler")",
                        dataType: "jsonp"


                    },
                    create: {
                        url: "@Url.Action("Create","OmittedDaysScheduler")",
                        dataType: "jsonp"


                    },
                    destroy: {
                        url: "@Url.Action("Destroy","OmittedDaysScheduler")",
                        dataType: "jsonp"


                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                schema: {
                    model: {
                        id: { type: "number", from: "ID" },
                        fields: {
                            taskId: {from: "ID", type: "number"},
                            title: { from: "Title", defaultValue: "No title" },
                            start: { type: "date", from: "Start" },
                            end: { type: "date", from: "End" },
                            startTimezone: { from: "StartTimezone" },
                            endTimezone: { from: "EndTimezone" },
                            description: { from: "Description" },
                            recurrenceId: { from: "RecurrenceID" },
                            recurrenceRule: { from: "RecurrenceRule" },
                            recurrenceException: { from: "RecurrenceException" },
                            isAllDay: { type: "boolean", from: "IsAllDay" }
                        }
                    }
                }
            }
        });
</script>


Here is the server response:

{"Data":[{"ID":6,"Description":null,"End":"\/Date(1396818000000)\/","EndTimezone":"UTC","IsAllDay":false,"RecurrenceException":"excep","RecurrenceRule":"rule","Start":"\/Date(1396818000000)\/","StartTimezone":"UTC","Title":"Number 1","TimeFrom":null,"TimeTo":null},{"ID":3,"Description":null,"End":"\/Date(1396339200000)\/","EndTimezone":"UTC","IsAllDay":false,"RecurrenceException":"excep","RecurrenceRule":"rule","Start":"\/Date(1396332000000)\/","StartTimezone":"UTC","Title":"Number 2","TimeFrom":{"Hours":7,"Minutes":39,"Seconds":0,"Milliseconds":0,"Ticks":275400000000,"Days":0,"TotalDays":0.31875,"TotalHours":7.6499999999999995,"TotalMilliseconds":27540000,"TotalMinutes":459,"TotalSeconds":27540},"TimeTo":{"Hours":9,"Minutes":39,"Seconds":0,"Milliseconds":0,"Ticks":347400000000,"Days":0,"TotalDays":0.40208333333333329,"TotalHours":9.65,"TotalMilliseconds":34740000,"TotalMinutes":579,"TotalSeconds":34740}}],"Total":2,"AggregateResults":null,"Errors":null}








Alexander Popov
Telerik team
 answered on 09 May 2014
1 answer
134 views
I am trying to use hierarchy with the data that is in the model.  However, when the grid loads, the first column is not the expand/collapse, it is the first data bound column and all other columns are shifted left.  If I exclude the client template, it works fine, but as soon as I add the template call, it breaks.
​
@(Html.Kendo().Grid<SHDIncident>(Model.SHDActive)
               .Name("shdActive")
               .Columns(columns =>
               {
                   columns.Bound(e => e.SHDEntryId);
                   columns.Bound(e => e.AffectedWorkload);
                   columns.Bound(e => e.Severity);
                   columns.Bound(e => e.Status);
                   columns.Bound(e => e.AffectedDataCenters);
                   columns.Bound(e => e.StartTime);
                   columns.Bound(e => e.LastUpdatedTime);
               })
               .ClientDetailTemplateId("shddetailTemplate")
           )
Nikolay Rusev
Telerik team
 answered on 09 May 2014
1 answer
89 views
I noticed on the online demo as well as my own charts that "Pan & Zoom" charts don't react to touch devices such as an iPad.  Is there a future release or any requests to have the feature fixed/added?
T. Tsonev
Telerik team
 answered on 08 May 2014
1 answer
108 views
I have a problem on sorting and filtering in grid. I already read and tried some threads in this forums but still not working.

I hope you could help me on this.

Thank you and God bless...

Here's my code below:

Html.Kendo().Grid(Of SPIMS.ViewModel.EventViewModel.Index)() _
.Name("grid") _
.Columns(Sub(c)
c.Bound(Function(p) p.ID).HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"}).Width(10)
c.Bound(Function(p) p.CreatedDate).Format("{0:dd/MM/yyyy}").Width(20).Title("Date").HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"})
c.Bound(Function(p) p.Source).HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"}).Width(20)
c.Bound(Function(p) p.Message).HeaderHtmlAttributes(New With {.style = "text-align: center; font-weight: bold"}).Width(50).Title("Description")
c.Command(Sub(commands)
commands.Custom("View").Click("showDetails")
End Sub).Title(" ").Width(10)
End Sub) _
.Scrollable() _
.Sortable _
.Filterable() _
.Pageable(Sub(pager)
pager.Input(True)
pager.Numeric(True)
pager.Input(True)
pager.PreviousNext(True)
pager.Refresh(True)
pager.PageSizes(True)
pager.ButtonCount(10)
End Sub) _
.HtmlAttributes(New With {.style = "height:450px;width:900px;"}) _
.DataSource(Sub(d)
d.Ajax() _
.PageSize(10) _
.Model(Sub(model) model.Id(Function(p) p.ID)) _
.ServerOperation(True) _
.Read(Function(read) read.Action("Model_Read", "Event"))
End Sub).Render()
Alexander Popov
Telerik team
 answered on 08 May 2014
2 answers
129 views
I am currently using the latest internal build and have noticed that Chrome (34.0.1847.131) seems to be treating the wrapped drop downs differently to say internet explorer 11. I have attached an image showing the difference.

I have also observed this style issue with the drop down for the text formatting tool.

I'm not sure if this just because I am using the latest internal release. This issue is not presented in the 2014.1.416 build but is in the 2014.1.423 build.

Jelly Master
Top achievements
Rank 1
 answered on 08 May 2014
1 answer
780 views
Hello,

I'm trying to set the value of the cascading dropdownlist, i want to set the value that the model have in the second dropdownlist. The value seems to be set, but only after i first click on the second dropdownlist then i get the right "name" in the list. Anything i'm doing wrong?
   <script>
                function contractorChanged() {
                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("GetContactPersons", "Permission")',
                        data: {
                            id: $("#ContractorId").val()
                        },
                        cache: false,
                        success: function (data) {
                            $("#ContractorPersonId").data("kendoDropDownList").setDataSource(data);
                       $("#ContractorPersonId").data("kendoDropDownList").value('@Model.ContractorPersonId');
 
                        }
                    });
                }
 
            </script>           
 
@(Html.Kendo().DropDownListFor(model => model.ContractorId)
              .HtmlAttributes(new { style = "width:100%; margin-bottom: 8px;" })
              .OptionLabel("Välj företag")
              .DataTextField("Name")
              .DataValueField("Id")
              .Events(e => e.DataBound("contractorChanged"))
              .DataSource(source =>
              {
                  source.Read(read => { read.Action("GetConstructors", "Permission"); });
              }))
 
            @(Html.Kendo().DropDownListFor(model => model.ContractorPersonId)
              .HtmlAttributes(new { style = "width:100%" })
              .OptionLabel("Välj kontaktperson")
              .DataTextField("FullName")
              .DataValueField("Id")
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("ContractorId")
            )


Georgi Krustev
Telerik team
 answered on 08 May 2014
6 answers
261 views
Hi,

I have a splitter with a treeview in one vertical pane on the left.  When a user clicks an item in the treeview, I would like to load items in horizontal panes in the center.  Is this possible?
thank you,
Alex Gyoshev
Telerik team
 answered on 08 May 2014
1 answer
95 views
I am trying to use the drag and drop framework, but cant seem to get any events on the drop are, such as dragenter.

am I missing something? thanks

​
<div class="draggable">
    drag me
</div>
<div  id="test-area">
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
    <h2>
        Test area
    </h2>
</div>
 
<script>
 
    $(document).ready(function () {
    
        $("#test-area").kendoDropTargetArea({
            dragenter: DragAndDrop.dropTargetOnDragEnter,
            dragleave: DragAndDrop.dropTargetOnDragLeave,
            drop: DragAndDrop.dropTargetOnDrop
        });
 
        $(".draggable").kendoDraggable({
            hint: function () {
                return $(".draggable").clone();
            },
            dragstart: DragAndDrop.draggableOnDragStart,
            dragend: DragAndDrop.draggableOnDragEnd
        });
 
 
    });
 
 
    var DragAndDrop = {
        draggableOnDragStart: function (e) {
            $(".draggable").addClass("hollow");
            $(".draggable").css("cursor", "no-drop");
            e.currentTarget.hide();
 
        },
        draggableOnDragEnd: function (e) {
            e.currentTarget.show();
 
        },
        dropTargetOnDrop: function () {
            alert(2);
 
        },
        dropTargetOnDragEnter: function () {
            alert(1);
            $(".draggable").css("cursor", "wait");
 
        },
        dropTargetOnDragLeave: function () {
            alert(3);
 
        }
    };
 
 
</script>
Alan Mosley
Top achievements
Rank 1
 answered on 08 May 2014
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
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?