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 303 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

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

Kendo UI doesn't work well in Firefox 28.0

2 Answers, 1 is accepted