Telerik Forums
Kendo UI for jQuery Forum
3 answers
396 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
588 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
131 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
164 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
93 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
132 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
273 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
2 answers
468 views
Hi,

I am building an app, with a mobile switch, but i can not reset it to default state. 
The value is resetted, but the graphic shows it still on "J", the onlabel.
How can I reset this switch completely without removing it from DOM??
Like if it is off for default, it should be off after reset, for it is on for default, it should reset to on, independed on what state it actually is.
<label for="bb" id="ms">Bla or blub?
<input type="checkbox" data-role="switch" id="BB-switch" name="bb" data-change="switchChange" class="rrform" data-off-label="N" data-on-label="J" value="false"/>
</label>
// reset whole formular to default settings
  function reset(){
        var $res = $("#rrform").get(0);
        $res.reset();
        $("#MWST-switch").removeAttr('checked');
   }
reset();
Danilo
Top achievements
Rank 1
 answered on 09 Sep 2013
1 answer
158 views
Is there a panel bar coming on new Kendo Version?

I have been trying to built my own with grouped datasource and template header and http://code.anotherwebstorm.com/apps/awsaccordion/

But in this case (and others) the accordion needs clean html to works fine. The ouput should be like below, but listviews generate more html.

<div id="accordion1">
    <ul>
        <li>
            <h1>Heading 1</h1>
            <div>
                <span>one
                </span>
            </div>
        </li>
        <li>
            <h1>Heading 2</h1>
            <div>
                <span>two
                </span>
            </div>
        </li>
        <li>
            <h1>Heading 3</h1>
            <div>
                <span>tree
                </span>
            </div>
        </li>
    </ul>
</div>
Any suggestions?
Steve
Telerik team
 answered on 09 Sep 2013
2 answers
139 views
I'm doing MVC4 with razor.  I have tried using the datetimepicker with a grid and without and I get the same result.  I suspect it is my CSS but I'm not very proficient at doing CSS.   I use the kendo.common.min.css and kendo.default.min.css.  I've changed the theme slightly for width and fonts on the grid.  

My editor template is as follows, though I have the same problem when I use datetimepicker outside of grid.

@model  DateTime?

@(Html.Kendo().DateTimePickerFor(m => m)
.Min(new DateTime(2010, 1, 1, 10, 0, 0)) //Set min time of the datetimepicker
.Max(new DateTime(2010, 1, 1, 20, 0, 0)) //Set min date of the datetimepicker
.Value(DateTime.Now) //Set the value of the datetimepicker
 
)

To use without the grid, i just included:
    <div id='to-do'>
@(Html.Kendo().DateTimePicker()
        .Name("datetimepicker")
        .Value(DateTime.Now)
)
</div>

My datetimepicker shows up with the month on top, nothing as far as the days, and then a bunch of gray space to the right.  I'm at a loss as to what to try or what to furnish you.

 

 

Thomas
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
Drag and Drop
Application
Map
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
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?