You may already know this by now, but the ListView documentation is missing information and the examples show different information and even have unused code.

For paging, this example doesn't use the "pageable" property, yet somehow has paging:
http://demos.kendoui.com/web/listview/index.html

This one calls a pager in the script code, but there isn't a pager element in the HTML:
http://demos.kendoui.com/web/listview/remote-data.html

This article mentions the "pageable" property:
http://docs.kendoui.com/getting-started/web/listview/overview
But, then the API documentation makes no mention of it:
http://docs.kendoui.com/api/web/listview

This article is about the only one that is useful (although, the JSFiddle embeds just spin trying to load and never do), and it took a little searching to find it:
http://docs.kendoui.com/howto/howto-use-the-listview-of-kendo-ui-web

Lastly, looking at ListView is the first time I encountered the "kendoPager" thingy. I call it a thingy because it isn't documented by itself anywhere that I could find, but is just a dis-jointed call available from the framework. Is it just for the ListView? Are there other somewhat undocumented thingies like this in the framework?

Please do a more thorough review of the documentation (in general). KendoUI is large and can take a lot of time away trying to find basic information for widgets and features and figure out how to use them properly.

That said, I love the framework so far, keep up the great work.

How can I change the padding between the Donut chart that is drawn and the border of the generated div it is drawn in?

Am I correct in my understanding that Kendo UI Web does not include a split button control? 

This control is extremely useful in the case where a user will commonly want to perform a default task but occasionally want to perform a variation on that action. It allows single-click functionality for the default case while exposing a menu of related tasks that can be accessed with 2 clicks. 

http://msdn.microsoft.com/en-us/library/windows/desktop/dd940505(v=vs.85).aspx

Most HTML UI frameworks (including ExtJS and YUI) include a control like this. Are there any plans to include one in Kendo UI Web?

I have 2 different charts and I want them to reach the vertical axis values. I want the shorter one to adjust to whatever the taller chart's axis value is.

So if chart 1's tallest bar is $100 and chart 2's is only $50, I want chart 2's axis to rise to $100 as well. Bascially this allows easier comparison between the 2 side by side charts.

How would I set this up? 

I am Using MVC and below are the 2 charts I am using...

chart 2...

<div class="chart-wrapper">
                    @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
        .Name("LabourUtilizationCategory1Chart")
        .Title("Labour Utilization Categories")
        .Legend(legend => legend
            .Visible(false)
        )

    .DataSource(ds => ds.Read(read => read.Action("_GetTop3CatUtilization", "Report")
                                            .Data("function(){return _GetAttr(1);}")))
                                            .AutoBind(false)

        .Series(series =>
        {
            series.Column(model => model.Value)
                .Name("Waste")
                .Color("#FF0000")
                .Overlay(ChartBarSeriesOverlay.None)
                .Labels(labels => labels.Format("{0:N0}%").Visible(false))
                .Gap(.3);
        })

        .CategoryAxis(axis => axis
            .Categories(model => model.Date)
            .Line(line => line.Visible(true))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
            .Labels(labels => labels.Rotation(-45)
                                    .Padding(0, 0, 0, -35)
                                    .Step(2))
        )

        .ValueAxis(axis => axis.Numeric()
            .Title("Efficiency")
            .Labels(labels => labels.Format("{0:N0}%"))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
        )
                .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0:N0}%")
        )
        .ChartArea(chartArea => chartArea.Background("Transparent"))
    )
                </div>

chart2...

                <div class="chart-wrapper">
                    @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
        .Name("LabourUtilizationCategory2Chart")
        .Title("Labour Utilization Categories")
        .Legend(legend => legend
            .Visible(false)
        )

    .DataSource(ds => ds.Read(read => read.Action("_GetTop3CatUtilization", "Report")
                                            .Data("function(){return _GetAttr(2);}")))
                                            .AutoBind(false)

        .Series(series =>
        {
            series.Column(model => model.Value)
                .Name("Waste")
                .Color("#FF0000")
                .Overlay(ChartBarSeriesOverlay.None)
                .Labels(labels => labels.Format("{0:N0}%").Visible(false))
                .Gap(.3);
        })

        .CategoryAxis(axis => axis
            .Categories(model => model.Date)
            .Line(line => line.Visible(true))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
            .Labels(labels => labels.Rotation(-45)
                                    .Padding(0, 0, 0, -35)
            .Step(2))
        )

        .ValueAxis(axis => axis.Numeric()
            .Title("Efficiency")
            .Labels(labels => labels.Format("{0:N0}%"))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
        )
                .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0:N0}%")
        )
        .ChartArea(chartArea => chartArea.Background("Transparent"))
    )
                </div>

Hi,

I am using nHibernate as ORM and showing data to user with Kendo UI. I am retrieing data with nHibernate Query interface and then constructing Kendo UI DataSourceResult.

However I noticed quite strange thing when I observed the SQL queries that Kendo UI + nHibernate combination generates. It seems that for each data fetching two queries are made.

The first query simply queries how many rows the query will return. The second query fetches the actual data, but limits the results with SQL TOP keyword.

My question is that is this intended behavior? Can it be bypassed somehow?

/ IlkkaH

Hi, I'm trying to use the batch CRUD feature. However, it appears to be ignored for reads. I want it to batch up filter() and sort() calls, then execute them with one sync() call. Is this possible?

var dataSource = new kendo.data.DataSource({
batch: true,
        transport: {
            read: {
                url: '/api/v1/items',
                type: 'GET',
                dataType: 'json'
            }
        },
serverPaging: true,
pageSize: 1,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
etc...

Then I'd like to call dataSource.filter(), dataSource.sort(), etc. with a final dataSource.sync() at the end to run the final query. Currently this is not working.

Hi,
I have an issue where with all my kendoUI elements using the default theme (have not checked with other themes) any icons attached to elements are pushed to the top of the parent element.

On the demos the icons float in the center of the parent elements, however I cannot seem to get this effect.

I have attached a zip which contains a one page website with two drop down boxes to illustrate the effect I am experiencing.

If you could advise that would be much appreciated.

Thank you
Martin

I'm not sure about other browsers, but using Chrome on Linux version Version 28.0.1500.71 I see the text of tabs being selected when I click on them (see attached screenshot).

Here's how I have fixed it with CSS:

On IE8 and IE7 Kendo UI Grid validation property is trying to validate even after setting its value to false. (The browsers IE9 / IE 10, Firefox, Chrome work just fine.)

My app is referencing to,
Following is the html and javascript in my app,
Thanks, any help is greatly appreciated!

Hi all,

I am facing an issue while using the endless scrolling on my CSHTML pages.  In file "index.cshtml" , the endless scrolling is working fine, however in another file "Patient.cshtml" with the similar code, the endless scrolling is not working.The name of the function in both pages is viewInit(e). Below is the code for both pages.Please have a look and advice

Index.cshtml (with working endless scrolling)

<div data-role="view" data-layout="default" data-template="messageTemplate" data-status="1"
    data-init="viewInit" data-title="Inbox" id="Inbox">
    <ul id="LoadMoreInbox" class="messageList">
    </ul>
    <ul data-role="actionsheet" id="options" data-open="onOptionsOpening" data-popup='{"direction": "left"}'>
        <li><a data-click="newMessage" id="btnnewMessage" href="javascript:void(0)" data-align="left"
            data-role="button">New Message</a> </li>
        <li><a id="btnAddInr" href="javascript:void(0)" data-action="addInr">Add INR</a></li>
        <li><a id="btnFileComplete" href="javascript:void(0)" data-action="FileComplete">File
            Complete</a></li>
        @*<li><a href="#" data-action="logout">Logout</a></li>*@
    </ul>
</div>
<div data-role="view" id="FiledInbox" data-status="0" data-template="FiledItem" data-title="Filed"
    data-init="viewInit" data-layout="default">
    <ul id="LoadMoreFiled" class="messageList">
    </ul>
</div>
<div data-role="view" id="SentInbox" data-title="Sent" data-status="2" data-layout="default"
    data-init="viewInit">
    <ul id="LoadMoreSent" class="messageList">
    </ul>
</div>
<script id="messageTemplate" type="text/x-kendo-template">
<div>
# if(Status == 0) { #
  <img src='@Url.Content("~/Content/images/archive.png")' class="MessagePhoto"/>
#}#
# if(Status == 2) { #
  <img src='@Url.Content("~/Content/images/Send_32x32.png")' class="MessagePhoto"/>
#}#
# if(Status == 1) { #
  # if(isRead  == 0) { #
    <img src='@Url.Content("~/Content/images/email_32.png")' class="MessagePhoto"/>
  # } else
  {#
    <img src='@Url.Content("~/Content/images/email_open_32.png")' class="MessagePhoto"/>
  #}#
#}#
</div>

#if(statusId==1){#
   <img src='@Url.Content("~/Content/images/accept_32.png")' class="msgcmpltdsts"/>
#}#
<a  class="amsg _message
  # if(urgent_ind == 1){
      #urgent#
  }# " onclick="RedirectToDetail(#:msg_id#)">    
    <h2>#:msg_subject#</h2>
    <h3>#: from_name #</h3>
    # if(order_ind  != 0) { #
      <span class="ordercount">#: order_ind  #</span>
    # } #
    <h3 class="time">#: how_long#</h3><br/>
    <div style="font-size: 1.3em;margin-left: 20px;margin-top: 0.5em;">#: body#</div>
    <div class="clear"></div>
  </a>
 
<div style="float: right; display: none; overflow: visible; width: 130px;" class="DivMessageOptions" data-role="controlgroup">
  <div style="position: absolute; top: 28px; z-index: 2; padding: 0px 10px;">
   <a   msgid='#: msg_id#' class="File filebutton km-button _file" >File</a>
  </div>
  <div class="btnbackground" style="height: 60px; position: absolute; top: 13px; width: 100%; z-index: 1; padding: 0px 10px; border-radius: 10px 10px 10px 10px; background: none repeat scroll 0px 0px rgb(182, 182, 195); opacity: 0.8;">
  </div>
</div>
</script>
<script>
  
    function touchstart(e) {
     
        var parent = $(e.touch.target).parent();
        var target = $(e.touch.initialTouch),
            listview = $(parent).data("kendoMobileListView"),
            model,
            button = $(e.touch.target).find("[data-role=controlgroup]:visible");
        if (target.closest("[data-role=controlgroup]")[0]) {
            //prevent `swipe`
            this.events.cancel();
            e.event.stopPropagation();
        } else if (button[0]) {
            button.hide();
            //prevent `swipe`
            this.events.cancel();
        } else {
            listview.items().find("[data-role=controlgroup]:visible").hide();
        }
    }


    function swipe(e) {
        var button = kendo.fx($(e.touch.currentTarget).find("[data-role=controlgroup]"));
        button.expand().duration(200).play();
        var element = $(e.sender.element).attr("id");
        if (element == "LoadMoreFiled") {
            $(e.touch.target).find("._file").css('display', 'none');
            $(e.touch.target).find(".DivMessageOptions").width($(e.touch.target).find("._reply:first").width() + $(e.touch.target).find("._forward:first").width() + $(e.touch.target).find("._replyall:first").width() + 75);
            $(e.touch.target).find(".btnbackground").css('display', 'none');
        }
        else if (element == "LoadMoreSent") {
            $(e.touch.target).find("._reply").css('display', 'none');
            $(e.touch.target).find("._replyall").css('display', 'none');
            $(e.touch.target).find("._file").css('display', 'none');
            $(e.touch.target).find(".DivMessageOptions").width($(e.touch.target).find("._forward:first").width() + 30);
            (e.touch.target).find(".btnbackground").css('display', 'none');
        }
       
    }

    var scrollStatus = false;
    function viewInit(e) {
        debugger;
        var status = $(e.sender.id).data("status");
        var boxId = "", templateId = "#messageTemplate";
        var sent = false;
        var flag = "" + status + "";
        switch (parseInt(status)) {
            case 1:
                boxId = "#LoadMoreInbox";
                scrollStatus = false;
                break;
            case 0:
                boxId = "#LoadMoreFiled";
                scrollStatus = true;
                break;
            case 2:
                boxId = "#LoadMoreSent";
                scrollStatus = true;
                sent = true;
                break;
        }

        var datasource = new kendo.data.DataSource({
            pageSize: 10,
            serverPaging: true,

            transport: {
                read: {
                    url: '@Url.Content("~/Message/GetUserMessages")?random=' + Math.random() * 1000,
                    type: "post",
                    dataType: "json"
                },
                parameterMap: function (options) {
                    var parameters = {
                        count: options.pageSize,
                        page: options.page,
                        status: status
                    }
                    return parameters;
                }
            },
            group: { field: 'MessageGroup', dir: 'desc' },

            schema: {

                total: function () { return 0; }
            }
        });


        var scrollCounter = 0;
        $(boxId).kendoMobileListView({
            dataSource: datasource,
            template: $(templateId).html(),
            endlessScroll: scrollStatus,
            scrollTreshold: 30,
            fixedHeaders: true,
            dataBound: function (e) {

                if (status == 0 || status == 2) {
                    $(".km-group-title").css('display', 'none');
                }

                if (e.sender.dataSource._data.length == 0) {
                    scrollStatus = false;
                    if (scrollCounter == 0) {
                        $(boxId).html("<li class='emptytmpl'>No New Message</li>");
                    }
                }
                else { scrollStatus = true; scrollCounter = 1; }
            }
        }).kendoTouch({
            filter: ">li",
            enableSwipe: true,
            touchstart: touchstart,
            swipe: swipe
        });
    }

</script>

Patient.cshtml(Endless scrolling not working)

<div data-role="view" data-init="viewInit" data-layout="default" data-title="Patient List"
    id="actionsheet-view">
    <ul id="patient_List" data-role="listview" data-template="Patient_Template" class="messageList">
    </ul>
    <ul data-role="actionsheet" id="options" data-popup='{"direction": "left"}'>
         </ul>
    <input type="hidden" id="hdnpatientid" />
</div>
<script id="autotemplate" type="text/x-kendo-tmpl">    
          <h3>${ data.LocationName }</h3>
</script>
<script id="Patient_Template" type="text/x-kendo-template">
  <h2 class="Name">#: patientname#</h2>     
    <h3>Date Of Birth: #: DOB#</h3>
  <span id="patientid" style="display:none">#: patientid#</span>
</script>
<script>
    var scrollStatus = false;
    function viewInit(e) {
        templateId = "#Patient_Template";
        var datasource = new kendo.data.DataSource({
            pageSize: 20,
            serverPaging: true,
            transport: {
                read: {
                    url: '@Url.Content("~/Patient/GetPatientsByFacility/")?random=' + Math.random() * 1000,
                    type: "post",
                    dataType: "json"
                },
                parameterMap: function (options) {
                    var parameters = {
                        count: options.pageSize,
                        page: options.page,
                        facilityName: $.trim($("#txtFacility").val()),
                        userId: $("#AllowAllPatientView").val() == "True" ? 0 : MasterVariables.UserId
                    }
                    return parameters;
                },
                schema: {

                    total: function () { return 0; }
                }
            }

        });

        var scrollCounter = 0;
        $("#patient_List").kendoMobileListView({
            dataSource: datasource,
            template: $(templateId).text(),
            endlessScroll: scrollStatus,
            scrollTreshold: 30,
            fixedHeaders: true,
            dataBound: function (e) {
                if (e.sender.dataSource._data.length == 0) {
                    scrollStatus = false;
                    if (scrollCounter == 0) {
                        $(boxId).html("<li class='emptytmpl'>No New Message</li>");
                    }
                }
                else { scrollStatus = true; scrollCounter = 1; }
            }
        }).kendoTouch({
            filter: ">li",
            enableSwipe: true
        });
    }
    var MessageVariable = {
        MessageId: 0,
        PatientId: 0,
        PatientName: '',
        Subject: '',
        SentFromId: 0,
        LocationId: 0,
        LocationName: '',
        CheckAutocomplete: 0 // 0 for unselect and 1 for select
    };

    $(document).ready(function () {
        $("a[data-rel=BackFromRequestPatient]").hide();
        var pdata = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Content("~/Message/GetFacilityList")' + "?" + Math.random() * 1000,
                    type: "get",
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8'
                }
            }
        });

        $("#txtFacility").kendoAutoComplete({
            minLength: 3,
            highlightFirst: true,
            filter: 'contains',
            ignoreCase: true,
            dataValueField: "LocationId",
            dataTextField: "LocationName",
            template: kendo.template($("#autotemplate").html()),
            dataSource: pdata,
            select: onSelect,
            close: onClose,
            open: onOpen
        });
    });

    function onOpen(e) {
        MessageVariable.CheckAutocomplete = 0;
    }
    function onClose(e) {
        if (MessageVariable.CheckAutocomplete == 0) {
            viewInit(e);
            loaderElement = kendoMobileApplication.pane.loader.element.find("h1");
        }
    }

    function onSelect(e) {
    }

    function onChange(e) {
    }
    $("#patient_List li").live("click", function () {
        location.href = '@Url.Content("~/Patient/PatientDetail/")' + $(this).find("#patientid").text();
    });

             
</script>



We are using all required references  on both files. Please have a look and give your kind suggestions on this issue.
Please let me know if you have any questions on this.

Thanks,