Kendo ui how to filter dataSource requestStart

datasourcekendo-ui

Main Problem

My current problem is the refresh progress when updating a grid datasource. I have change my code use the kendo.ui.progress in that way when requestStart event starts I ser the kendo.ui.progress to true. This activates the loading image when it end it calls the requestEnd.

The problem is that this event is hapenning for sorting and filtering. And I want it to only trigger for the read function of the dataSource. This problem makes the grid to use the progress endlessly.

Is there some way to filter in the requestStart and requestEnd only activate on the transport read?

My DataSource Code

dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: url_Obtener_Periodo,
      type: "POST"
    },
    parameterMap: function (options, operation) {
      if (operation == "read" && options) {
        return {
          "periodo.Year": $("#periodo-anio").val(),
          "periodo.Month": $("#periodo-mes").val(),
          "Filtro": $("#Filtro").val()
        };
      }
    }
  },
  requestStart: function (e) {
    kendo.ui.progress($("#grid-container"), true);
  },
  requestEnd: function (e) {
    kendo.ui.progress($("#grid-container"), false);
  },
  schema:{
    model: {
      id: "Codigo_De_Pedido",
      fields: {
        Codigo_De_Pedido: { type: "number" },
        Fecha_Y_Hora_De_Creacion: { type: "date" },
        UserName: { type: "string" },
        Nombre_Del_Usuario: { type: "string" },
        Codigo_Del_Vendedor: { type: "number" },
        Nombre_Del_Vendedor: { type: "string" },
        Is_Pedido_Closed: { type: "bool" },
        Estado: { type: "string" }
      }
    }
  },
  pageSize: 10
});

Best Answer

The changes I did to solve the progress endlessly problem where 2.

  • Removing requestEnd function from the dataSource
  • Adding dataBound function to the Grid

Data Source Code

dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: url_Obtener_Periodo,
      type: "POST"
    },
    parameterMap: function (options, operation) {
      if (operation == "read" && options) {
        return {
          "periodo.Year": $("#periodo-anio").val(),
          "periodo.Month": $("#periodo-mes").val(),
          "Filtro": $("#Filtro").val()
        };
      }
    }
  },
  schema:{
    model: {
      id: "Codigo_De_Pedido",
      fields: {
        Codigo_De_Pedido: { type: "number" },
        Fecha_Y_Hora_De_Creacion: { type: "date" },
        UserName: { type: "string" },
        Nombre_Del_Usuario: { type: "string" },
        Codigo_Del_Vendedor: { type: "number" },
        Nombre_Del_Vendedor: { type: "string" },
        Is_Pedido_Closed: { type: "bool" },
        Estado: { type: "string" }
      }
    }
  },
  pageSize: 10,
  requestStart: function (e) {
    kendo.ui.progress($("#grid-container"), true);
  }
});

Kendo Grid Code

kendoGrid = $("#selectable-pedidos").kendoGrid({
  dataSource: dataSource,
  pageable: true,
  sortable: true,
  filterable: {
    extra: false,
    operators: {
      string: {
        startswith: "Comienza Con",
        eq: "Es Igual A",
        neq: "No Es Igual A"
      }
    }
  },
  dataBound: function (e) {
    kendo.ui.progress($("#grid-container"), false);
  },
  columns: [
    { field: "Fecha_Y_Hora_De_Creacion", title: "Fecha y Hora", template: "#= kendo.toString(Fecha_Y_Hora_De_Creacion, 'dd/MM/yyyy hh:mm:ss tt') #" },
    { field: "Codigo_De_Pedido", title: "Código de Pedido" },
    { field: "Estado", filterable: true, title: "Estado" },
    { field: "Codigo_Del_Vendedor", title: "Código de Vendedor" },
    { field: "Nombre_Del_Vendedor", title: "Nombre de Vendedor" },
    {
      command: {
        text: "Ver Detalle de Pedido",
        click: function (e) {
          $("#empty").append("<form method='POST' action='/HojaDeRuta/GetById/'><input type='hidden' name='Codigo_Pedido' value='"
                            + this.dataItem($(e.currentTarget).closest("tr")).Codigo_De_Pedido + "' /><input type='submit' /></form>");
          $("#empty input[type='submit']").click();
        }
      },
      title: " " 
    }
  ]
}).data("kendoGrid");
Related Topic