Telerik Forums
Kendo UI for jQuery Forum
8 answers
2.8K+ views
Hi,

Razor code in my MVC view:
    @Html.TextBoxFor(m => m.EstimatedDelivery, new { style = "width: 222px;", @readonly = "readonly", @class = "datetimepicker" })

CS code in controller:
ActionResult Index()
{
      ViewModel model = new ViewModel();
      model.EstimatedDelivery = DateTime.Now.AddDays(1);
      return View(model);
}

Javascript code:

$(document).ready(function () {

     var today = new Date();

     var todayplus180 = new Date();
     todayplus180.setDate(today.getDate() + 180);

    $("#estimatedDeliveryDateTime").kendoDateTimePicker({
            format: "yyyy/MM/dd hh:mm tt",
            parseFormats: ["yyyy/MM/dd", "hh:mm tt"],
            min: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1),
            max: new Date(todayplus180.getFullYear(), todayplus180.getMonth(), todayplus180.getDate())
        });
});

When the page opens the date is displayed in the datetimepicker as "18-03-2013 15:46:49"

If I change the date it's correctly displayed as "2013/03/19 05:30 AM"

Please let me know the reason for the same and also resolution if any for this issue.

Thanks,
PSSPL
Georgi Krustev
Telerik team
 answered on 06 Apr 2016
4 answers
963 views

I have requirement where application has to support the following formats, but DatePicker is not supporting the formats.

$("#sampleDate").kendoDatePicker({
    format: "MM/dd/yyyy",
    parseFormats: ["Mddyyyy", "Mddyy", "MM/dd/00y", "MM/d/00y", "M/dd/00y", "M/d/00y"]
});​

Can someone help with this!

Thanks,
Nishad

Georgi Krustev
Telerik team
 answered on 06 Apr 2016
2 answers
340 views

Background image wont export from Kendo.
Is there a way to get the background image to export to the png file.
I am not clear why the background image won't export.
Dojo is here: http://dojo.telerik.com/@jcbowyer/exuZi

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet - Background Image won't export</title>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
   
<div class="content" style="background: #ffffff;background-image:url(https://static.pexels.com/photos/17666/pexels-photo-large.jpg)">
    <p>Lorem ípsum dolor sit amét, pro éu facilis vulputáte témporibus. Eu méi modus requé. Unum gloriátur has et. Modo stet vix ei, apéirian iñsolens plátoñem has ex. Cum eí oporteat inímicus, prí soluta torquatos témporibus éu.</p>
    <p>Ut eos assúm mazim vócent, cu gloríatur expetéñdis pro. Héñdrerit ádversarium reprehendunt eos ad, dúo an noster feugiat cotidieque. Vocent erroribus repudiáre ad meí. Oratio soluta eripuit sed éx. Vis et meliore appellañtur, át has discere convenire ocurreret. Eos at mazim melius aliquip, aperiam alterum commuñé pro id, zril soluta efficiantur in sit. Duis mundi duo ex, pér offendit probatus suavítate iñ.</p>
    <p>Nec id fácilis similique, audiam moderatius ad eum. Persecuti liberavisse eum ex. Qui anímal audiré et, éum vitae coñsul dolorum eu, ín sed partem antíopam. Velít suscipit te usu. Mea ea melius scripta.</p>
    <p>Illum delenit neglegentúr te cum, in errór inimicus disseñtias mel, placérat ocurreret ea vix. Vix ea latine voluptatum. Cúm eu albucius democritum coñsetetur, vix eu dicat deleniti, omñes ínimicus nám no. Nihil molestiae vel ex.</p>
    <p>Eú ñominavi placerat his, eu vix timeam qualisque. Príma recusabo torquatós eos ad, ín meí próbo aequé. Ex ñoñumy vóluptua accommodare seá, sit át sanctus detráxit, ín eos case probatus tractatos. Id sit nihíl coñtentíones, ñec ut audiré elaboraret, quo alia ferri múñere ét.</p>
</div>
<script>
    var draw = kendo.drawing;
    var geom = kendo.geometry;
 
    var contentSize = new geom.Rect([0, 0], [800, 600]);
    var imageSize = new geom.Rect([0, 0], [1200, 800]);
 
    draw.drawDOM($(".content")).then(function (group) {
         
 
        // export the image and crop it for our desired size
        return draw.exportImage(group, {
            cors: "anonymous"
        });
    })
    .done(function(data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "frame.png"
        });
    });
</script>
</body>
</html>

Dimo
Telerik team
 answered on 06 Apr 2016
1 answer
224 views

 In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping? 

 

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Unable to sort inner list in kendo nested list">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
 
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
  <ul class="playlist" kendo-sortable k-placeholder="placeholder" k-hint="hint">
    <li>Happy
      <ul>
    <li>Papercut <span>3:04</span></li>
    <li>One Step Closer <span>2:35</span></li>
    <li>With You <span>3:23</span></li>
    <li>Points of Authority <span>3:20</span></li>
    <li>Crawling <span>3:29</span></li>
    </ul>
    </li>
    <li>Sad
   <ul>
      <li>Runaway <span>3:03</span></li>
    <li>By Myself <span>3:09</span></li>
    <li>In the End <span>3:36</span></li>
    <li>A Place for My Head <span>3:04</span></li>
    <li>Forgotten <span>3:14</span></li>
    <li>Cure for the Itch <span>2:37</span></li>
    <li>Pushing Me Away <span>3:11</span></li>
    </ul>
    </li>
  </ul>
</div>
<style>
    .playlist {
        margin: 30px auto;
        padding: 10px;
        width: 300px;
        background-color: #f3f5f7;
        border-radius: 4px;
        border: 1px solid rgba(0,0,0,.1);
    }
    .playlist li {
        list-style-type: none;
        position: relative;
        padding: 6px 8px;
        margin: 0;
        color: #666;
        font-size: 1.2em;
        cursor: move;
    }
    .playlist li:hover {
        background-color: #dceffd;
    }
    .playlist li span {
        position: absolute;
        right: 5px;
    }
    li.hint {
        display: block;
        padding: 10px;
        width: 200px;
        background-color: #52aef7;
        color: #fff;
    }
 
    li.hint:last-child {
        border-radius: 4px;
    }
 
    li.hint span {
        color: #fff;
    }
 
    li.placeholder {
        background-color: #dceffd;
        color: #52aef7;
        text-align: right;
    }
</style>
</div>
 
<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
            $scope.placeholder = function(element) {
                return element.clone().addClass("placeholder").text("drop here");
            };
            $scope.hint = function(element) {
                return element.clone().addClass("hint");
            };
        })
</script>
 
 
</body>
</html>

In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping?

In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping?

In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping?

Alexander Popov
Telerik team
 answered on 06 Apr 2016
1 answer
102 views
I'm trying to modify the Time dropdown to show Midnight and Noon instead of 12:00 AM and 12:00 PM.  I can do it easily enough with jquery and the Open event but my problem is when you select one of them, the field is blanked out because it doesn't fit the correct format.  Is there anyway I can modify the value just before the default click event is executed?
Georgi Krustev
Telerik team
 answered on 06 Apr 2016
1 answer
64 views

Hello,

With numbers of 10 digits and more, I have a formatting issue even using kendo.toString() in jquery or DisplayFormat through field decoration on Class ViewModel.

For exemple, 2 458 200 256 using kendo.toString(number, "#,###.###;(- #,###.###);0") will return 24 582 00256 which is totally wrong.

Before upgrade everthing was working correctly. If I want to correctly format number, I need to use kendo.toString(number, "#,###,###,###.###;(- #,###,###,###.###);0");

Georgi Krustev
Telerik team
 answered on 06 Apr 2016
1 answer
419 views

Is it possible to have columns in the grid view of the Gantt control that are hidden? I have tried setting column widths to 0 which the control seems to ignore ... I see no API call to do it, so does that mean if I want to do that I have to go in and hide the column myself during the onDataBinding or onDataBound events?

The reason I ask is that I want two types of columns:

1) The first is a column in the first index position with unbound checkboxes so I can "select" multiple tasks at once.

2) The second is a set of columns that only become visible if the user presses a button elsewhere on the page.

 

Dimitar Terziev
Telerik team
 answered on 06 Apr 2016
1 answer
794 views

Hi,

I have a simple grid with a custom editor template containing a form. I am using data annotations on the model for validation. However, I am trying to customize the validation (disable tooltips and enable css red border). I can do this by adding styles and hiding the validation fields.

What I cannot do is get the red border to surround date pickers and drop downs. I understand there is a hidden field in there that will hold the value and this is the field that gets validated and that it is the wrapper span that needs to get updated with the css.

I am trying to implement the following:

$("form").kendoValidator({

            errorTemplate: "",  
            validate: function (e) {
                var dropDowns = $(".k-dropdown");

                $.each(dropDowns, function (key, value) {
                    var input = $(value).find("input.k-invalid");  
                    var span = $(this).find("span.k-dropdown-wrap");
               if (input.size() > 0) {
                        $(span).addClass("dropdown-validation-error");
                    } else {
                        $(span).removeClass("dropdown-validation-error");
                    }
                });
            }
       });

I am putting the above code into the document.ready function on the grid page (not the editor template) but the custom validation isn't running on the form in the editor template. Is this form in the editor template reachable at the grid view document.load stage or am I missing something? 

To be honest this behaviour should be available out of the box and I've lost alot of time on it. 

Any suggestions would be appreciated.

Regards

John
Top achievements
Rank 1
 answered on 05 Apr 2016
1 answer
278 views

I can't get kendo listview to properly auto scroll when I have grouping. Change autoscroll to true to see issue below.
I am also having a similar problem with angular.
JSFiddle below
https://jsfiddle.net/jcbowyer/ao0xzoaz/1/

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Kendo UI Snippet</title>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.silver.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css"/>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
    </head>
    <body>
        <div data-role="view">
            <ul data-role="listview" data-source="groupedData" data-template="my-template" data-header-template="header-template" data-endless-scroll="false"></ul>
        </div>
        <script type="text/x-kendo-template" id="my-template">
            <h3 class="item-title">#: name #</h3>
             <p class="item-info">#: description #</p>
 
        </script>
        <script type="text/x-kendo-template" id="header-template">
            my group - #: value #
 
        </script>
        <script>
            var groupedData = new kendo.data.DataSource({
               schema : {total: function (data) {
                 return 5}
             },
              data: [
                { name: "Sashimi Salad", description: "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.",  letter: "S" },
                { name: "Seaweed Salad", description: "A nice seaweed salad.",  letter: "S" },
            { name: "Edamame", description: "Boiled soy beans with salt.",  letter: "E" },
            { name: "Maguro", description: "Tuna pieces.",  letter: "M" },
            { name: "Tekka Maki", description: "Tuna roll with wasabi.",  letter: "T" },
            { name: "California Rolls", description: "Crab sticks, avocado and cucumber.",  letter: "C" }
              ],
              group: { field: "letter" },
            pageSize: 2
            });
 
            new kendo.mobile.Application();
 
        </script>
    </body>
</html>

I can't get kendo listview to properly auto scroll when I have grouping. Change autoscroll to true to see issue below.

I am also having a similar problem with angular.

JSFiddle below

https://jsfiddle.net/jcbowyer/ao0xzoaz/1/

I can't get kendo listview to properly auto scroll when I have grouping. Change autoscroll to true to see issue below.

I am also having a similar problem with angular.

JSFiddle below

https://jsfiddle.net/jcbowyer/ao0xzoaz/1/

I can't get kendo listview to properly auto scroll when I have grouping. Change autoscroll to true to see issue below.

I am also having a similar problem with angular.

JSFiddle below

https://jsfiddle.net/jcbowyer/ao0xzoaz/1/

Dimiter Topalov
Telerik team
 answered on 05 Apr 2016
1 answer
2.1K+ views

I am creating my own filters on filter initialization and i need to do some logics and adding values in my filter inputs every time the user click on the filter, but the issue is that filterMenuInit is being fired only once. i was wondering how i can raise this event again, or is there any other event which is being raised on the clicking on the filter?

var initializedFilterMenu = function (e) {
//my logic
};
 
var gridOptions = {
  dataSource: dataSource,
  columns: gridColumns,
  editable: gridEditable,
  pageable: {
    refresh: true, //if set to true, it will show refresh button,clicking on that will make the grid to refresh
    numeric: false,
    previousNext: false,
    messages: {
      display: "Loaded {0}-{1} from {2} data items"
    },
  },
  height: gridHeight,
  scrollable: {
    virtual: true,
  },
  groupable: gridGroupable,
  filterable: gridFilterable,
  sortable: {
    mode: "multiple"
  },
   
  filterMenuInit: initializedFilterMenu,  // The initializedFilterMenu event is raised when the filter menu is initialized.
};
 
var grid = Ember.$("#kendo-grid").kendoGrid(gridOptions).data('kendoGrid');
_this.set('kendoGrid', grid);

Maria Ilieva
Telerik team
 answered on 05 Apr 2016
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
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?