Kendo UI doesn't work well in Firefox 28.0

3 posts, 0 answers
  1. Misahael
    Misahael avatar
    25 posts
    Member since:
    Oct 2013

    Posted 08 Apr 2014 Link to this post

    Hi,

    I tested a web application with kendo (the last version 2014.1.318), this app works fine in Chrome but in Firefox the behaviour is strange, for example the dropdownlist works fine until I search and the data shown in the kendo grid, after the search the dropdownlist doesn't show the items or show and hide they very fast.

    I put an example of how scripts I import and how I used them.

    <link rel="stylesheet" href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")"type="text/css" />
        <link rel="stylesheet" href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")"type="text/css" />
        <script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")"type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.all.min.js")"type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.aspnetmvc.min.js")"type="text/javascript"></script>
     
    @{
        ViewBag.Title = "Control Interno";
        Layout = "~/Views/Home/PaginaInicio.cshtml";
    }
     
    <h2 class="Cabecera">Control interno</h2>
     
    <div>
       <table style="font-size: x-small" align="center">
                <tr>
                    <td>
                        <label for="start">Desde: </label><label class="obligatorio">*</label>
                        @(Html.Kendo().DatePicker().Name("txtFechaInicio").Events(e => e.Change("startChange")).Value(ViewBag.Fecha))
                    </td>
                    <td>
                        <label for="end" style="margin-left:3em">Hasta: </label><label class="obligatorio">*</label>
                        @(Html.Kendo().DatePicker().Name("txtFechaFin").Events(e => e.Change("endChange")).Value(ViewBag.Fecha))
                    </td>
                </tr>
        </table>
        
        <br />
     
        <table style="font-size: x-small" align="center">
                <tr>
                    <td>
                       <label>Tipo de control</label>
                        @(Html.Kendo().DropDownList()
                          .Name("tipocontrol")
                          .OptionLabel("Todos")
                          .DataTextField("NOMBRE_TIPOCONTROL")
                          .DataValueField("ID")
                          .AutoBind(false)
                          .DataSource(source =>
                          {
                              source.Read(read =>
                              {
                                  read.Action("ToolbarTemplate_TipoControl", "Consultas");
                              });
                          })
                        )
                    </td>
     
                    <td>
                       <label> Mostrar registros: </label>
                       @(Html.Kendo().DropDownList()
                          .Name("tipocaso")
                          .OptionLabel("Todos")
                          .DataTextField("NOMBRE_TIPOCASO")
                          .DataValueField("ID")
                          .AutoBind(false)
                          .DataSource(source =>
                          {
                              source.Read(read =>
                              {
                                  read.Action("ToolbarTemplate_TipoCaso", "Consultas");
                              });
                          })
                        )
                    </td>
                </tr>
                
        </table>
     
        <br />
        <p>
            <label class="obligatorio">(*) Campo obligatorio</label>
        </p>
     
        <br />
     
        <table style="font-size: x-small" align="center">
            <tr>
                <td>
                    @*<input type="Button" value="Buscar" onclick="BindGrid();" class="BotonBuscar" />*@
                    <button type="button" id="btnSearch" onclick="BindGrid();" value="Buscar" class="k-button" >
                    <img src="../../Images/Buscarboton.png" />
                    </button>
                </td>
            </tr>
        </table>
         
    </div>
    <br />
      
    <div>
        <table style="font-size: x-small" align="center" id="tabDato">
            <tr>
                <td class="etiquetas1" align="right">
                    <label><strong>Desde: </strong></label>
                </td>
                <td class="etiquetas2">
                    <label id="lblDesde"></label>
                </td>
                <td class="etiquetas1" align="right">
                    <label><strong>Hasta: </strong></label>
                </td>
                <td class="etiquetas2">
                    <label id="lblHasta"></label>
                </td>
            </tr>
            <tr>
                <td class="etiquetas1" align="right">
                    <label><strong>Tipo de control: </strong></label>
                </td>
                <td class="etiquetas2">
                    <label id="lblControl"></label>
                </td>
                <td class="etiquetas1" align="right">
                    <label><strong>Mostrar registros: </strong></label>
                </td>
                <td class="etiquetas2">
                    <label id="lblCaso"></label>
                </td>
            </tr>
        </table>
    </div>
     
    <br />
     @model IEnumerable< SIS_CSC.ViewMoldels.ControlInternoViewData>
    <div style="font-size:xx-small">
        @(Html.Kendo().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
                    {
                        columns.Template(t => { }).Title("N°").ClientTemplate("#= renderRecordNumber(data) #").Width(40);
                        columns.Bound(p => p.ID_SOLICITUDSERVICIO).Visible(false);
                        columns.Bound(p => p.NOMBRE_CLIENTE).Title("Cliente");
                        columns.Bound(p => p.SFECHA_SOLICITOSERVICIO).Title("Fecha");
                        columns.Command(command => command.Custom("custom").Text("").Click("MostrarSolicitud")).Title("N° de solicitud").Width(75);
                        columns.Bound(p => p.SERIE_EQUIPO).Title("N° de serie");
                        columns.Bound(p => p.NOMBRE_TECNICO).Title("Técnico");
                        columns.Bound(p => p.NOMBRE_UNIDADNEGOCIO).Title("Siglas");
                        columns.Bound(p => p.SUGERENCIA_TECNICO).Title("Sugerencia del técnico");
                        columns.Bound(p => p.OBSERVACION_CLIENTE).Title("Observación del cliente");
                        columns.Bound(p => p.SUGERENCIA_INTERNA).Title("Sugerencia interna");
                        columns.Bound(p => p.CASO_CERRADO).Visible(false);
                        columns.Command(command => command.Custom("Gestionar").Text("").Click("GestionarCI")).Title("Gestionar").Width(75);
                    })
                           .Filterable()
                           .Sortable()
                           .Pageable(m => m.PageSizes(new int[] { 10, 20, 50, 100 }))
                           .Groupable()
                           .Events(e => e.DataBound("dataBound"))
                           .Scrollable(s => s.Height("auto"))
                           .TableHtmlAttributes(new { style = "table-layout: fixed;" })
                           .Resizable(r => r.Columns(true))
                   .DataSource(dataSource => dataSource
                       .Ajax()
                       .Events(ev =>
                        {
                            ev.RequestStart("Load");
                            ev.RequestEnd("Ready");
                        })
                       .Read(read => read.Action("LeerExt_ControlInterno", "Consultas").Data("getParameter"))
                       .Model(model => { model.Id(p => p.ID_SOLICITUDSERVICIO); })
                   )
                   .ToolBar(toolBar =>
                        toolBar.Custom()
                            .Text("Exportar a PDF")
                            .HtmlAttributes(new { id = "export" })
                            .Url(Url.Action("ExportarPDFControlInterno", "Consultas",
                            new
                            {
                                page = 1,
                                pageSize = "~",
                                filter = "~",
                                sort = "~",
                                txtFechaInicio = "~",
                                txtFechaFin = "~",
                                tipocontrol = "0",
                                tipocaso = "0",
                                nombre_control = "Todos",
                                nombre_caso = "Todos"
                            }))
                    )
                    .ToolBar(toolBar =>
                        toolBar.Custom()
                            .Text("Exportar a Excel")
                            .HtmlAttributes(new { id = "exportex" })
                            .Url(Url.Action("ExportarExcelControlInterno", "Consultas",
                            new
                            {
                                page = 1,
                                pageSize = "~",
                                filter = "~",
                                sort = "~",
                                txtFechaInicio = "~",
                                txtFechaFin = "~",
                                tipocontrol = "0",
                                tipocaso = "0",
                                nombre_control = "Todos",
                                nombre_caso = "Todos"
                            }))
     
                    )
               )
    </div>
     
    <div>
        @(Html.Kendo().Window()
        .Name("Rates")
        .Title("Solicitud de servicio")
        .Visible(false)
        .Modal(true)
        .Draggable(true)
        .Width(800)
        .Height(600)
        .Events(e =>
        {
            e.Open("onOpen");
            e.Refresh("onRefresh");
        })
    )
    </div>
     
    <div>
        @(Html.Kendo().Window()
        .Name("GCI")
        .Title("Gestionar control interno")
        .Visible(false)
        .Modal(true)
        .Draggable(true)
        .Width(600)
        .Height(400)
        .Events(e =>
        {
            e.Open("onOpen");
            e.Refresh("onRefresh");
        })
    )
    </div>
     
    <div>
        @(Html.Kendo().Window()
        .Name("CCI")
        .Title("Control interno")
        .Visible(false)
        .Modal(true)
        .Draggable(true)
        .Width(600)
        .Height(400)
        .Events(e =>
        {
            e.Open("onOpen");
            e.Refresh("onRefresh");
        })
    )
    </div>
     
    <script type="text/javascript">
        function Load(e) {
            kendo.ui.progress($("#Grid"), true);
        }
     
        function Ready(e) {
            kendo.ui.progress($("#Grid"), false);
        }
     
        function onOpen(e) {
            kendo.ui.progress(e.sender.element, true);
        }
     
        function onRefresh(e) {
            kendo.ui.progress(e.sender.element, false);
        }
    </script>
     
    <script type="text/javascript">
        var rowNumber = 1;
        var flag = false;
     
        function resetRowNumber(e) {
            rowNumber = 1;
        }
     
        function renderRecordNumber(data) {
            var page = parseInt($("#Grid").data("kendoGrid").dataSource.page()) - 1;
            var pagesize = $("#Grid").data("kendoGrid").dataSource.pageSize();
            return parseInt(rowNumber++ + (parseInt(page) * parseInt(pagesize)));
        }
     
    </script>
     
    <script type="text/javascript">
     
        $(document).ready(function () {
            OcultarControl("tabDato", true);
        });
     
        function CambiarTexto() {
     
            var desde = $("#txtFechaInicio").val();
            var hasta = $("#txtFechaFin").val();
            var tipocontrol = $("#tipocontrol").data("kendoDropDownList").text();
            var tipocaso = $("#tipocaso").data("kendoDropDownList").text();
     
            $("#lblDesde").text(desde);
            $("#lblHasta").text(hasta);
            $("#lblControl").text(tipocontrol);
            $("#lblCaso").text(tipocaso);
     
            OcultarControl("tabDato", false);
        }
     
    </script>
     
    <script type="text/javascript">
        function dataBound(e) {
     
            //var pageSizes = [{ text: "10", value: 10 }, { text: "20", value: 20 }, { text: "50", value: 50 },
            //    { text: "100", value: 100 }, { text: "Todo", value: 1000000 }];
     
            //$('.k-pager-sizes select[data-role="dropdownlist"]').data('kendoDropDownList')
            //    .setDataSource(new kendo.data.DataSource({ data: pageSizes }));
     
            resetRowNumber(e);
     
            var rows = this.table.find("tr[role='row']");
            for (var i = 0; i < rows.length; i++) {
                var model = this.dataItem(rows[i]);
                $(rows[i]).find(".k-grid-custom").contents().last()[0].textContent = model.CODIGO_SOLICITUDSERVICIO;
     
                if (model.CASO_CERRADO == false || model.CASO_CERRADO == null) {
                    $(rows[i]).find(".k-grid-Gestionar").contents().last()[0].textContent = "Gestionar";
                }
                else {
                    $(rows[i]).find(".k-grid-Gestionar").contents().last()[0].textContent = "Cerrado";
                }
            }
     
            var grid = $('#Grid').data('kendoGrid');
     
            var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))
            .options.parameterMap({
                page: grid.dataSource.page(),
                sort: grid.dataSource.sort(),
                filter: grid.dataSource.filter(),
                txtFechaInicio: $("#txtFechaInicio").val(),
                txtFechaFin: $("#txtFechaFin").val(),
                tipocontrol: $("#tipocontrol").val(),
                tipocaso: $("#tipocaso").val(),
                nombre_control: $("#tipocontrol").data("kendoDropDownList").text(),
                nombre_caso: $("#tipocaso").data("kendoDropDownList").text()
            });
     
            // EXPORTAR A PDF
            var $exportLink = $('#export');
            var href = $exportLink.attr('href');
            href = href.replace(/page=([^&]*)/, 'page=' + requestObject.page || '~');
            href = href.replace(/sort=([^&]*)/, 'sort=' + requestObject.sort || '~');
            href = href.replace(/pageSize=([^&]*)/, 'pageSize=' + grid.dataSource.total());
            href = href.replace(/filter=([^&]*)/, 'filter=' + (requestObject.filter || '~'));
            href = href.replace(/txtFechaInicio=([^&]*)/, 'txtFechaInicio=' + (requestObject.txtFechaInicio || ""));
            href = href.replace(/txtFechaFin=([^&]*)/, 'txtFechaFin=' + (requestObject.txtFechaFin || ""));
            href = href.replace(/tipocontrol=([^&]*)/, 'tipocontrol=' + (requestObject.tipocontrol || ""));
            href = href.replace(/tipocaso=([^&]*)/, 'tipocaso=' + (requestObject.tipocaso || ""));
            href = href.replace(/nombre_control=([^&]*)/, 'nombre_control=' + (requestObject.nombre_control || ""));
            href = href.replace(/nombre_caso=([^&]*)/, 'nombre_caso=' + (requestObject.nombre_caso || ""));
            $exportLink.attr('href', href);
     
     
            // EXPORTAR A EXCEL
            var $exportLinkex = $('#exportex');
            var hrefex = $exportLinkex.attr('href');
            hrefex = hrefex.replace(/page=([^&]*)/, 'page=' + requestObject.page || '~');
            hrefex = hrefex.replace(/sort=([^&]*)/, 'sort=' + requestObject.sort || '~');
            hrefex = hrefex.replace(/pageSize=([^&]*)/, 'pageSize=' + grid.dataSource.total());
            hrefex = hrefex.replace(/filter=([^&]*)/, 'filter=' + (requestObject.filter || '~'));
            hrefex = hrefex.replace(/txtFechaInicio=([^&]*)/, 'txtFechaInicio=' + (requestObject.txtFechaInicio || ""));
            hrefex = hrefex.replace(/txtFechaFin=([^&]*)/, 'txtFechaFin=' + (requestObject.txtFechaFin || ""));
            hrefex = hrefex.replace(/tipocontrol=([^&]*)/, 'tipocontrol=' + (requestObject.tipocontrol || ""));
            hrefex = hrefex.replace(/tipocaso=([^&]*)/, 'tipocaso=' + (requestObject.tipocaso || ""));
            hrefex = hrefex.replace(/nombre_control=([^&]*)/, 'nombre_control=' + (requestObject.nombre_control || ""));
            hrefex = hrefex.replace(/nombre_caso=([^&]*)/, 'nombre_caso=' + (requestObject.nombre_caso || ""));
            $exportLinkex.attr('href', hrefex);
        }
     
        function MostrarSolicitud(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var direction = "/Consultas/SomeAction/" + dataItem.ID_SOLICITUDSERVICIO;
            var wnd = $("#Rates").data("kendoWindow");
            if (!wnd) {
                // first click of the button - will automatically fetch the contentUrl
                wnd = $("#Rates").kendoWindow({
                    title: "Solicitud de servicio",
                    actions: ["Close"],
                    content: direction,
                    visible: false,
                    modal: true
                }).data("kendoWindow");
            }
            wnd.refresh(direction);
            wnd.center();
            wnd.open();
        }
     
        function GestionarCI(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var direction = "/Consultas/GestionarControlInterno/" + dataItem.ID_SOLICITUDSERVICIO;
             
            if (dataItem.CASO_CERRADO == false || dataItem.CASO_CERRADO == null) {
                var wnd = $("#GCI").data("kendoWindow");
                if (!wnd) {
                    // first click of the button - will automatically fetch the contentUrl
                    wnd = $("#GCI").kendoWindow({
                        title: "Gestionar control interno",
                        actions: ["Close"],
                        content: direction,
                        visible: false,
                        modal: true
                    }).data("kendoWindow");
                }
     
            }
            else {
                var wnd = $("#CCI").data("kendoWindow");
                if (!wnd) {
     
                    // first click of the button - will automatically fetch the contentUrl
                    wnd = $("#CCI").kendoWindow({
                        title: "Control interno",
                        actions: ["Close"],
                        content: direction,
                        visible: false,
                        modal: true
                    }).data("kendoWindow");
                }
                //            wnd1.refresh(direction);
                //            wnd1.center();
                //            wnd1.open();
            }
            wnd.refresh(direction);
            wnd.center();
            wnd.open();
             
        }
     
    </script>
     
     
    <script type="text/javascript">
        function getParameter() {
            return {
                txtFechaInicio: $("#txtFechaInicio").val(),
                txtFechaFin: $("#txtFechaFin").val(),
                tipocontrol: $("#tipocontrol").val(),
                tipocaso: $("#tipocaso").val(),
                bandera: flag
            };
        }
     
        function BindGrid() {
            flag = true;
            CambiarTexto();
            $("#Grid").data("kendoGrid").dataSource.read();
            $("#Grid").data("kendoGrid").refresh();
        }
    </script>
     
    <script type="text/javascript">
            function startChange() {
                var endPicker = $("#txtFechaFin").data("kendoDatePicker"),
                startDate = this.value();
     
                if (startDate) {
                    startDate = new Date(startDate);
                    startDate.setDate(startDate.getDate());
                    endPicker.min(startDate);
                }
            }
     
            function endChange() {
                var startPicker = $("#txtFechaInicio").data("kendoDatePicker"),
                endDate = this.value();
     
                if (endDate) {
                    endDate = new Date(endDate);
                    endDate.setDate(endDate.getDate());
                    startPicker.max(endDate);
                }
            }
     
    </script>

    Thanks for the help.

    Regards
  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 09 Apr 2014 Link to this post

    Hello Christian,

    Can it be that the issue you experience is related to this known bug in our Q1 2014 release? If so, please update the relevant scripts to see whether this helps.

    Kind regards,
    Sebastian
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Misahael
    Misahael avatar
    25 posts
    Member since:
    Oct 2013

    Posted 09 Apr 2014 in reply to Sebastian Link to this post

    Hi Sebastian,

    It seems the problem was solved, thanks for the support

    Regards.
Back to Top