I'm looking out for a ListView with following features:

1. Search Option
2. Endless Scroll
3. Fixed Headers ( using groups )
4. Pull To Refresh

All 4 features doesn't work together. For eg, The FixedHeader doesn't seems to work in combination with Endless Scroll and Pull to refresh. Also the search option never works. Also the "sort" option never works.

Below is my code which I'm calling on data-init of my View.

function loadContactListView(){ 
  
    var dataSource = new kendo.data.DataSource({
           
        transport: {
            read: function(options){
                app.db.transaction(function (tx){
                   
                    if(localStorage.getItem('userCompany')){
                        fetchQuery = "SELECT FirstName , ImageFilePath, Company, Mobile_Number, id from employee_db WHERE Company = '"+localStorage.getItem('userCompany')+"'";
                    }else{
                        fetchQuery = "SELECT FirstName, ImageFilePath, Company, Mobile_Number, id from employee_db";
                    }
                    
                    tx.executeSql(fetchQuery, [], function (tx, result) {
                        var data = [];
                        for (var i = 0; i < result.rows.length; i++) {
                            data[i] = result.rows.item(i);
                            
                        }
                        options.success(data);
                    });
                });
            }
        },
        sort: {
            field: "FirstName",
            dir: "desc"
        },      
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 50,
        group: "Company"
    });    
   
    $("#filterable-listview").kendoMobileListView({
        dataSource: dataSource,
        template: $("#mobile-listview-filtering-template").html(),
        
        fixedHeaders: false,
        
        filterable: {
            field: "FirstName",
            operator: "startswith"
        },
        pulltorefresh: true,
        endlessScroll: true
    });   
     
}

Since Q1 2014 my views haven't been rendering properly.  If I don't have a single tag wrapping the entire template, the view is renders each element in the template with a wrapped div.  I've prepared a sample with two different views.  One is wrapped with a single div element and the other has multiple root elements.  After they are rendered you can look at the html and see that the unwrapped view has a new div around each root element in the template (see attached screen shot).  The sample can be run here: http://jsfiddle.net/9DF9k/

Thanks in advance!

How, if i disable footer, can fire the event for toogle work hourse/full day layout? I try find the answers on forum, but seems It does not exist uet =)

p.s. Thanks.

An OData error occurs when using DataSource filtering with OData and DateTimeOffset. The error is caused due to the following statement


in the function toOdataFilter in the kendo.data.odata.js file where date values are formatted as datetime.

When I try to overwrite the default behavior in parameterMap


it results in HTTP Status 400. Whereas when I overwrite the 'datetime' quote in the original source file with 'datetimeoffset' everything works fine.

Is there any workarround available?

Thanks
Holger

I am using the client side controls.  I am unable to get the time portion of a datetime field in SQL to show up correctly in the grid.  Code is listed below.

<section id="dateSection">
    <input id="datepicker" onchange="fetchAvailability" />
</section>
<section id="gridSection">

</section>
<script type="text/javascript">
    function fetchAvailability(value) {
        //get Date and Fetch Availability...
        //var date = $('datepicker').val();
        debugger;
        //alert(value);
        var dateToFetch = kendo.toString(value, 'd');
        dateToFetch = dateToFetch.replace('/', '-');
        dateToFetch = dateToFetch.replace('/', '-');

        var url = "/Availability/GetByDate/" + dateToFetch;
        //alert(url);
        $("#gridSection").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: url
                },
                pageSize: 100
            },
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "FirstName",
                title: "FirstName",
                width: 140
            }, {
                field: "LastName",
                title: "LastName",
                width: 190
            }, {
                field: "StartDateTime",
                title: "Start",
                format: "{0:yyyy-MM-dd HH:mm}",
                //template: '#= kendo.toString(new Date(parseInt(StartDateTime.replace(/[A-Za-z$--/]/g, ""))),"MM-dd-yyyy mm:ss tt") #',
                width: 200
            }, {
                field: "EndDateTime",
                title: "End",
                template: '#= kendo.toString(new Date(parseInt(EndDateTime.replace(/[A-Za-z$--/]/g, ""))),"MM-dd-yyyy mm:ss tt") #',
                width: 200
            }, {
                field: "Subject",
                title: "Comments"
            }]
        });
    }
    $(document).ready(function () {
        // create DateTimePicker from input HTML element
        $("#datepicker").kendoDatePicker({
            change: function () {
                var value = this.value();
                fetchAvailability(value);
                //console.log(value); //value is the selected date in the datepicker
            },
            value: new Date()
        });
    });
   
</script>

/////CONTROLLER CODE>>>
 public ActionResult GetByDate(string id)
        {
            DateTime fetchDate = DateTime.Now;
            if (!string.IsNullOrEmpty(id))
            {
                fetchDate = DateTime.Parse(id.Replace("-", "/"));
            }
            //DateTime fetchDate = DateTime.Parse(id);
            return Json(getAvailability(fetchDate), JsonRequestBehavior.AllowGet);
        }
        private IEnumerable<ViewModel.Availability> getAvailability(DateTime date)
        {
            var dc = new baddDBData();
            DateTime startDate = date.Date;
            DateTime endDate = startDate.AddDays(1).AddTicks(-1);
            //var baddDB = from m in dc.Availabilities.Where(m => m.StartDateTime.Equals(date.Date))
            var baddDB = from m in dc.vwAvailableUsers.Where(e => e.StartDateTime >= startDate && e.StartDateTime <= endDate)
                         select new ViewModel.Availability
                         {
                             Id = m.Id,
                             StartDateTime = m.StartDateTime,
                             //StartTime = m.StartDateTime.ToShortTimeString(),
                             EndDateTime = m.EndDateTime,
                             //EndTime = m.EndDateTime.ToShortTimeString(),
                             FirstName = m.FirstName,
                             LastName = m.LastName,
                             Subject = m.Subject
                             //Devotion = m.Devotion,
                             //Subject = "Badd Meeting"

                         };
            return baddDB;
        }



//////MODEL>>>>
class Availability
    {
        public int Id { get; set; }
        public int MemberId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime StartDateTime { get; set; }
        public string StartTime { get; set; }
        public string EndTime { get; set; }
        public DateTime EndDateTime { get; set; }
        public string Subject { get; set; }
    }

Hi,

I'm evaluating kendo ui mobile for our mobile project. I'm impressed with the examples you provided. But i want to see kendo ui in action in a real project.

Could you please help me find few impressive apps build using kendo ui mobile in playstore as well as app store?

Thanks for your help

I have a scheduler where I'd like to display more calendars.
In my situation I have to load the empty scheduler and then populate it dinamically. 

For simulate it, I have two methods in the main function: "scheduler_show" that display the scheduler without data and "schduler_update" that load data on it.

I don't know why, but it loads correctly all the calendars and items, but doesn't show the right colour of the tasks (also if they're associated with the right resource).

Where I'm wrong?

This is the script:

I am trying to find samples on how to do this.  I can bind a kendo grid with JSON and regular MVC, but I am trying to using the CLIENT side controls with Web API.  I'm not sure how to CORRECTLY setup the Web API Method to handle a search string(Put method?) and what to return(Prefer JSON).  Any sample code out there?  Most of the samples I see are not passing parameters to Web API.  If they are, it is for a "Get"(Singular)...I need it for a "Search" method...Send some search text, get back JSON results bound to the Kendo Grid.

Thanks mucho.

Hi, is there a way to position the paging dropdown of (under) grid to be located at the center ?
Unlike the one attached, which is moving just next to navigation page numbers (now it goes extreme left)

Hi,

So we're using a NumericTextBox that is responsible for keeping count of grid elements (it can be higher than the grid count, but not lower).  I've found that when I modify the value of the NumericTextBox from Javascript the value displayed on the page doesn't reflect the addition until mouseover.  Here is the code that increases the value after a new grid row is created, and the value is accurately reflecting the total number of elements, but for some reason only displays the updated value when the user mouses over the NumericTextBox.   Any help would be much appreciated.

function(args){
    var grid = $(args.sender.options.table).parents('.k-grid');
    var count = $('.k-input[name$="Count"]');
    if (count) {
        var modelName = count.attr('name').split('.')[0];
        var crewCount = count.data("kendoNumericTextBox").value();
        var totalCrew = args.sender.data().length;
        if (totalCrew > crewCount) {
            count.data("kendoNumericTextBox").value(totalCrew);
        }
    }
}