1

Olá, Estou utilizando um textbox para pesquisar e carregar o datasource da grid da Kendo. Contudo da forma com que montamos o projeto, para editar um registro é necessário selecionar um item da Grid e editar nos campos que ficam acima dela (quando é populado os dados nos campos, chamamos de recuperar). Quando carrego a Grid sem utilizar o pesquisar, tudo ocorre bem, mas quando utilizo o pesquisar ele não realiza a edição, dando erro na função a seguir (essa função é a que faz todo o processo de verificar o que está sendo feito - 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);
      }
    },
  });
}

Vejamos o restante do código de exemplo.

SQL que gera as informações:

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 da Tela

<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
        }
    });
});

1 Resposta 1

1

Bom pessoal, a solução que encontramos na empresa foi a seguinte:

/* 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);
    }
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .