Telerik Forums
Kendo UI for jQuery Forum
1 answer
657 views
I am looking to format my incoming dates but don't see a suitable way without changing my incoming JSON (which I have standardized on passing as 'time since epoch', new Date().valueOf() ).

Sample Grid Row JSON segment:
{"received_date":1381331366000},
Columns list object:
{ "format": "{0: yyyy-MM-dd HH:mm:ss}", "field": "received_date", "title": "Received" },
My understanding is that the format attribute defined above will specify the output format, however I don't know how to specify a way to accept the incoming milliseconds from epoch as a date object without some interceptor layer injecting itself into the consumption of the JSON.

I would be fine to have a event attached to the datasource in use here and have it mutate the long value into a date object if there isn't a more elegant way to achieve this.
Alexander Popov
Telerik team
 answered on 11 Oct 2013
1 answer
116 views
Hi. 
   I try your listview step by step, when i learn "endlessScroll": http://docs.kendoui.com/api/mobile/listview#configuration-endlessScroll
  I found it is invalid when use DataSource's filter.    may this is DataSource's bug.
  Below is the code:  also can run below code in: http://jsbin.com/AdItib/5/edit
  ////////////////////////////////////////////////Begin/////////////////////////////////////////////
<div data-role="view">
  <ul data-role="listview" data-source="foo" data-endless-scroll="true" data-template="foo-template">
  </ul>
</div>

<script type="text/x-kendo-template" id="foo-template">
    #: name # - #: modified #
</script>

<script>
var i = 0, pageSize = 20;

var max = 1000;
var data = [];
for (; i < max; i ++) {
    data.push({ name:  i, modified: +new Date() });
}

var foo = new kendo.data.DataSource({data:data, pageSize: pageSize});

foo.filter({ field: "name", operator: "gt", value: "200" });

new kendo.mobile.Application();
</script>
  ////////////////////////////////////////////////End/////////////////////////////////////////////
Below code show no results, if  i remove foo.filter({ field: "name", operator: "gt", value: "200" }); then listview will show result.
So ListView's endlessScroll is invalid when DataSource has filter.

Thanks!

Petyo
Telerik team
 answered on 11 Oct 2013
8 answers
345 views
The list items in my ListView with endless scrolling link to another view. If I scroll down, click a list item to view it's details on another view, then navigate back, the ListView is empty until I scroll around a bit and it starts working again.

Is there something I can do on before show to make sure the ListView is displayed and scrolled to the same spot I left it?

Regards

Dean
Kiril Nikolov
Telerik team
 answered on 11 Oct 2013
1 answer
132 views
Trying to paste text into kendo editor in IE on a Windows Phone 8 device results in nothing happening in the editor. I have verified that my clipboard does have text but nothing shows up in the editor UI. 

Known issue?
Kiril Nikolov
Telerik team
 answered on 11 Oct 2013
3 answers
501 views
I'm using inline Editor.
I need to save the editor data into an HTML file and eventually reload the HTML file in the editor to modify it more times.

This is part of my aspx page.
<form id="form1" runat="server">
       <div id="example" class="k-content">
            <div id="editor" class="demo-section">
                <div id="topEditor">       
                    <p>Title</p>
                </div>
                <div contentEditable class="column">
                    <p> Description </p>
                </div>
            </div>
        </div>
</form>
And this are the code I used to inizialized editor 
 $(document).ready(function () {
             $("#topEditor").kendoEditor({
                tools: [
                        "bold",
                        "italic",
                        "underline"]
            });

            $(".column").kendoEditor({
                tools: [
                        "bold",
                        "italic",
                        "underline",]
            });
}

Since I don't initialize  $("#editor").kendoEditor() the code 
var editor= $('#editor').data("kendoEditor")
gives me an undefined value of variable 'editor' and I can't retrieve its content value.

Instead, if i use
            $('#editor').find("div").each(function () {
                var editor = $(this).data("kendoEditor");
                html += editor.value();
            });
I've the right content of each <div> .
The HTML I obtain is:
<p>Title</p><p>Description </p>
but 'cause it doesn't contain <div> element I can't reload it into editor and have the originally document.
            
There's a simple way to get HTML editor data in the right format  that I can re-load in the inline editor more times?

Thanks
Kiril Nikolov
Telerik team
 answered on 11 Oct 2013
3 answers
176 views
Hi,

I'm currently using the DateTimePicker on a couple crucial ages in my PC/iPad web app. The picker seems to work fine on an iPad, but the Calendar/Clock icons are difficult to click as they are very close together. I've included a small sample image.

I'm looking to style the DateTimePicker so the Calendar/Clock icons are slightly further apart to allow room for users with larger fingers. I've attempted accessing the "k-select" class on my pickers, but that seems to throw off the hover CSS as well.

Is this possible?

Thanks,
Landon
Iliana Dyankova
Telerik team
 answered on 11 Oct 2013
4 answers
93 views
See the fiddle here: http://jsfiddle.net/rydama/KaTg2/9

The problem is with the 'e' field in the data object. When kendo is rendering the row template, it is using this object and the 'e' field conflicts with the js code it created for the template which starts out like this:

function anonymous(data
    /**/
) {
    var o, e = kendo.htmlEncode;
    with(data) {
       o = '<tr data-uid="' + (data.uid)
 
...
...


I can workaround this by mangling my field name, but should I need to? Is this something that should be fixed in kendoui?

Thanks


Atanas Korchev
Telerik team
 answered on 11 Oct 2013
1 answer
117 views
Hi

I'm using Kendo widgets extensively with changeable theme.
Colors work just fine on Kendoui elements, the problem is with all the other elements on the pages.
How to make them easily follow the selected theme?

I could do a little with the help of
http://docs.kendoui.com/getting-started/web/appearance-styling
E.g. setting the "k-content" class for the body (that would only take care of the text and background color), "k-button" for all buttons, "k-link" for all links, etc.
Would it be possible to automatically wrap the colors from the theme for all input/link/table/... elements on the page?
Thanks.

 Raido

Iliana Dyankova
Telerik team
 answered on 11 Oct 2013
3 answers
836 views
I'm trying to place a form inside a Kendo Window, and not having any success. Basically, the problem is that the generated html contains an empty form tag, instead of having the fields placed within the form tag.

Here's my cshtml file. I place two identical forms on the page, one 'normal' and one inside a Kendo Window.

@model SkyBooks.Web.Models.EmailInfo
 
@{
    ViewBag.Title = "title";
}
 
<div style="float:right">
    <span id="btnCreateRole" class="k-button">Create New User Role</span>
</div>
<div style='clear: both'></div>
<h2>Kendo UI Window with Ajax Form test</h2>
 
@* Plain Ajax Form Without Kendo Window *@
<div id="personalDetail">This is where the feedback goes</div>
 
@using (Ajax.BeginForm("AjaxCreate", "KendoWindowAjax", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "personalDetail", LoadingElementId = "divLoading" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Ajax.BeginForm Demo</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.EmailAddress)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.EmailAddress)
            @Html.ValidationMessageFor(model => model.EmailAddress)
        </div>
        <input type="submit" value="Submit" />
        <div id="divLoading" style="display:none">
            @* loader image created at: http://www.ajaxload.info/ *@
            <img src="@Url.Content("~/Content/images/ajax-loader.gif")" />
        </div>
    </fieldset>
}
 
@* And this is an attempt at an ajax form inside a Kendo Window *@
    @(Html.Kendo().Window()
          .Name("window")
          .Title("New User Role")
          .Content(@<text>
                @using (Ajax.BeginForm("AjaxCreate", "KendoWindowAjax", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "personalDetail", LoadingElementId = "divLoading2" }))
                {
                    @Html.ValidationSummary(true)
                    <fieldset>
                        <legend>Ajax.BeginForm Demo</legend>
                        <div class="editor-label">
                            @Html.LabelFor(model => model.Name)
                        </div>
                        <div class="editor-field">
                            @Html.EditorFor(model => model.Name)
                            @Html.ValidationMessageFor(model => model.Name)
                        </div>
                        <div class="editor-label">
                            @Html.LabelFor(model => model.EmailAddress)
                        </div>
                        <div class="editor-field">
                            @Html.TextBoxFor(model => model.EmailAddress)
                            @Html.ValidationMessageFor(model => model.EmailAddress)
                        </div>
                        <input type="submit" value="Submit" />
                        <div id="divLoading2" style="display:none">
                            @* loader image created at: http://www.ajaxload.info/ *@
                            <img src="@Url.Content("~/Content/images/ajax-loader.gif")" />
                        </div>
                    </fieldset>
                }
            </text>)
          .Draggable()
          .Events(ev => ev.Close("onClose"))
          .Visible(true)
          .Modal(true)
          )
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
 
<script>
    function onClose() {
        $("#btnCreateRole").removeClass("k-state-disabled");
    }
 
    $(document).ready(function () {
        $("#btnCreateRole").bind("click", function () {
            if (!$("#btnCreateRole").hasClass("k-state-disabled")) {
                $("#window").data("kendoWindow").center().open();
                $("#btnCreateRole").addClass("k-state-disabled");
            }
        });
    });
</script>
I’ve included the generated html below. Notice that the first form is surrounded by a form tag, as expected. But the form tag inside the window is empty.

Not surprisingly, given the generated html, the forms behave differently. When I click on Submit without entering anything, the normal form displays validation errors, while the one in the window does nothing. When I enter valid data and click on Submit, the normal form submits the ajax post, while the one in the window does nothing.

If I replace the Ajax.BeginForm statement inside the window with the raw form tag html, then both forms work as expected.

Any suggestions for how to put a form inside a Kendo UI window without resorting to the raw html would be appreciated.
Thanks,
Ken

<section id="main">
                 
 
<div style="float:right">
    <span id="btnCreateRole" class="k-button">Create New User Role</span>
</div>
<div style='clear: both'></div>
<h2>Kendo UI Window with Ajax Form test</h2>
 
 
<div id="personalDetail">This is where the feedback goes</div>
 
<form action="/KendoWindowAjax/AjaxCreate" data-ajax="true" data-ajax-loading="#divLoading" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#personalDetail" id="form0" method="post">    <fieldset>
        <legend>Ajax.BeginForm Demo</legend>
        <div class="editor-label">
            <label for="Name">Name</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
        </div>
        <div class="editor-label">
            <label for="EmailAddress">EmailAddress</label>
        </div>
        <div class="editor-field">
            <input data-val="true" data-val-length="The EmailAddress must be from 6 to 20 characters long." data-val-length-max="20" data-val-length-min="6" data-val-required="The EmailAddress field is required." id="EmailAddress" name="EmailAddress" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
        </div>
        <input type="submit" value="Submit" />
        <div id="divLoading" style="display:none">
             
            <img src="/Content/images/ajax-loader.gif" />
        </div>
    </fieldset>
</form>
 
    <form action="/KendoWindowAjax/AjaxCreate" data-ajax="true" data-ajax-loading="#divLoading2" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#personalDetail" id="form1" method="post"></form><div id="window">
                    <fieldset>
                        <legend>Ajax.BeginForm Demo</legend>
                        <div class="editor-label">
<label for="Name">Name</label>
                        </div>
                        <div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
                        </div>
                        <div class="editor-label">
<label for="EmailAddress">EmailAddress</label>
                        </div>
                        <div class="editor-field">
<input data-val="true" data-val-length="The EmailAddress must be from 6 to 20 characters long." data-val-length-max="20" data-val-length-min="6" data-val-required="The EmailAddress field is required." id="EmailAddress" name="EmailAddress" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
                        </div>
                        <input type="submit" value="Submit" />
                        <div id="divLoading2" style="display:none">
                             
                            <img src="/Content/images/ajax-loader.gif" />
                        </div>
                    </fieldset>
            </div><script>
    jQuery(function(){jQuery("#window").kendoWindow({"close":onClose,"modal":true,"iframe":false,"draggable":true,"title":"New User Role","resizable":false,"content":null,"actions":["Close"]});});
</script>
 
 
<script>
    function onClose() {
        $("#btnCreateRole").removeClass("k-state-disabled");
    }
 
    $(document).ready(function () {
        $("#btnCreateRole").bind("click", function () {
            if (!$("#btnCreateRole").hasClass("k-state-disabled")) {
                $("#window").data("kendoWindow").center().open();
                $("#btnCreateRole").addClass("k-state-disabled");
            }
        });
    });
</script>
 
            </section>
Yacov
Top achievements
Rank 1
 answered on 10 Oct 2013
4 answers
139 views
Using the asp.net mvc kendoui wrapper,

I cannot use the .click("") command on custom commands as shown off in the web demos...

Any help would be appreciated !
Rulin
Top achievements
Rank 1
 answered on 10 Oct 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
DropDownTree
ListBox
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?