Questions on Kendo UI for jQuery Forum

1 answer

120 views

The scheduler control reads dates just fine but when we attempt to create/update
appointments the hour returned from the control is always one hour ahead.
Everytime you update the title or description it continuously increments our date by an hour on each request.

We thought it had something to do with the way UTC dates are handled in javascript
during the ajax call. Could you please let us know what we are doing wrong?
Thanks.

Scheduler

answered on 28 Nov 2013

3 answers

84 views

Q3 2013 ScrollView content(...) method error

Upgraded to Q3 2013, and I set the content for my scrollview through the content() method, but it's getting a:
Error: Object doesn't support property or method '_getPages'

I tried creating just a simple example from the Kendo UI docs, and I still get the error:

<div id="slideshow">

</div>

<script>

function showHome(e) {

var slideshow = $("#slideshow").kendoMobileScrollView().data("kendoMobileScrollView");

slideshow.content('<div data-role="page">Item1</div><div data-role="page">Item2</div>');

}

</script>

This is the exact same content that is set in the API docs for the content(...) method, so I'm leaning towards a bug?

ScrollView (Mobile)

answered on 28 Nov 2013

1 answer

43 views

Kendo UI Window asp.net mvc3

I have a scenario where I have to display more than 10 Kendo UI Windows in a page . I should able to drag the windows in the page and drop
them anywhere on the desktop and also in extended monitor . I know the scope of the windows is within the page. I couldn`t able to drag the window outside the browser page. But how can I make achieve this in asp.net mvc3 ?

Window

answered on 28 Nov 2013

1 answer

552 views

Grid Change event fires 2 times

When I set up a grid to selectable: "row" and capture the change event I see the change event fire twice here is a really simple grid to use as an example:
<html>
<head>
<script>
var data = [
    {"col_a": "vala1","col_b": "valb1","col_c": "valc1"},
    {"col_a": "vala2","col_b": "valb2","col_c": "valc2"},
    {"col_a": "vala3","col_b": "valb3","col_c": "valc3"},
    {"col_a": "vala4","col_b": "valb4","col_c": "valc4"}
           ];
        $(document).ready(function () {
            if(typeof(data) != "undefined")
            {
                $("#grid1").kendoGrid({
                        dataSource: {data: data},
                        columns: [
                        {field: "col_a", title:"ColA"},
                        {field: "col_b", title:"ColB"},
                        {field: "col_c", title:"ColC"}
                        ],
                        sortable: true,
                        resizable: true,
                        width: "95%",
                        height: "400px",
                    selectable: "row",
                        change: function(e){
                                alert('change');
                                }
                });
            }
            else
            {
                $("#grid1").addClass("k-block");
                $("#grid1").text("No data.");
                $("#grid1").css("font-weight", "bold");
                $("#grid1").css("font-size", "14px");
                $("#grid1").width(400);
            }
        });
</script>
</head>
<body>
<div id="grid1" style = "width:99%;"></div>
</body>

its also in action here: http://jsfiddle.net/jnv9M/

Any way to prevent this or any help as to why I'm getting this event twice?

Grid

answered on 28 Nov 2013

6 answers

454 views

Treeview - add html to item

Complete Code From here:
http://pastebin.com/LHa83w57

OR:

<script>

-

$("#treeview-images").kendoTreeView({

dataSource: [

{

text: "Inbox", imageUrl: "../../content/web/treeview/mail.png",

items: [

{ text: "Read Mail", imageUrl: "../../content/web/treeview/readmail.png" },

{ text: "adasd" , imageUrl: "../../content/web/treeview/readmail.png" }

]

},

{

text: "Drafts", imageUrl: "../../content/web/treeview/edit.png"

},

{

text: "Search Folders", expanded: true, imageUrl:"../../content/web/treeview/search.png",

items: [

{ text: "Categorized Mail", imageUrl: "../../content/web/treeview/search.png" },

{ text: "Large Mail", imageUrl: "../../content/web/treeview/search.png" },

{ text: "Unread Mail", imageUrl: "../../content/web/treeview/search.png" }

]

},

{

text: "Settings", imageUrl: "../../content/web/treeview/settings.png"

}

]

});

</script>

How is this possible? I have tried:
{ text: document.write('Read <br> Mail'); , imageUrl:"../../content/web/treeview/readmail.png" },

But then it does not display me anything (not even the tree View).

TreeView

answered on 28 Nov 2013

2 answers

164 views

what format is given me the datePicker

Hello again,

if i have a kendo DatePicker
and i get the value of that something like that:
var startDate = $(employee.currentStartDate).data("kendoDatePicker").value().toString();
i send to the server as a string,but i try to parse this date in .net C#
i tried something like

public ActionResult GetEndDateValues(string startDate)
        {

            DateTime contractVersionStartDate = DateTime.ParseExact(startDate, "g", null); also i tried G,D,d,still not recognized
}
if on the client,i put toUTCString(),or toISOString(), then the date is 2 hour behind,so i get the yesterday date(ex. 26.11.2013,i get 25.11.2013 22:00:00 pm)
is not ok.
so can you help me clarify this?
i want no matter what local culture is,to send it from client,and parse right on the server.

Best Regards,
Daniel

P.S:if i enter in my telerik account,and i click on a post,no longer sends me to my post,i have to look over it,in the whole kendo forum.before it wasn't like that.

DatePicker

answered on 28 Nov 2013

2 answers

431 views

Position of validation tooltip for radio button list

Hello,

I am trying to use the kendo validation with a set of radio buttons inside of a kendo template. i've been able to validate whether or not there is at least one radio button selected per set but I cannot seem to get the validation tooltip to be located where I want it to. Basically each template item has a radio button list with each items name and id set to the same value. When the validation fires it places the tooltip in the first radio button list items label area. I'd like it to be above the list of radio button items. Please see my code below:

<div id="kendo-content" class="k-content">
        <div id="divSubgroups" style="border: none; border-top: 1px dashed #ccc;" data-bind="source: lstSubgroups" data-template="SubgroupTemplate"></div>
    </div>

    <script type="text/x-kendo-template" id="SubgroupTemplate">
        <div class="item">
            <div class="left">
                <h3>#:Name#</h3>
                <br />
                <p>Current Due: <strong>#:kendo.toString(AmountOwed, "c")#</strong></p>
                <br />
                <p><button id="btnAddPaymentAccount" type="button" class="Orange">Add Payment Account</button>


            </div>
            #if(Accounts.length > 0){#
                <div style="float: right">
                    <h3>Select Payment Account:</h3>
                    <span class="k-invalid-msg" data-for="radio#:ID#"></span>
                    <ul style="margin: 0;" data-bind="source: Accounts" data-template="AccountTemplate"></ul>
                    <br />
                    <span class="left"><button id="btnEditPaymentAccount" type="button" onclick="Validate('#:ID#');">Edit Account</button></span>
                    <span style="float: right"><button id="btnPayBill" type="button" onclick="Validate('#:ID#');">Pay Bill</button></span>
                </div>
            #}#
            <div style="clear: both;"></div>
        </div>
    </script>

    <script type="text/x-kendo-template" id="AccountTemplate">
        <li>
            <label>
                <input type="radio" id="radio#:ParentID#" name="radio#:ParentID#" value="#:ID#" />
                #:Descriptor#
            </label>
        </li>
    </script>
    <script>
        function Validate(id)
        {
            var validator = $("#radio" + id).kendoValidator({
                rules: {
                    custom: function (input) {
                        var v = $("#radio" + id + ":checked").length;
                        return v > 0;
                    }
                },
                messages: {
                    custom: "Please select a payment account to continue."
                }
            }).data("kendoValidator").validate();
        }
    </script>

The data model for this is as follows:
lstSubgroups:
[
   {
       ID:"P001",
       Name:"Test Name 1",
       AmountOwed:200,
       Accounts: [
                       { ParentID:"P001", ID:9318, Descriptor:"Personal Card #1" },
                       { ParentID:"P001", ID:9319, Descriptor:"Personal Card #2" },
                       { ParentID:"P001", ID:9320, Descriptor:"Personal Card #3" }
                  ]
   },
   {
       ID:"P002",
       Name:"Test Name 2",
       AmountOwed:100,
       Accounts: [
                       { ParentID:"P002", ID:1515, Descriptor:"Company Card #1" },
                       { ParentID:"P002", ID:2356, Descriptor:"Company Card #2" }
                  ]
   },
   {
       ID:"P003",
       Name:"Test Name 3",
       AmountOwed:500,
       Accounts: [
                       { ParentID:"P003", ID:2342, Descriptor:"Parents Card #1" },
                       { ParentID:"P003", ID:1122, Descriptor:"Parents Card #2" },
                       { ParentID:"P003", ID:786, Descriptor:"Parents Card #3" }
                  ]
   }
]

I've tried adding "<span class="k-invalid-msg" data-for="radio#:ID#"></span>" but it doesn't seem to have any effect.

Your help is greatly appreciated!
Matt

Validation

answered on 27 Nov 2013

4 answers

275 views

TabStrip initially rendering incorrectly in some browsers

I'm using the PHP wrappers to generate a mildly complex tabstrip based form. In Chrome and Firefox the tabstrip initially renders with all of the tabs as one long unformatted div before refreshing itself a second or two later and displaying correctly. In both Opera and IE (yeah IE) it renders correctly without the initial hiccup

Test page: http://raymondandrews.com/crftest
Source: http://raymondandrews.com/crftest/index.txt

I'm not loading tabs with ajax or from a database, right now it's all manually configured

TabStrip

answered on 27 Nov 2013

10 answers

233 views

MVVM grid: Where is the documentation for the 'data' attributes for the grid

Can someone please guide me to the documentation for all the 'data' attributes supported on the grid for use in MVVM. I have guessed at a few and saw some in samples. I need the full list please

I am using these:
data-role="grid"
data-bind="source: gridSource"
data-columns='ProductName'
data-sortable='true'
data-editable='inline'

I guessed at 'data-sortable' and it worked. I tried 'data-filterable' but it did NOT work. No filter icons appeared in the column headers. So is filtering supported in the MVVM grid? whats the 'data' attribute for this?

Thanks
-Jonathan

MVVM

answered on 27 Nov 2013

5 answers

721 views

DataBounded event

Hello,

A while a go, posted this question about how to select a row after a grid refresh.

The answer given back then was a great workaround. However, once deployed in production with large amount of data, I realized many client's grid were not loaded within 50 milliseconds, leaving the first row unselected.

Increasing the delay might fix the problem for some people but how long should we wait to make sure every grids are loaded? In the other hand, I don't want to add transform my problem into unnecessary.

What's missing here is an event triggered by the Grid.

Is there a way to create an event named DataBounded (or AfterDataBound) that would fired once the grid will complete the loading of the data received from the dataSource?

Best regards,

Simon

Grid

answered on 27 Nov 2013