Tengo una columna datetime en mi Kendo de la Cuadrícula. Los valores de este aspecto: 2014-04-11 12:43:41.720

En mi grid, he cambiado la plantilla para mostrar como las fechas cortas: 04/11/2014

La razón por la que no acaba de enviar datos a las columnas con formato previo es porque quiero que el tiempo que debe tenerse en cuenta para la clasificación. Mi problema ahora es que cuando el filtrado, específicamente cuando se hace un «igual a» filtro, si puedo elegir 4/11/2014 desde el selector de fecha, no se mostrará ningún resultado debido a que el tiempo es por defecto 12:00:00.00.

Es de todos modos puedo filtro basado en el texto en lugar del valor? O puedo enviar formato de fechas para la red y tener el tipo de uso de un campo diferente?

JS fragmento de mi columna:

columns: [
    { 
      field: "CREATEDATE",
      title: "Created",
      width: 78,
      template: '#= kendo.toString(kendo.parseDate(CREATEDATE, "yyyy-MM-dd"), "MM/dd/yyyy") #',
      filterable: true,
      attributes: { style: "text-align:center;" }
    }
]
  • Yo no he probado esto, no lo voy a publicar como una respuesta, pero aquí hay un hilo en el Telerik foro con un proyecto de demostración que usted puede descargar que puede hacer exactamente lo que usted necesita: telerik.com/forums/grid-filters-with-date-and-time
  • Que es en realidad uno de los mensajes del foro, he mirado pero supongo que no he leído lo suficiente hacia abajo… el 2º post de Matt es exactamente lo que estaba buscando para cambiar el criterio de ordenación de miembros cuando los datos que se une. Si a usted le gustaría añadir que el fragmento de una respuesta que será un placer aceptar.
  • Debo aclarar que… he cambiado la columna a utilizar un formato de Fecha (4/11/2014), que funcionó bien para el filtrado, pero luego, cuando los datos se une si el usuario ha intentado ordenar que la columna I cambió a utilizar el formato de valor de DateTime.
  • Respuesta publicada. +1 en la pregunta, por CIERTO, porque esto era algo que yo estaba tratando de resolver recientemente, y no fue capaz de resolver en el tiempo que tenía disponible en ese momento. Esta pregunta me dio la oportunidad de mirar de nuevo.
InformationsquelleAutor Goose | 2014-04-17

4 Comentarios

  1. 3

    La Telerik foro tiene un ejemplo de esto aquí para descargar.

    De la comodidad que le pegue el código que ellos han creado. El tercio inferior del ejemplo contiene el javascript/jquery necesarios para secuestrar la incorporada en el Kendo de funcionamiento del filtro y permitir que usted proporcione su propio manejo.

    Básicamente, usted tiene que construir un nuevo objeto date con los sectores de la fecha en que usted está interesado en, ie. día, mes y año.

    <html>
    <head>
    <title>Dynamically change date format</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
    </head>
    <body>
    <input id="dropDownList"></input>
    <br />
    <div id="grid"></div>
    <script>
    var sampleData = [
    { name: "John", date: new Date("October 13, 2012 11:13:00")},
    { name: "Lisa", date: new Date("March 18, 2012 07:13:00")},
    { name: "Jack", date: new Date("September 28, 2011 12:28:43")},
    { name: "Maria", date: new Date("May 28, 2012 11:13:00")},
    { name: "Steven", date: new Date("May 31, 2012 07:13:00")},
    { name: "Bob", date: new Date("September 02, 2012 12:28:43")}
    ];
    var flag = 1;
    function formatDate(date) {
    switch(flag)
    {
    case 1:
    return kendo.toString(date, "g");
    case 2:
    return kendo.toString(date, "d");
    case 3:
    return kendo.toString(date, "Y");
    default:
    return kendo.toString(date, "F");
    }
    }
    $("#dropDownList").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
    { text: "Weekly", value: "1" },
    { text: "Monthly", value: "2" },
    { text: "Yearly", value: "3" }
    ],
    index: 0,
    change: function(e) {
    flag = parseInt(this.value());
    console.log(flag);
    $("#grid").data("kendoGrid").refresh();
    }
    });
    $("#grid").kendoGrid({
    dataSource: {
    data: sampleData,
    schema: {
    model: {
    fields: {
    name: { type: "string" },
    date: { type: "date" }
    }
    }
    }
    },
    columns: [
    { field: "name", title: "Name" },
    { field: "date", title: "Date" , template: "#= formatDate(date) #"}
    ],
    filterable: true
    });
    $(document).ready(function() {
    $("th[data-title=Date]")
    .data("kendoFilterMenu")
    .form.find("button[type=submit]")
    .click(function(e) {
    //gets filter type
    var filterType = $(this.form).find($("select[data-role=dropdownlist]")).eq(0).val();
    //if filter is "Is equal to"
    if(filterType == "eq") {
    e.preventDefault();
    //gets the datePicker input date
    var selectedDate = $(this.form).find($("input[data-role=datepicker]")).eq(0).val();
    //create a filter
    $("#grid").data("kendoGrid").dataSource.filter({
    field: "date",
    //create custom filter operator
    operator: function(fieldDate) {
    var parsedSelectedDate = kendo.parseDate(selectedDate);
    //parse the field date in order to ignore the time
    var parsedFieldDate = new Date(fieldDate.getFullYear(),  fieldDate.getMonth(), fieldDate.getDate());
    var result = (parsedFieldDate.getTime() == parsedSelectedDate.getTime());
    return result;
    },
    value: selectedDate
    });
    //close filter window
    $("th[data-title=Date]").data("kendoFilterMenu").popup.close();
    }
    console.log("filter"); 
    });
    });
    </script>
    </body>
    </html>
    • Esta es una manera de lograr lo que me pidió, entonces, la respuesta ha sido aceptada. Sin embargo, para referencia en el futuro me terminó de modificar mi código para resolver fundamentalmente el problema opuesto de la clasificación en lugar de filtrado. También voy a agregar como una respuesta alternativa en caso de que alguien se tropieza en esta pregunta.
  2. 1

    Una solución para mi problema de filtrado que fue resuelto por jwatts, pero yo quería incluir otra respuesta para los demás como me terminó de cambiar mi código a la dirección de mi segunda pregunta:

    «O puedo enviar formato de fechas para la red y tener el tipo de uso de un campo diferente?»

    Me hizo a terminar usando el formato de fecha en mi red como el valor de la columna. Filtrado funcionado bien, ya que no tiene que preocuparse acerca de las marcas de tiempo. Para solucionar el problema de clasificación, en mi controlador (en volver a enlazar) he comprobado DataSourceRequest para cualquier tipo de parámetros y si el usuario fue ordenar el formato de la fecha de la columna, yo la cambié en lugar de utilizar toda la columna datetime (oculto).

    if (request.Sorts != null)
    {
    foreach (var sort in request.Sorts)
    {
    if (sort.Member.Equals("CREATEDATE_FORMATTED", System.StringComparison.OrdinalIgnoreCase))
    {
    sort.Member = "CREATEDATE";
    }
    }
    }
  3. 0

    Hay otra manera de mostrar el tiempo con que se pueda filtrar y ordenar. Puedo usar esto en mi KendoUI jquery grid y puede filtrar minutos.

    { field: "CREATEDATE", 
    title: "Created",
    format: "{0:dd/MM/yy hh:mm tt}",
    width: "150px",
    template: "#= kendo.toString(kendo.parseDate(CREATEDATE, 'yyyy-MM-dd hh:mm tt'), 'dd/MM/yyyy hh:mm tt') #" },
  4. 0

    Me doy cuenta de que este es un viejo post y aparentemente resuelto, pero me topé con esto que cuando me encontré con esta pregunta y encontrar una solución más fácil para la segunda parte de su pregunta: «puedo tener el tipo de uso de un campo diferente.» El KendoUI cuadrícula de datos tiene un configuración que apoya esto.

    Por ejemplo, si tengo una columna en la cuadrícula que muestra que el último cambio de una fila y la fecha en que se cambió (por ejemplo, «John Doe – 7/20/16 10:30 AM», consulte «changedByDetail’ en el ejemplo de código) y cuando el usuario ordena en la columna yo sólo quiero el datetime aspecto ordenado, puedo lograr esto como tales:

        gridColumns: [
    { field: 'title', title: 'Title' },
    { field: 'changedByDetail', title: 'Changed'
    , sortable: {
    compare: function (a, b, desc){
    if (a.changedDateTime < b.changedDateTime) {
    return -1;
    }
    else if (a.changedDateTime > b.changedDateTime) {
    return 1;
    }
    return 0;
    }
    }
    }
    ]

    En este caso, mi cuadrícula de origen de datos contiene la datetime en el ‘changedDateTime campo en mi ejemplo. Si no, usted probablemente podría utilizar una cadena de analizar la función de la tira de la datetime de la cadena, convertir a la fecha, y hacer la comparación que.

    Espero que esto ayude a alguien!

Dejar respuesta

Please enter your comment!
Please enter your name here