Telerik Forums
Kendo UI for jQuery Forum
4 answers
258 views

Hi,
       I am using kendo chart with ajax binding.
       I need to prevent the ajax call (read) when chart initialization.
       Ajax call should occured only when firing from a button.
       Is it possible to set the Autobind property for chart?

      @(Html.Kendo().Chart<foo>()
                .Name("foo")
                       
        .Legend(legend => legend.Position(Kendo.Mvc.UI.ChartLegendPosition.Right))
        .Title("foo| ")
        
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Column().Stack(true)
        )
        .DataSource(dataSource => dataSource
          .Read(read => read.Action("foo", "foo").Data("foo")




          )
                   .Group(group => group.Add(model => model.id))
                   .Sort(sort => sort.Add(s => s.id))
         )


       .Series(series =>
        {




            series.Column(x => x.ExecutionTime).Name(string.Empty);


        })




        .CategoryAxis(axis => axis
                    .Categories(m => m.DayFormat)








        )
        .ValueAxis(axis => axis
            .Numeric().MajorUnit(10).Title("Minutes")
        )


                  .Events(events => events.SeriesHover("onSeriesHover").SeriesClick("onSeriesClick").AxisLabelClick("onAxisLabelClick"))
                    
        )
    
Jacques
Top achievements
Rank 2
 answered on 10 Sep 2013
3 answers
348 views

I have a simple view with an AutoComplete, a MultiSelect, and an IntegerTextBox side-by-side with no other styling.

@Html.Kendo().AutoComplete().Name("AutoComplete").Placeholder("AutoComplete")
 
@Html.Kendo().MultiSelect().Name("MultiSelect").Placeholder("MultiSelect")
 
@Html.Kendo().IntegerTextBox().Name("IntegerTextBox").Placeholder("IntegerTextBox")


The AutoComplete and IntegerTextBox are the same width as each other and have the same font for the placeholder. The MultiSelect is radically different - it fills the width of the page and its placeholder has Arial font, which differs from the other two.

What's going on?

Petur Subev
Telerik team
 answered on 10 Sep 2013
1 answer
197 views
The web page, http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridBuilder, shows an example of ClientAltRowTemplate.  Is this out of date?  When I try it, I get CS1061: Kendo.Mvc.UI.Fluent.GridBuilder<System.Data.DataRowView>' does not contain a definition for ClientAltRowTemplate'.  I am trying to set up alternate rows in a Kendo Grid using Razor syntax.
Dimo
Telerik team
 answered on 10 Sep 2013
3 answers
358 views
I have a kendo combobox with an OnSelect method defined on the page, but would like to move it to the jQuery ready function. How do I do that?
Right now, the code looks like this:
<%= Html.Kendo().ComboBox()
    .Name("contactsAc")
    .Filter("startswith")
    .Placeholder("Select a Contact")
    .MinLength(3)
    .HtmlAttributes(new { style = "width:250px;" })
    .DataSource(source => source.Read(read => read.Action("ContactSelect", "TrainingSchedule")
    .Data("onAdditionalData"))
    .ServerFiltering(true))
    .DataTextField("Name")
    .DataValueField("Id")
    .AutoBind(false)
    .Events(e => e.Select("onSelect"))
%>
<script language="javascript" type="text/javascript">
    function onSelect(e) {
        var dataItem = this.dataItem(e.item.index());
        var contact = new Object();
        contact.ContactId = dataItem.Id;
        contact.ContactName = dataItem.Name;
        vm.assignedContacts.push(contact);
        kendo.bind($(document.body), vm);
    }
</script>
I want to place it within :
$(function () {
    $("#startDate").kendoDatePicker();
    $("#endDate").kendoDatePicker();
 
    $("#detailForm").kendoWindow({
        height: "450px",
        title: "Training Schedule Detail",
        visible: false,
        width: "600px"
    }).data("detailForm");
 
    $grid.data = $("#grid").data("kendoGrid");
 
    $("#detailForm").submit(function () {
        if (validateData()) {
            formSubmit();
        }
        return false;
    });
The ready function is in an external JavaScript file that gets loaded at the bottom of the page.



Kiril Nikolov
Telerik team
 answered on 10 Sep 2013
4 answers
551 views
Hi,

Could you please anyone advise me how can i bind model class data annotation attributes using Kendo MVVM?

I have defined the Employee model class as below,

  public class EmployeeModel
    {
        public int EmployeeId { get; set; }

        [Display(Name = "Employee Name")]
        [DataType(DataType.Text)]
        [Required(ErrorMessage = "The employee name should not be empty")]
        [StringLength(50, ErrorMessage = "The employee name should be less than 50 characters length")]
        public string Name { get; set; }

        public bool IsActive { get; set; }
    }

and i have bound this model class into view page using observable object binding. I can use HTML5 attributes for validation and validate using the below Kendo validator code, EmployeeDetails - observable object.

                               <input type="hidden" id="employeeId" data-bind="value : EmployeeDetails.EmployeeId"/>
                                Name<br />
                                <input data-bind="value: EmployeeDetails.Name" type="text" id="Name" name="Name" class="k-textbox" 
                                    placeholder="Employee name" required validationMessage="Please enter employee {0}" />
                                <div></div>
                                <span class="k-invalid-msg" data-for="Name"></span>
                             
                                <input type="checkbox" data-bind="checked: EmployeeDetails.IsActive" id="Status" />


           var validator = $("#EmployeeDetailsView").kendoValidator().data("kendoValidator");

                if (!validator.validate()) {
                    $("#Name").focus();
                    return false;
                }

Now, how can i achieve the same validation by binding the  model attributes directly to input fields with HTML5 validation attributes mentioned as above?
At the same time i have to use observable object binding for elements.

Cheers,
Mahesh
Mahesh Kumar
Top achievements
Rank 1
 answered on 10 Sep 2013
2 answers
118 views
Hi,

While using Kendo UI Upload control in IE9 the UI is little bit distorted when status message is displayed. But, it's fine in IE10, FF & Chrome. After observing in IE developer tool, I found the following difference in the rendered HTML. Please refer the attached image -

IE10 the status-message is wrapped inside a div with class k-dropzone. But, in IE9 there is no wrapper for that. What could be the solution for this?
Stackoverflow Link - http://stackoverflow.com/questions/18699119/kendoui-upload-status-message-issue-in-ie9

Thanks

Ashutosh
Top achievements
Rank 1
 answered on 09 Sep 2013
3 answers
137 views
Hello,

I'm using Kendo UI ver. Q1 2013 and jQuery 1.9.1.
I have some difficulties to show the graph in area chart when I use grouped data. The problem is that, it doesn't paint the graph in Chrome. The graph is painted in Firefox but it is completely wrong and when I move my mouse over legends, Firebug tells "TypeError: u is null". I've reproduce the code on http://jsfiddle.net/saes/7EWRU/1/ so you can see the graph is not painted (in Chrome).

Something that is strange for me is that when I use Kendo UI ver. Q2 2013 (not Q1) as library in jsfiddle, it shows the graph but it's completely wrong (exactly the same like I use Firefox in my dev. environment). You can see it on http://jsfiddle.net/saes/XvRfn/14/
If you click on legends and choose one of them, you can see the grouped data is wrong. 

I wonder what's wrong in my code?

Thank you in advance,
Sam


Code:

var chartData = [{"PathCategory":"Angel","ScanTime":"/Date(1377295627880)/","Usage":309296486838},{"PathCategory":"Development","ScanTime":"/Date(1377295627880)/","Usage":473316311218},{"PathCategory":"Angel","ScanTime":"/Date(1377374709233)/","Usage":309296486838},{"PathCategory":"Development","ScanTime":"/Date(1377374709233)/","Usage":473316307895},{"PathCategory":"Angel","ScanTime":"/Date(1377806709363)/","Usage":315658122119},{"PathCategory":"Development","ScanTime":"/Date(1377806709363)/","Usage":473148678025},{"PathCategory":"Angel","ScanTime":"/Date(1377893108347)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1377893108347)/","Usage":473653756198},{"PathCategory":"Angel","ScanTime":"/Date(1377979510767)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1377979510767)/","Usage":473653763520},{"PathCategory":"Angel","ScanTime":"/Date(1378065909570)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1378065909570)/","Usage":473653764026},{"PathCategory":"Angel","ScanTime":"/Date(1378152311203)/","Usage":316113243171},{"PathCategory":"Development","ScanTime":"/Date(1378152311203)/","Usage":473653764026},{"PathCategory":"Angel","ScanTime":"/Date(1378238716937)/","Usage":316876500733},{"PathCategory":"Development","ScanTime":"/Date(1378238716937)/","Usage":473685197791},{"PathCategory":"Angel","ScanTime":"/Date(1378325112323)/","Usage":318792603246},{"PathCategory":"Development","ScanTime":"/Date(1378325112323)/","Usage":473685191889},{"PathCategory":"Angel","ScanTime":"/Date(1378411511853)/","Usage":318802654704},{"PathCategory":"Development","ScanTime":"/Date(1378411511853)/","Usage":474014244961}];

$("#dataGrowthOverviewPerCategoryChart").kendoChart({
            theme: $(document).data("kendoSkin") || "metro",
            dataSource: {
                group: {
                    field: "PathCategory"
                },
                data: chartData,
                schema: {
                    model: {
                        fields: {
                            ScanTime: {
                                type: "date"
                            }
                        }
                    }
                }
            },
            series: [
                {
                    type: "area",
                    field: "Usage",
                    missingValues: "interpolate"
                }
            ],
            legend: {
                position: "bottom"
            },
            categoryAxis: {
                field: "ScanTime",
                baseUnitStep: "auto",
                labels: {
                    format: "MM/dd"
                },
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            },
            chartArea: {
                height: 250,
                background: "transparent"
            }
        });

Iliana Dyankova
Telerik team
 answered on 09 Sep 2013
1 answer
75 views
Hi,

Using the http://demos.kendoui.com/dataviz/api/selection.html code as example, when i add tooltip function, the chart was unable to show the tooltip.
But if i disable the selection api, the tooltip work.
How to make tooltip work together with selection api?

Thanks.

Regards,
Tan
Iliana Dyankova
Telerik team
 answered on 09 Sep 2013
2 answers
105 views
Hi,

I Noticed that supplying a  
messages.event
object does work, but not the 'event' property.

So:

messages: {
          cancel: "Annuleer",
          save: "Opslaan",
          today: "Vandaag",
          event: "Boeking",
        },
Will not render the title of an edit-event popup to "Boeking".
I use a custom template, as in:

editable: {
          template: $("#editor").html(),
          confirmation: "Wilt u deze boeking daadwerkelijk verwijderen?",
          resize:false,
        },

I found a workaround:
In the parse function of the transport.schema object it's possible to define extra functions. They can do extra magic, and called from the template using MVVM bindings. :)
Like this:
$("span.k-window-title").html("Boeking");
Another use for this method:
Hide the save/cancel buttonbar in certain conditions. Like this:
$("div.k-edit-buttons").css("display","none");

Just my 2 cents!





Kjeld
Top achievements
Rank 1
 answered on 09 Sep 2013
2 answers
235 views
Hi, I have downloaded the trial version of kendo ui, but when I try the kendo scheduler resizeStart, resize and resizeEnd, this three function is not firing/working. I've already tried the sample code from your documentation but still I'm not getting  this thing to work. Can you provide me with a working sample code for this one? Thanks.
Jsn
Top achievements
Rank 1
 answered on 09 Sep 2013
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
Bronze
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
Bronze
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?