Telerik Forums / UI for ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.

Kendo UI doesn't work well in Firefox 28.0

2 Answers 243 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Misahael
Top achievements
Rank 1
Misahael asked on 08 Apr 2014, 06:42 PM
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 Answers, 1 is accepted

Sort by
0
Sebastian
Telerik team
answered on 09 Apr 2014, 10:56 AM
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.

 
0
Misahael
Top achievements
Rank 1
answered on 09 Apr 2014, 01:43 PM
Hi Sebastian,

It seems the problem was solved, thanks for the support

Regards.
Tags
General Discussions
Asked by
Misahael
Top achievements
Rank 1
Answers by
Sebastian
Telerik team
Misahael
Top achievements
Rank 1
Share this question
or