Hi,

I'm having trouble troubleshooting an issue specific to iOS platforms (app, not mobile web) regarding dropdownlists. It scrolls perfectly fine on Android and Windows devices along with any device in the simulator. However, on iOS devices (iPhone 6s and iPad tested), the scrolling doesn't work. At times, constantly moving my finger up and down on the list will shift it slightly (as in, less than 1/2 a row's distance), but never consistently nor reliably responsive in matching my finger's movement as it would on android devices.

I have made sure that kendo.mobile.scroller.min.js and kendo.touch.min.js are included (defined in kendo.all.min.js). I have also tried finding if there are scrollers inside the DropDownList ( $("#leaveType").data("kendoDropDownList").list.data("kendoMobileScroller") returns "undefined" ) interfering with the functionality and came up with nothing.

Screenshot that shows how the area is rendered, is attached. Clicking on the top blue select button shows the dropdownlist.

Below is the relevant code, which itself is inside a kendo view navigated to via a dashboard.

applied to the following:

Any help and/or insight is greatly appreciated. Thanks!

Hello,

from a database I get some strings with html included, ie. for links.

I read some help sites about templates, but I found only solutions with constant html text in the template. And not inside remote results.

Regards,

Peter

Dear Telerik,

We are using  Kendo JQuery with Blazor.Net and it is working fine. We can set the datasource from C# and can pass the selected row from JQuery to C# and so on.
But we have one big problem. All Gridbuttons like Refresh, Next Page,... are going to the root URL with '#'  . In my case  http://localhost:51996/# instead of

going to the page the grid is active on 'http://localhost:51996/fetchdata' . This is probably caused by the router in Blazor.NET.

Is there a way to solve this ? Is there a way to set the URL the button-clicks are going to ?

Regards,

Gert

Hi,

I am using the range bar chart. ( In this example I am refering to the demo https://docs.telerik.com/kendo-ui/controls/charts/how-to/various/timeline-using-range-bars)

I want to display a data series like following:

 var data = [{
        id: 1,
        user: "Jon",
        from: new Date("2014/01/01 11:30").getTime(),
        to: new Date("2014/01/01 14:45").getTime()
      }, {
        id: 2,
        user: "Joe",
        from: new Date("2014/01/01 09:30").getTime(),
        to: new Date("2014/01/01 09:45").getTime()
      }, {
        id: 3,
        user: "Joe",
        from: new Date("2014/01/01 10:00").getTime(),
        to: new Date("2014/01/01 10:15").getTime()
      }, {
        id: 4,
        user: "Joe",
        from: new Date("2014/01/01 12:00").getTime(),
        to: new Date("2014/01/01 14:00").getTime()
      }, {
        id: 5,
        user: "Joe",
        from: new Date("2014/01/01 15:15").getTime(),
        to: new Date("2014/01/01 15:30").getTime()
      }, {
        id: 6,
        user: "Joe",
        from: new Date("2014/01/01 15:45").getTime(),
        to: new Date("2014/01/01 16:00").getTime()
      }, {
        id: 1,
        user: "Joe",
        from: new Date("2014/01/01 20:45").getTime(),
        to: new Date("2014/01/02 16:00").getTime()
      }, {
        id: 1,
        user: "Joe",
        from: new Date("2014/01/03 16:45").getTime(),
        to: new Date("2014/01/04 16:00").getTime()
      }];

//I also increased the max range of the chart:  max: new Date("2014/01/04 17:00").getTime()

I have added two series entries with same ID (so they have the same color) at the end of the series.

When shown in the chart, there is a continuous bar from "2014/01/01 20:45" to "2014/01/04 16:00"), but I would like to have a gab between "2014/01/02 16:00" and "2014/01/03 16:45".

Is it somehow possible to have multiple ranges displayed for each user with same IDs (so I have the same color for the bars). Must there be something changed in the configuration of the chart?

The colors should represent the kind/category of the bar and this type should be allowed multiple times for each user (categoryField).

Thanks in advance,

Michaela

Hi Kendo Team, 
I have the same situation using in Kendo UI Masked control with AutoComplete. If I masked the auto complete control, it does not filter desire result from the autocomplete data list. Is this a bug in kendo that Maked control can not work with Autocomplete ?? Here is my code, please  provide solution if possible - 
 <div class="demo-section k-content">
        <h4><label for="Phones">Choose phone#:</label></h4>
     </div>
 <script>
        $(document).ready(function () {
            var data = [
                "7001",
                "7001.34.32",
                "7001.34.32.22",
                "7001.34.3",
                "7031.34.32"

            ];

            //create AutoComplete UI component
            $("#phones").kendoAutoComplete({
                dataSource: data,
                filter: "contains",
                placeholder: "Select Phone#..."
            });
      
            $("#phones").kendoMaskedTextBox({
                mask: "0000.00.00.00"
            });
});
    </script>

Thanks,

Swarup

I'm setting up a fairly complex (for us) ViewModel for report generation, which will have multiple nested fields that need to call functions on each other and on parents and children.  I'd like to be able to test it in the browser console by calling the VM functions directly, but I've found that "this" is different in the functions depending on whether they've been called by a data-bind click event, vs being called directly from the console command line.

Here's a Dojo setup showing the problem: https://dojo.telerik.com/ucalOzoW

Open the browser console and click Run in Dojo.  You'll see it call testVm.funcTopLevel() with no problem.  Then it calls testVm.fields.field1.funcNested() as you would from the console, and it works as I would expect, where this.id refers to the id property of the object at that level ("idField1"), and this.parent().parent().id refers to the id property of the parent object ("idTopLevel").

But then when you click the "call funcNested" button, "this" now refers to the top-level VM object, and this.parent() is undefined.  I'm assuming there's something going on with how the functions are being bound to "this" in MVVM when called from a click event...

I'd like for the function's behavior and scope to be the same no matter if it's called from the console or from a click event, is there any way to do that?  Or is there something I'm missing?

Thanks!

Hi,

I have Kendo Grid using JQuery which has datasource assigned in one of the javascript function using new instance of kendo.data.DataSource(). First time when datasource is created/assigned there are several parameters passed in transport: read: data. One of the parameters is flag which indicates if item should be saved. First time it's assigned to true to save the item in database. I do have all sorts options for grid inside the Kendo DropDownList. Inside the change event of those sort options I do sort on the grid using following code. But the problem is my item save flag remains true so when I do sort it also keep saving item in database creating duplicate entries. So wondering how can I change that item save flag before doing sort? 

 var grid = $("#GridId").data("kendoGrid");
 grid.dataSource.sort({ field: arr[0], dir: arr[1] });

Thanks!

Hi

1. Is there a method to dynamically set the width of a column?  I've used autoFitColumn but that's not what I need. Ideally I'd like to have the column width small (say 2-5 characters wide) and auto expand when you hover with the mouse. I don't see a .width(x) method (like kendoGrid has) but perhaps there's a way with jQuery?

2. Do you have any performance tips? After the tree has more than 200 or so rows, which for us is very small, it becomes very slow. I'm dynamically loading the content as the user expands the tree which helps a lot but they may want to expand the whole tree. Is there a feasible way to view a tree of 4000 or 5000 rows? If TreeList can't handle that volume, do you have any work arounds you'd suggest?

Thanks

Chris

Hi, and thanks for any help you can provide.

Here are some snippets from my MVVM code:

<div id="manageUser">
<div class="large-8 medium-8 columns">
<input id="StartDate"
   data-role="datepicker" 
   data-format="dd/MM/yyyy"
   data-bind="value: StartDate" />
</div>
</div>

<script>
    var viewModelManageUser = kendo.observable({
        ...
        StartDate: null,
        ...,
        GetTranslator: function() {
            var manageUserRequest = { ManageUser: { AssociateID: ascID }};
            gateway.getFromService(manageUserRequest, function(e) {
               ... 
               if(e.Translator != null)
               {
                  ...
                  viewModelManageUser.set("StartDate", e.Translator.CreatedOn);
                  ...
               }    
            },
            function (e) {
                DisplayErrorMessage(e);
            }
        );
        ...
</script>

As you can see in the HTML, I declare an input (id = StartDate) with the following data- attributes:
   data-role="datepicker" 
   data-format="dd/MM/yyyy"
   data-bind="value: StartDate" />

Upon making the Ajax call to the server, the server code passes back a Translator.CreatedOn value of {1/13/2018 10:55:50 PM} from the database. Note both the client and the server are in the same time zone, (UTC-06:00) Central Time (US & Canada).

Using Chrome v70 Developer Tools, I can see the the argument successfully returned from the Ajax request has an e.Translator.CreatedOn value of "/Date(1515905750950-0000)/".

Again in Debug Tools, after the view model field, StartDate, is populated from the Ajax response, within the console I can see that viewModelManageUser.get("StartDate") returns a value of "/Date(1515905750950-0000)/".

Using the following tool, I can verify that the JavaScript date assigned to the StartDate view model field equates to Jan 13 2018 22:55:50. This value exactly matches the value returned from the database.

http://esqsoft.com/javascript_examples/date-to-epoch.htm
   Option 2: Enter an epoch time value
   New Epoch Time Value:
      1515905750950-0000
   Conversion Output:
      Sat Jan 13 2018 22:55:50 GMT-0600 (Central Standard Time)

However, once the page finishes rendering, the value displayed on client within the bound Date Picker is as follows: 
Start date 14/01/2018

I understand the effect of UTC on dates and relative rules of time zones. What I don't understand is, if the client and server are in the same timezone, and the JavaScript date matches the server date, why does the date picker display StartDate one day into the future relative to the server date?

I am using Kendo version 2018.1.117.

Thanks,
Jeff

Hi Team,

As per my requirement, I need to change my datasource in the Grid once search operation is performed. So, I have written my basic grid code and calling the ajax function to update the data like below. Here my problem is, when grid loads very first time, date format for datetime fields is working fine as mentioned in the grid format. But, it is got resetting once I changed my datasource through the ajax call. Please let me know, how I need to keep my date format same even after changing my datasource. Additionally, I need to add the filterable option, when I am changing my datasource. Please let me know, how I can achieve this.

//Default grid

@(Html.Kendo().Grid<Webapp.Models.EmployerViewModel>()
                                .Name("EmployerGrid")
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.EmployerName).Width(175);
                                    columns.Bound(c => c.PlanYearStart).Format("{0:dd MMM yyyy}").Width(135).Title("Plan Year Start");
                                    columns.Bound(c => c.PlanYearEnd).Format("{0:dd MMM yyyy}").Width(135).Title("Plan Year End");)
                                .Events(e => e.DataBound("onRowBound"))
                                .HtmlAttributes(new { style = "height: 520px;" })
                                .Scrollable()
                                .Sortable()
                                .Pageable(pageable => pageable
                                    .Refresh(true)
                                    .PageSizes(true)
                                    .ButtonCount(5))
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Read(read => read.Action("ListActiveEmployers", "Employer"))
                                 )
                                 .Resizable(resize => resize.Columns(true))
)

//Ajax call for changing the datasource on button click

 $(document).ready(function () {
        $("#employer-search-button").click(function () {
            var periodId = $("input[id='period-id']").val();
            $.ajax({
                type: 'POST',
                url: '/Employer/GetEmployersBasedonSearchCriteria',
                data: { periodId: periodId},
                dataType: 'json',
                success: function (result) {
                    var grid = $("#EmployerGrid").data("kendoGrid");
                    var dataSource = new kendo.data.DataSource({
                        data: result.Data
                    });
                    grid.setDataSource(dataSource);                
                }
            });
        });
    });