Hi,

I'm using a multi select within a Kendo window.  The Kendo window is configured in iFrame mode.  In IE10 (only IE10) the multi select renders outside of the window.  Other browsers don't seem to have this problem.

Here is a screen clip of the issue:
http://gregferguson.net/images/filezilla-ie10.PNG

Here is a JS Fiddle:
http://jsfiddle.net/u97tP/2/

Thanks,
Greg

I'm trying to create (in a navbar) a drop-down menu using a mobile button and popover.  The button-styling works fine, but I cannot seem to add the image inside the button; the best I have gotten is to leave it to the right (and out outside) of the button.

Here is a jsfiddle
http://jsfiddle.net/raltman/LCh3E/1/

What is the best approach for making this work correctly?

I have a page where I set the value of the numerictextbox = '' (i.e. it is empty).

In Internet Explore, when someone clicks on the textbox, the cursor doesn't appear in it.  The user can still enter numbers into the textbox.  Once numbers are in the textbox it works fine.

The numerictextbox works just fine in Chrome and Firefox.

Does anyone have a suggestion on the cause of this issue or a fix.  Thanks.

Charlie

Hello,

Is there anyway to have the tooltip for the chart visible on load.

For example, if you look at the Kendo UI demos you will see an example of a pie chart with an exploded slice:
http://demos.kendoui.com/dataviz/pie-charts/local-data.html

If you hover over that slice, you get the tooltip hydro 22%. Is there anyway to make the tooltip for the exploded slice visible when the graph is initialized, or some way of permanently faking the mouseover on the slice.

Any ideas? Thanks in advance!

Hi,

I'm using the upload control where the user is allowed to upload multiple files at the same time in async mode. 

On the select event I check if the files are of the correct filetype, if any file is of the wrong type I stop the upload with e.preventDefault().

However I would like to just remove the file that isn't allowed and continue to upload the rest of the files. Is it possible to remove files from e.files in the select event?

Hi there,

We use the Kendo Upload  to allow customers to upload large number of files for processing. Some of our customers in countries with poorer internet have run into bandwidth restrictions when trying to upload a large number of files (i.e a 100 files) simultaneously.

To get around this, is it possible to set a upper limit on the number of async uploads that may be in progress at any given time? 

Thanks in advance

Roberto Bonni

Hi,

I'm using a grid with a custom popup template. I want to add a button to this template.  I then want to react to the click event of this button.

My template is:
<script id="popup_editor" type="text/x-kendo-template">        
        <div class="k-edit-label">
            <label for="SYSTEM_NAME">Name</label>
        </div>    
        <div data-container-for="SYSTEM_NAME" class="k-edit-field">
            <input type="text" class="k-input k-textbox" name="SYSTEM_NAME" required="required" data-bind="value: SYSTEM_NAME">
        </div> 
        <div>
            <button type="button" id="Test" class="k-button" onclick="test_fn()">Test</button>
        </div>
</script>    

And my JS
 $("#Test").click(function (e) {
        alert("clicked");
    });

The problem is that the Click event of the button is never received. If I move the button from the template and directly onto a page it works fine.  Am I missing something?

Hi.

I use two-level hierarchical grid with asp.net helpers (server binding) and everything goes right, except one small issue. Changing the page of the detail grid causes its parent row to collapse once the data is reloaded. Same goes for sorting rows of the detail grid.

Grid code: http://pastebin.com/Wyrgf1yb

Is that a limitation of server binding? Or I'm using the grid helper wrong?

Thanks.

I am making a C# Razor MVC web app that is geared for Ipad. I am using JQuery mobile and Kendo UI. Kendo has presented me with some tough bugs that I cannot seem to fix.

My Kendo grid is double firing in Ipad (Safari). This is unnoticeable in desktop apps such as Google Chrome or Firefox but in Safari it is showing up. Is this a known issue or is my code wrong? I have 2 input forms that use Kendo grid that sit in a JQuery popup window.

Are there any known issues running JQuery Mobile and Kendo UI. The reason I ask is that I have have to comment out either the JQuery scripts that comes with Kendo or Vice versa to make everything play nice. This has come at a cost where JQuery pluggins such as Fittext which needs JQuery to run does not work.

attached are 2 pics of the problem forms (waste and downtime) and below is my _Layout.cshtml and Ham.cshtml (which is my view) code. Any help is greatly appreciated!

_Layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    @{

        if (Session["currentDate"] == null)
        {
            HttpContext.Current.Session["currentDate"] = DateTime.Today.ToString("yyyy-MM-dd");
        }

        if (Session["currentShift"] == null)
        {
            HttpContext.Current.Session["currentShift"] = 1;
        }

        if (Session["ReportType"] == null)
        {
            HttpContext.Current.Session["ReportType"] = "Daily";
        }
            
    }

    <title>@ViewBag.Title</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link href="~/Resources/Triangle.ico" rel="shortcut icon" type="image/x-icon" />

    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")

    <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.silver.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.dataviz.silver.min.css")" rel="stylesheet" type="text/css" />

    @*<script src="@Url.Content("~/Scripts/kendo/2013.1.319/jquery.min.js")"></script>*@
    <script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.aspnetmvc.min.js")"></script>
    @*<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>*@
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

    <script type="text/javascript">


        //prevents ipad vertical bounce scrolling
        document.ontouchmove = function (event) {
            event.preventDefault();
        }

        function UpdateDate() {
            UpdateSessionDate();
            UpdateSessionShift();
            UpdateSessionReportType();

            //$('#datepick').val('AT(Session["currentDate"])');

            var DatePageType = '@(ViewBag.DatePageType)';

                if (DatePageType == "Reporting") {

                    UpdateCharts();
                }
                if (DatePageType == "LiveView") {
                    UpdateViews($('#hoursaver').val());
                    UpdateLineViews($('#hoursaver').val());
                    UpdateOverallInfoBox($('#linesaver').val());
                    UpdateOverviewOfLabourChart()
                }
                if (DatePageType == "LabourEntry") {
                    // UpdateViews($('#hoursaver').val());
                    refreshLabourEntry();
                }

            }

            function UpdateShift() {
                UpdateSessionDate();
                UpdateSessionShift();

                //$('#datepick').val('AT(Session["currentDate"])');

                var DatePageType = '@(ViewBag.DatePageType)';

                if (DatePageType == "Reporting") {
                    UpdateCharts();
                }
                if (DatePageType == "LiveView") {
                    UpdateViews($('#hoursaver').val());
                    UpdateLineViews($('#hoursaver').val());
                    UpdateOverallInfoBox($('#linesaver').val());
                }
                if (DatePageType == "LabourEntry") {
                    refreshLabourEntry();

                }
            }

            function pullfrompeviousLoad(objThis) {
                var url = $(objThis).data('url') + '?hour=' + $(objThis).data('hour') + '&Shift=' + $(objThis).data('shift') + '&LineName=' + $(objThis).data('line');
                window.location.href = url;
            }

            function menuLoad(objThis) {
                var url = $(objThis).data('url');
                window.location.href = url;
            }

            function buttonLoad(objThis) {
                var url = $(objThis).data('url') + '?hour=' + $(objThis).data('time');
                window.location.href = url;
            }

            function saveLoad(objThis) {

                $('#labourform').submit();
                var url = $(objThis).data('url') + '?hour=' + $(objThis).data('time');
                window.location.href = url;
                return false;
            }

            // update date session data
            function UpdateSessionDate() {

                $.post('/SetSession/SetVariable',
                       {
                           key: "currentDate",
                           value: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd")
                       });

            };

            // update shift session data
            function UpdateSessionShift() {

                $.post('/SetSession/SetVariable',
                       {
                           key: "currentShift",
                           value: $('#shift').val()
                       });

            };


            // update report type session data
            function UpdateSessionReportType() {

                $.post('/SetSession/SetVariable',
                       {
                           key: "ReportType",
                           value: $('#ReportType').val()
                       });

            };

            function UpdateButtons(h) {
                var arrayToModify = [];
                var i = 0, j, k, buttonsToCreate, buttonContainer, newButton;
                var buttonsToCreate = [];
                var now = parseInt(h);

                for (var j = (now - 7) ; j <= (now + 7) ; j++) {

                    if (j >= 0 && j <= 23) {
                        buttonsToCreate[i] = j;
                        i++;
                    }
                }

                buttonContainer = document.getElementById('ddShift');

                for (k = 0; k < buttonsToCreate.length; k++) {

                    if (buttonsToCreate[k] == parseInt(h) + 1) {
                        newButton.style.cssText = 'background-color: red;';
                    }

                    newButton = document.createElement('input');
                    newButton.type = 'button';
                    newButton.value = buttonsToCreate[k];
                    newButton.id = buttonsToCreate[k];
                    newButton.onclick = function () {
                        arrayToModify[arrayToModify.length] = this.id;
                        $('#hoursaver').val(this.id);
                        UpdateViews(this.id);
                        UpdateLineViews(this.id);
                    };

                    buttonContainer.appendChild(newButton);
                }
            };

            kendo.culture("en-US");

    </script>

</head>

<body>

    <div data-role="page" data-theme="b" id="index">

        <div data-role="header" data-position="fixed">
            <h1>@ViewBag.Title</h1>
            <a href="#nav-panel" data-icon="bars" data-iconpos="notext" class="ui-btn-left">Menu</a>

            @if (Request.IsAuthenticated)
            {
                @Html.ActionLink("My Account", "Index", "Account", routeValues: null, htmlAttributes: new { data_icon = "gear" })
            }
            else
            {
                @Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { data_icon = "gear" })
            }


            <div class="datepickerbtn" style="width: 212.5px;">

                @(Html.Kendo().DatePicker()
                      .Name("datepicker")
                      .Events(e =>
                          {
                              e.Change("UpdateDate");
                          })
                  .Format("yyyy-MM-dd")
                  .Value((String)Session["currentDate"])
                )
            </div>

            <div class="shiftpickerbtn" id="btnshift">
                <select id="shift" name="shift" onchange="UpdateShift()">
                    <option value="1">Shift 1</option>
                    <option value="2">Shift 2</option>
                </select>
            </div>


        </div>
        <div data-role="content">

            @RenderBody()
        </div>
        <div data-role="footer" style="text-align: center" data-position="fixed">
            @RenderSection("footer", false)
        </div>
        <div data-role="panel" data-position-fixed="true" data-theme="b" data-content-theme="d" id="nav-panel">
            <ul data-role="listview" data-theme="a" class="nav-search">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                <li><a data-url="@Url.Action("Index", "Home")" onclick="menuLoad(this)">Home</a></li>
                <li><a data-url="@Url.Action("Index", "LabourEntry")" onclick="menuLoad(this)">Labour Entry</a></li>
                <li><a data-url="@Url.Action("Index", "LiveView")" onclick="menuLoad(this)">Live View</a></li>
                <li><a data-url="@Url.Action("Index", "Report")" onclick="menuLoad(this)">Reporting</a></li>
                <li><a data-url="@Url.Action("Loin", "ScheduleBuilder")" onclick="menuLoad(this)">Schedule Builder</a></li>
                <li><a data-url="@Url.Action("About", "Home")" onclick="menuLoad(this)">About</a></li>
                <li><a data-url="@Url.Action("Contact", "Home")" onclick="menuLoad(this)">Contact</a></li>
            </ul>

        </div>

    </div>

    @RenderSection("scripts", required: false)
</body>
</html>


Ham.cshtml (my view)

@model IEnumerable<OPS.Models.LabourSchedule>

@{
    ViewBag.Title = "Ham";
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.DatePageType = "LabourEntry";
}

<script>

    $(document).ready(function () {

        //set the value of the datepicker and Shift via session variables
        $('#datepicker').val('@(Session["currentDate"])');
        $('#shift').val('@(Session["currentShift"])');
        $('#shift').selectmenu('refresh');

        $('#lblWasteFormDate').html('@(Session["currentDate"])');

    });

        function Update_Data() {
            return {
                CurDate: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd")
            };
        }

        function Read_Data() {
            return {
                LineName: "Ham",
                CurDate: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd"),
                ShiftName: @(Session["currentShift"]) + ""
            };
        }

        function Read_DT_Data() {
            return {
                LineName: "Ham",
                CurDate: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd"),
                ShiftName: $("#shift").val() + ""
            };
        }

</script>


@section footer
            {
    <div data-inline="true">

        <div data-inline="true">
            @if (ViewBag.curHour > 0)
            {                                    
                <a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)"  data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true" data-time="@ViewBag.prevHour"></a>                  
            }
            @for (var i = ViewBag.curHour - 7; i <= ViewBag.curHour + 7; i++)
            {

                if (ViewBag.curHour == i)
                {                            
                <a data-role="button" href="#" data-theme="b" data-inline="true">@i</a>                                
                }
                else if (@i >= 0 && @i <= 23)
                {                             
                <a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)" data-theme="c" data-inline="true" data-time="@i">@i</a>                                          
                            
                }

            }
            @if (ViewBag.curHour < 23)
            {                                                          
                <a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)"  data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true" data-time="@ViewBag.nextHour">Arrow right</a>                    
            }
            <a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="grid" data-iconpos="notext" data-theme="b">Options</a>
        </div>

    </div>
    <div data-role="popup" id="popupDownTime" class="ui-content" data-theme="d" data-overlay-theme="a" data-dismissible="false" style="width: 80%; position: relative; margin: 20px auto;">
        <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

        <div id="update-message"></div>
        @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "DTForm" }))
        {
                
            <input type="hidden" name="LineName" value="Ham" />
            <table>
                <tr>
                    <td colspan="3">
                        <label for="categories">Downtime Reason:</label>
                        @(Html.Kendo().DropDownList()
                                    .Name("DTCatId")
                                    .OptionLabel("Select downtime...")
                                    .HtmlAttributes(new { style = "width:90%;" })
                                    .DataTextField("Name")
                                    .DataValueField("ID")
                                    .DataSource(source =>
                                    {
                                        source.Read(read =>
                                        {
                                            read.Action("GetDowntimeCategories", "LabourEntry");
                                        });
                                    })
                            )
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="txt_DT_Duration">Duration (minutes):</label>
                        <input type="number" name="DT_Duration" pattern="[0-9]*" id="txt_DT_Duration" value="" />
                    </td>
                    <td>
                        <label for="txt_DT_People"># of People:</label>
                        <input type="number" name="DT_People" pattern="[0-9]*" id="txt_DT_People" value="" />
                    </td>
                    <td>
                        <label for="sl_Hrs_Type">Hours Type:</label>
                        <select name="Hrs_Type" id="sl_Hrs_Type" data-role="slider">
                            <option value="OT">OT</option>
                            <option value="REG" selected="selected">Reg</option>
                        </select>
                    </td>

                </tr>
                <tr>
                    <td colspan="3">
                        <label for="txt_DT_Desc">Description Detail:</label>
                        <textarea rows="12" name="DT_Desc" id="txt_DT_Desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <input type="submit" name="submit" value="Add Downtime" />
                    </td>

                </tr>
                <tr>
                    <td colspan="3">
                        @(Html.Kendo().Grid<OPS.Models.DownTime>()
                                .Name("DTGrid")
                                .Columns(columns =>
                                {
                                    columns.Bound(p => p.ID).Hidden(true);
                                    columns.Bound(p => p.DT_ID).Hidden(true);
                                    columns.Bound(p => p.HR_TYPE).Hidden(true);
                                    columns.Bound(p => p.LINE_ID).Hidden(true);
                                    columns.Bound(p => p.SHIFT).Hidden(true);
                                    columns.Bound(p => p.USER_ID).Hidden(true);
                                    columns.Bound(p => p.DT_REASON).Title("Reason");
                                    columns.Bound(p => p.DT_DETAIL).Title("Details");
                                    columns.Bound(p => p.DURATION).Title("Duration (mins)");
                                    columns.Bound(p => p.NUM_EFFECTED).Title("# of People");
                                })
                                 .ToolBar(toolbar =>
                                    {
                                        toolbar.Save();
                                    })
                                .Editable(editable => editable.Mode(GridEditMode.InCell))
                                .Sortable()
                                .Scrollable()
                                .Resizable(resize => resize.Columns(true))
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Model(model =>
                                    {
                                        model.Id(p => p.ID);
                                    })
                                    .Batch(true)
                                    .ServerOperation(false)
                                    .Events(events => events.Error("error"))              
                                    .Read(read => read.Action("DT_Read", "LabourEntry")
                                                        .Data("Read_DT_Data"))
                                    .Update(update => update.Action("DT_Update", "LabourEntry"))
                                )
                            )
                    </td>
                </tr>
            </table>
            
        }
    </div>

    <div data-role="popup" id="popupWaste" class="ui-content" data-theme="d" data-overlay-theme="a" data-dismissible="false" style="width: 90%; position: relative; margin: 20px auto;">
        <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

        <div style="width: 100%;">

                <h3>Date: <label id="lblWasteFormDate"></label>
                    </h3>


            @(Html.Kendo().Grid<OPS.Models.LineProductWasteEntry>()
            .Name("WasteGrid")
            .Columns(columns =>
            {

                columns.Bound(p => p.Id).Hidden(true);
                columns.Bound(p => p.BucketWeight).Hidden(true);
                columns.Bound(p => p.LineCategoryId).Hidden(true);
                columns.Bound(p => p.LineCategoryProduct).Hidden(true);
                columns.Bound(p => p.LineProductId).Hidden(true);
                columns.Bound(p => p.ShiftId).Hidden(true);
                columns.Bound(p => p.SourceId).Hidden(true);
                columns.Bound(p => p.UserId).Hidden(true);
                columns.Bound(p => p.CategoryName);
                columns.Bound(p => p.ProductName);
                columns.Bound(p => p.Value);
                columns.Bound(p => p.SourceName);
                columns.Bound(p => p.Source);
                columns.Bound(p => p.Weight);
                columns.Bound(p => p.Weight2);
                columns.Bound(p => p.Weight3);
            })
            .ToolBar(toolbar =>
            {
                toolbar.Save();
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Sortable()
            .Scrollable()
            .Resizable(resize => resize.Columns(true))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Id(p => p.Id);
                    model.Field(p => p.SourceName).Editable(false);
                    model.Field(p => p.CategoryName).Editable(false);
                    model.Field(p => p.ProductName).Editable(false);
                    model.Field(p => p.Value).Editable(false);
                })
                .Batch(true)
                .ServerOperation(false)
                .Events(events => events.Error("error"))        
                .Read(read => read.Action("Waste_Read", "LabourEntry")
                                    .Data("Read_Data"))
                .Update(update => update.Action("Waste_Update", "LabourEntry")
                                    .Data("Update_Data"))

            )

        )

        </div>
    </div>
    <div data-role="popup" id="popupMenu" data-theme="a">
        <ul data-role="listview" data-inset="true" style="min-width: 270px;" data-theme="a" class="nav-search">
            <li><a href="#popupWaste" data-rel="popup" data-position-to="window" data-transition="pop">Add Waste</a></li>
            <li><a href="#popupDownTime" data-rel="popup" data-position-to="window" data-transition="pop">Add Downtime</a></li>

        </ul>
    </div>

}

I want to add multiple command buttons (let's say, for View, Edit and Print) in a single grid column so that I see them for each row.
I was also able to add icon to custom command and I was able to easily add one command button in one column as explained in the custom command demo but I really want all three "buttons/icons" in the same column.

Any suggestions?