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ã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í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í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çã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ível nos Grids</td>
<td class="clLegenda"><input type="checkbox" id="chkVeiculoRoubado" name="chkVisivelGrid" class="k-checkbox" data-bind="checked: selecionado.Roubado" />Veículo Roubado</td>
</tr>
<tr>
<td class="clLegenda" colspan="3">
Observaçõ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ículos já 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á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
}
});
});