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,

Hi,

How do I localize a CurrencyTextBox in razor ? The code
always gives me a "$" instead of a "€"

Thanks

Achilles

Hi All,
I am using Kendo UI ColorPicker...In the samples provided, I am using Keyboard support HSV Picker.
How to get the selected color value ???
Like I need to assign the selected color as a background color to a div...
How to achieve this???

Hello,

I need to sort the groups of a grid (and not the rows in the groups) programmatically.
I've seen that there's this functionality by clicking (after a grouping action) on the groupIndicator in the groupBar.

There's some function that i can call to use that functionality? Or some workaround?

Thanks

Fabio

Hello,

I have a mobile application with login functionality (a login view, in addition to other views that should only be visible to logged in users).

After a user logs in, they are taken to another view, let's call it the main view. Now, at least on android, if I tap the system's back button (the first one on the left here) then I am returned to the login view!

How can I prevent this from happening? Instead I want the app to be minimized if that button is tapped from the main view. Is this something that is outside the scope of kendo? Perhaps to be handled by phonegap?

Thanks

I am currently programing a blog reader application using HTML5 KendoUI Mobile & JavaScript currently i am able to use Json to list all my post in a list view and currently once an item is clicked on it takes me to the actual url of the post within the application. What i want to be able to do is once an item is clicked on display post content in a different view. Please help me!!!

Hello,

For some reason, I can't find a way to apply the min-height style to a grid row.

I tried several way without success but here's one of the best example I can provide:


I thought that would be an easy thing to do so I must be missing something obvious here...