Search before loading Kendo Grid

Asked

Viewed 314 times

1

Hello, I’m using a textbox to search and load the datasource of Kendo’s grid. However, the way we build the project, to edit a record it is necessary to select a Grid item and edit in the fields that are above it (when the data in the fields is populated, we call to recover). When I load the Grid without using the search, everything goes well, but when I use the search it does not perform the editing, giving error in the following function (this function is the one that makes the whole process of checking what is being done - update, Insert, delete, select): 

function criaViewModel() {  
    return new kendo.observable({
    registros: dados,
    selecionado: new modelo(),
    salvar: function () {
      $(".clMsg").text("");

      if (this.selecionado.Id < 1) {
          this.registros.add(this.selecionado);
      } else {
        if (recuperado) { //Neste IF que ocorre o erro
          var indice = this.registros.indexOf(this.registros.get(this.selecionado.Id)); //this.selecionado.Id vem com o valor correto.
          var registro = this.registros.data()[indice];
          for (var _propriedade in modelo.fields) {        
            registro.set(_propriedade, this.selecionado[_propriedade]); // aqui ele para a execução e diz que "set" não está definido. Isso ocorre porque o índice é = -1 nesse ponto
          }
        }
      }              
      this.registros.sync();
    },
    cancelar: function () {
      $(".clMsg").text("");
      this.registros.cancelChanges();
      this.set("selecionado", new modelo());
    },
    excluir: function () {
      if (this.selecionado != null && this.selecionado.Id > 0) {
        MsgPergunta(null,"Confirma a exclus&atilde;o do registro?", Excluir);
      }
    },
  });
}

Let’s look at the rest of the sample code.

SQL that generates the information: 

public function Listar($aPesq) {
    $this->Lista = array ();
    $sql = "SELECT VEHICLES.ID,
                    INTEGRATORS.NAME AS INTEGRADOR,
                    CUSTOMERS.NAME AS CLIENTE,
                    VEHICLES_TYPES.DESCRIPTION AS TIPOVEICULO,
                    VEHICLES.PLATE AS PLACA,
                    DRIVERS.NAME
            FROM VEHICLES
            INNER JOIN CUSTOMERS ON VEHICLES.Customer = CUSTOMERS.ID
            INNER JOIN dbo.VehiclesByUserId(1492)   ON (Vehicles.Id = dbo.VehiclesByUserId.VehicleId)
            LEFT JOIN DRIVERS ON (VEHICLES.DRIVERID=DRIVERS.DRIVERID)
            LEFT JOIN INTEGRATORS ON VEHICLES.INTEGRATORID = INTEGRATORS.INTEGRATORID
            LEFT JOIN VEHICLES_TYPES ON VEHICLES.VEHICLETYPEID = VEHICLES_TYPES.ID 
            WHERE Integrators.Name LIKE '{$aPesq}' OR Customers.Name LIKE '{$aPesq}' OR Description LIKE '{$aPesq}' OR Plate LIKE '{$aPesq}' OR Drivers.Name LIKE '{$aPesq}'
            ORDER BY CUSTOMERS.NAME,VEHICLES.PLATE";
    $this->bd->Clear ();
    $this->bd->setSQL ( $sql );
    if ($this->bd->Executar ()) {
        foreach ( $this->bd->Registro as $registro ) {
            $tmp = new Veiculo ();
            $tmp->Id = $registro->Campo ["ID"];
            $tmp->Integrador = ($registro->Campo ["INTEGRADOR"]);
            $tmp->Cliente = ($registro->Campo ["CLIENTE"]);
            $tmp->TipoVeiculo = ($registro->Campo ["TIPOVEICULO"]);
            $tmp->Placa = $registro->Campo ["PLACA"];
            $tmp->Motorista = $registro->Campo ["NAME"];
            $this->Lista [] = $tmp;
        }
    } else {
        $this->Lista [] = new Veiculo ();
    }

    return true;
}

public function Recuperar($aIdVeiculo) {
    $this->Id = $aIdVeiculo;
    $sql = "SELECT TOP 1 VEHICLES.ID,
                INTEGRATORS.INTEGRATORID AS IDINTEGRADOR,
                INTEGRATORS.NAME AS INTEGRADOR, 
                 FreightBrokers_Shippers.ShipperId AS IDEMBARCADOR,
                 Cooperatives_FreightBrokers.FreightBrokerId AS IDUNIDADE,
                Carriers_Cooperatives.CooperativeId AS IDCOOPERATIVA,
                CUSTOMERS.ID AS IDTRANSPORTADORA,
                CUSTOMERS.NAME AS CLIENTE,
                VEHICLES.VEHICLETYPEID AS IDTIPOVEICULO,
                VEHICLES_TYPES.DESCRIPTION AS TIPOVEICULO,
                VEHICLES.VEHICLESBRANDID AS IDMARCAVEICULO,
                VEHICLES.PLATE AS PLACA,
                VEHICLES.MODEL AS MODELO,
                VEHICLES.FABRICATIONYEAR AS  ANOFABRICACAO,
                VEHICLES.MODELYEAR AS ANOMODELO,
                VEHICLES.FLEET AS FROTA,
                VEHICLES.COLOR AS COR,
                VEHICLES.TARA AS TARA,
                VEHICLES.CAPTUREXMLDATA AS CAPTURAPACOTES,
                VEHICLES.VISIBLEONGRIDS AS VISIVELNOSGRIDS,
                VEHICLES.OBSERVATIONS AS OBSERVACOES,
                VEHICLES.DRIVERID AS IDMOTORISTA,
                VEHICLES.STOLENVEHICLE AS ROUBADO

            FROM VEHICLES

            INNER JOIN INTEGRATORS ON VEHICLES.INTEGRATORID = INTEGRATORS.INTEGRATORID
            INNER JOIN CUSTOMERS ON VEHICLES.Customer = CUSTOMERS.ID
            INNER JOIN  Carriers_Cooperatives ON ( Customers.Id =  Carriers_Cooperatives.CarrierId)
            INNER JOIN  Cooperatives_FreightBrokers ON ( Carriers_Cooperatives.CooperativeId =  Cooperatives_FreightBrokers.CooperativeId)
            INNER JOIN  FreightBrokers_Shippers ON ( Cooperatives_FreightBrokers.FreightBrokerId =  FreightBrokers_Shippers.FreightBrokerId)
            LEFT JOIN VEHICLES_TYPES ON VEHICLES.VEHICLETYPEID = VEHICLES_TYPES.ID 
            WHERE VEHICLES.ID ={$this->Id} AND Customers.Status = 0
            ORDER BY  FreightBrokers_Shippers.ShipperId,  Cooperatives_FreightBrokers.FreightBrokerId,  Carriers_Cooperatives.CooperativeId,  Vehicles.Customer";
    $this->bd->Clear ();
    $this->bd->setSQL ( $sql );

    if ($this->bd->Executar ()) {
        $this->Id = $this->bd->Registro [0]->Campo ["ID"];
        $this->IdIntegrador = $this->bd->Registro [0]->Campo ["IDINTEGRADOR"];
        $this->IdEmbarcador = $this->bd->Registro [0]->Campo ["IDEMBARCADOR"];
        $this->IdUnidade = $this->bd->Registro [0]->Campo ["IDUNIDADE"];
        $this->IdCooperativa = $this->bd->Registro [0]->Campo ["IDCOOPERATIVA"];
        $this->IdTransportadora = $this->bd->Registro [0]->Campo ["IDTRANSPORTADORA"];
        $this->IdTipoVeiculo = $this->bd->Registro [0]->Campo ["IDTIPOVEICULO"];
        $this->IdMarcaVeiculo = $this->bd->Registro [0]->Campo ["IDMARCAVEICULO"];
        $this->Placa = $this->bd->Registro [0]->Campo ["PLACA"];
        $this->Modelo = ($this->bd->Registro [0]->Campo ["MODELO"]);
        $this->AnoFabricacao = $this->bd->Registro [0]->Campo ["ANOFABRICACAO"];
        $this->AnoModelo = $this->bd->Registro [0]->Campo ["ANOMODELO"];
        $this->Frota = ($this->bd->Registro [0]->Campo ["FROTA"]);
        $this->Cor = $this->bd->Registro [0]->Campo ["COR"];
        $this->Tara = $this->bd->Registro [0]->Campo ["TARA"];
        $this->CapturaPacotes = ($this->bd->Registro [0]->Campo ["CAPTURAPACOTES"] == 1);
        $this->VisivelNosGrids = ($this->bd->Registro [0]->Campo ["VISIVELNOSGRIDS"] == 1);
        $this->Roubado = ($this->bd->Registro [0]->Campo ["ROUBADO"] == 1);
        $this->Observacoes = ($this->bd->Registro [0]->Campo ["OBSERVACOES"]);
        $this->IdMotorista = $this->bd->Registro [0]->Campo ["IDMOTORISTA"];
        return true;
    } else {
        return false;
    }
}

HTML of the screen

<div>
    <table class="tbForm">
        <tr>
            <td colspan="2" class="clMsg"></td>
        </tr>
        <!-- Combos -->
        <tr>
            <td class="clLegenda">
                <span class="cpoObrigatorio">*</span>
                Embarcador:
                <br/>
                <select class="k-combobox" id="cboEmbarcador" data-bind="value: selecionado.IdEmbarcador" ></select>
            </td>
            <td class="clLegenda">
                <span class="cpoObrigatorio">*</span>
                Unidade: 
                <br/>
                <select class="k-combobox" id="cboUnidade" data-bind="value: selecionado.IdUnidade" ></select>
            </td>
            <td class="clLegenda">
                <span class="cpoObrigatorio">*</span>
                Cooperativa: 
                <br/>
                <select class="k-combobox" id="cboCooperativa" data-bind="value: selecionado.IdCooperativa" ></select>
            </td>
        </tr>
        <tr>
            <td class="clLegenda">
                <span class="cpoObrigatorio">*</span>
                Transportadora: 
                <br/>
                <select class="k-combobox" id="cboTransportadora" data-bind="value: selecionado.IdTransportadora" ></select>
            </td>
            <td class="clLegenda">
            <span class="cpoObrigatorio">*</span>
                Integrador: 
                <br/>
                <select class="k-combobox" id="cboIntegrador" data-bind="value: selecionado.IdIntegrador" ></select>
            </td>
            <td class="clLegenda">
                Motorista: 
                <br/>
                <select class="k-combobox" id="cboMotorista" data-bind="value: selecionado.IdMotorista" ></select>
            </td>
        </tr>

        <tr>    
            <td class="clLegenda">
                Tipo de Ve&iacute;culo: 
                <br/>
                <select class="k-combobox" id="cboTipoVeiculo" data-bind="value: selecionado.IdTipoVeiculo" ></select>
            </td>

            <td class="clLegenda">
            Marca: 
                <br/>
                <select class="k-combobox" id="cboMarcaVeiculo" data-bind="value: selecionado.IdMarcaVeiculo" ></select>
            </td>
            <td class="clLegenda">
                Cor do Ve&iacute;culo: 
                <br/>
                <select class="k-combobox" id="cboCor" data-bind="value: selecionado.Cor" ></select>
            </td>
        </tr>
        <tr>
            <td class="clLegenda">
                Modelo: 
                <br/>
                <input name="edtCliente" id="edtCliente" data-bind="value:selecionado.Modelo" class="k-textbox"/>
            </td>
            <td class="clLegenda">
            <span class="cpoObrigatorio">*</span>
                Placa: 
                <br/>
                <input name="edtCliente" id="edtCliente" data-bind="value:selecionado.Placa" class="k-textbox" data-mask="LLL-0000" data-role="maskedtextbox"/>
            </td>
            <td class="clLegenda">
                Frota: 
                <br/>
                <input name="edtCliente" id="edtCliente" data-bind="value:selecionado.Frota" class="k-textbox"/>
            </td>

        </tr>
        <tr>    
            <td class="clLegenda">
                Ano Modelo: 
                <br/>
                <input id="edtAnoModelo" name="edtAnoModelo" data-role="numerictextbox" data-bind="value: selecionado.AnoModelo" data-format="####" />
            </td>               
            <td class="clLegenda">
                Ano Fabrica&ccedil;&atilde;o: 
                <br/>
                <input id="edtAnoFabricacao" name="edtAnoFabricacao" data-role="numerictextbox" data-bind="value: selecionado.AnoFabricacao" data-format="####" />
            </td>   
            <td class="clLegenda">
                Tara: 
                <br/>
                <input id="edtTara" name="edtTara" data-role="numerictextbox" data-bind="value: selecionado.Tara" data-format="n0" />
            </td>   
        </tr>
        <tr>
            <td class="clLegenda"><input type="checkbox" id="chkCapturaPacotes" name="chkCapturaPacotes" class="k-checkbox" data-bind="checked: selecionado.CapturaPacotes" />Captura Pacotes</td>
            <td class="clLegenda"><input type="checkbox" id="chkVisivelGrid" name="chkVisivelGrid" class="k-checkbox" data-bind="checked: selecionado.VisivelNosGrids" />Vis&iacute;vel nos Grids</td>
            <td class="clLegenda"><input type="checkbox" id="chkVeiculoRoubado" name="chkVisivelGrid" class="k-checkbox" data-bind="checked: selecionado.Roubado" />Ve&iacute;culo Roubado</td>
        </tr>
        <tr>
            <td class="clLegenda" colspan="3">
                Observa&ccedil;&otilde;es:
                <br/>
                <textarea name="edtObservacoes" id="edtObservacoes" data-bind="value:selecionado.Observacoes" rows="5" class="k-textbox" style="width: 99%;"></textarea>
            </td>
        </tr>
            <td colspan="3" class="clBotoes" align="right">
                <table style="width: 100%">
                    <tr>
                        <td style="text-align: left;">
                            <input type="text" id="edtPesquisa" name="edtPesquisa" placeholder="Pesquisar..." class="k-textbox" onkeypress="PesquisarENTER(event)" />
                            <input type="button" class="k-button" id="btnPesquisar" value="Pesquisar" />
                            <img src="Imagens/gmapa-icones/media/help.png" id="dvInformacao" style="width: 20px; vertical-align: middle;" onclick="Ajuda()"/>

                        </td>
                        <td>
                            <?php if (ValidaPermissaoFuncionaliade($_dados,"salvar")) echo '<input type="button" value="Salvar" id="btnSalvar" data-bind="click: validar" class="k-button" /> '; ?>
                        <input type="button" value="Cancelar" id="btnCancelar" data-bind="click: cancelar" class="k-button" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <hr />
    <div id="dvLista">
        <span class="clSubTitulo">Ve&iacute;culos j&aacute; cadastrados</span><br />
        <div id="grdDados" class="grdDados"></div>
    </div>  
    <br><br>
</div

Javascript da Tela

/* Definição do modelo */
modelo = kendo.data.Model.define({
  id: "Id",
  fields: {
    Id: { editable: false, nullable: false, type: "number", defaultValue: 0 },
    IdIntegrador: { editable: true },
    IdEmbarcador: { editable: true },
    IdUnidade: { editable: true },
    IdCooperativa: { editable: true },
    IdTransportadora: { editable: true },
    IdTipoVeiculo: { editable: true },
    IdMarcaVeiculo: { editable: true },
    IdMotorista: { editable: true },
    Motorista: { type: "string"},
    Placa: { type: "string"},
    Modelo: { type: "string"},
    AnoFabricacao: { type: "number"},
    AnoModelo: { type: "number"},
    Frota: { type: "string"},
    Cor: { type: "string"},
    Tara: { type: "number"},
    CapturaPacotes: { type: "boolean", defaultValue: true},
    VisivelNosGrids: { type: "boolean", defaultValue: true},
    Observacoes: { type: "string"},
    Roubado: { type: "boolean"},
  }
});

 /* Definição do datasource */
dados = criaDataSource(modelo);

// assim que carregar a p&aacute;gina
$(document).ready(function () {
    kendo.culture("pt-BR");
    vmObjeto = criaViewModel();  // instancia o vm
    $("#btnPesquisar").click(function () {
        listaVeiculos = new kendo.data.DataSource({
            transport: {
                read: {
                    url: urlBase + "/principal.php?ACAO=Listar",
                    dataType: "json",
                    type: "POST",
                    data: {
                            MODULO: "<?=$_POST["MODULO"]?>", 
                            TELA:"<?=$_POST["TELA"]?>", 
                            Pesq: $("#edtPesquisa").val()
                          }
                }
            },
            batch: false,
            schema: { 
                model: modelo
            },
            requestStart: function (e){
                $(".clCarregando").show();
            },
            requestEnd: function (e){
                $(".clCarregando").hide();
            }   
        });

        var grdVeiculos = $("#grdDados").data("kendoGrid");      
        grdVeiculos.setDataSource(listaVeiculos);

        $("#edtPesquisa").val('');
    }

    $("#grdDados").kendoGrid({
        columns: [
                  {field:"Integrador", title:"Integrador" },
                  {field:"Cliente", title:"Cliente" },
                  {field:"TipoVeiculo", title:"Tipo" },
                  {field:"Placa", title:"Placa" },
                  {field:"Motorista", title:"Motorista" }
                 ],
        groupable: true,
        sortable: true,
        editable: false,
        filterable: true,
        pageable: true,
        selectable: "row",
        height: 420,
        dataSource: dados,
        change: function (e) {
            recuperarRegistro(this.dataItem(this.select()).Id, modelo); // Passa o Id selecionado para o SQL de Recuperar
        }
    });
});
php javascript html5 kendo-ui

1 answer

1


Good people, the solution we found in the company was the following:

/* Definição do modelo */
modelo = kendo.data.Model.define({
  id: "Id",
  fields: {
    Id: { editable: false, nullable: false, type: "number", defaultValue: 0 },
    IdIntegrador: { editable: true },
    IdEmbarcador: { editable: true },
    IdUnidade: { editable: true },
    IdCooperativa: { editable: true },
    IdTransportadora: { editable: true },
    IdTipoVeiculo: { editable: true },
    IdMarcaVeiculo: { editable: true },
    IdMotorista: { editable: true },
    Motorista: { type: "string"},
    Placa: { type: "string"},
    Modelo: { type: "string"},
    AnoFabricacao: { type: "number"},
    AnoModelo: { type: "number"},
    Frota: { type: "string"},
    Cor: { type: "string"},
    Tara: { type: "number"},
    CapturaPacotes: { type: "boolean", defaultValue: true},
    VisivelNosGrids: { type: "boolean", defaultValue: true},
    Observacoes: { type: "string"},
    Roubado: { type: "boolean"},
  }
});

/* Defini&ccedil;&atilde;o do datasource */
dados = criaDataSource(modelo);

$("#btnPesquisar").click(function() {
     dados = null;
     var valor = $("#edtPesquisar").val();
     dados = criaDataSource(modelo,undefined,undefined,valor);  // instancia o vm
     //dados.read();         
     var grid = $("#grdDados").data("kendoGrid");
     grid.setDataSource(dados);
     vmObjeto.set("registros",dados);
});

// assim que carregar a p&aacute;gina
$(document).ready(function () {
kendo.culture("pt-BR");

vmObjeto = criaViewModel();  // instancia o vm

//Valida os campos
vmObjeto.validar = function() {

    if (this.selecionado.IdEmbarcador < 1){
         MsgAlerta(null, "Selecione um Embarcador");
        $(".clMsg").text("Selecione um Embarcador");
        return;
    }

    if (this.selecionado.IdUnidade < 1){
         MsgAlerta(null, "Selecione uma Unidade");
        $(".clMsg").text("Selecione uma Unidade");
        return;
    }

    if (this.selecionado.IdTransportadora < 1){
         MsgAlerta(null, "Selecione uma Transportadora");
        $(".clMsg").text("Selecione uma Transportadora");
        return;
    }

    if (this.selecionado.IdCooperativa < 1){
         MsgAlerta(null, "Selecione uma Cooperativa");
        $(".clMsg").text("Selecione uma Cooperativa");
        return;
    }

    if (this.selecionado.IdIntegrador < 1){
         MsgAlerta(null, "Selecione um Integrador");
        $(".clMsg").text("Selecione um Integrador");
        return;
    } 

    if (this.selecionado.Placa == ''){
         MsgAlerta(null, "Digite a Placa");
        $(".clMsg").text("Digite a Placa");
        return;
    }
    this.salvar();
}



montaCombo($("#cboEmbarcador"),"ComboEmbarcadores");
montaCombo($("#cboUnidade"),"ComboUnidades", "cboEmbarcador", vmObjeto.selecionado.IdEmbarcador, "vmObjeto.selecionado.IdUnidade");
montaCombo($("#cboCooperativa"),"ComboCooperativas","cboUnidade", vmObjeto.selecionado.IdUnidade, "vmObjeto.selecionado.IdCooperativa");
montaCombo($("#cboTransportadora"),"ComboTransportadoras","cboCooperativa", vmObjeto.selecionado.IdCooperativa, "vmObjeto.selecionado.IdTransportadora");
montaCombo($("#cboIntegrador"),"ComboIntegradoresTransportadoras","cboTransportadora", vmObjeto.selecionado.IdTransportadora, "vmObjeto.selecionado.IdIntegrador");
montaCombo($("#cboMotorista"),"ComboMotoristas","cboTransportadora", vmObjeto.selecionado.IdTransportadora, "vmObjeto.selecionado.IdMotorista");
montaCombo($("#cboMarcaVeiculo"),"ComboMarcasVeiculo", "cboIntegrador", vmObjeto.selecionado.IdIntegrador, "vmObjeto.selecionado.IdMarcaVeiculo");  
montaCombo($("#cboTipoVeiculo"),"ComboTiposVeiculo");
montaCombo($("#cboCor"),"ComboCores");


kendo.bind($("#dvForm"), vmObjeto);  // efetiva o bind nos campos

// a grid precisa ser configurada para cada tela
$("#grdDados").kendoGrid({
    columns: [
              {field:"Integrador", title:"Integrador" },
              {field:"Cliente", title:"Cliente" },
              {field:"TipoVeiculo", title:"Tipo" },
              {field:"Placa", title:"Placa" },
              {field:"Motorista", title:"Motorista" }
             ],
    groupable: true,
    sortable: true,
    editable: false,
    filterable: true,
    pageable: true,
    selectable: "row",
    height: 420,
    //dataSource: dados,
    change: function (e) {
        recuperarRegistro(this.dataItem(this.select()).Id, modelo);
    }
});

Browser other questions tagged php javascript html5 kendo-ui

You are not signed in. Login or sign up in order to post.