CRM 2011 – Onclick no Subgrid

Se tem um tipo de conversa que eu gosto e costume ter, é sobre a suportabilidade ou não suportabilidade das customizações que precisamos fazer no Dynamics, as coisas evoluíram bastante nas duas últimas versões (4 e 2011), muita coisa que fazíamos de forma totalmente errada e intrusiva tornou-se algo default da ferramenta como o caso dos filters lookups.

Porém, ainda temos alguns gaps, principalmente nos novos recursos disponibilizados, como o Subgrid e os Diálogos, assim, nós desenvolvedores precisamos fazer algo além do default, tomando sempre o cuidado com a suportabilidade.

Bom com essa introdução, posso ir ao ponto do post! rs

Nativamente não existe o evento onclick para as linhas do subgrid, e em alguns casos precisamos processar algo ao clicar nas linhas, como alimentar algum campo ou chamar um serviço. Assim, crio este post para dar um exemplo de como implementar, já avisando que é algo “Não Suportado”(Unsupported), mesmo assim, procurei ter cuidado e pensar no crossbrowser, mas a garantia de funcionalidade nas novas versões, fica em aberto.

O resultado final será este:

Podemos descrever tudo em 3 passos:

1. A inserção do evento click deve ser feita no load do formulário, assim devemos ter uma função no evento OnLoad. Devido o SubGrid só ficar ativo quando o registro já exista, tive que forçar o salve do formulário quando for um novo registro:

   // FORM TYPE's
   var FORM_TYPE_CREATE = 1;
   var FORM_TYPE_UPDATE = 2;
   var FORM_TYPE_READ_ONLY = 3;
   var FORM_TYPE_DISABLED = 4;
   var FORM_TYPE_QUICK_CREATE = 5;
   var FORM_TYPE_BULK_EDIT = 6;
   
   // FUNCTION: OnLoad
   function OnLoad() {
       var nomeSubGrid = "EntidadeSubGrid";
   
       // Obtém o Type do Form
       var formType = Xrm.Page.ui.getFormType();
   
       // Verifica o Tipo(estágio) em que o registro está sendo requisitado
       switch (formType) {
           case FORM_TYPE_CREATE:
               {
                   // *** Quando for uma novo formulário o SugGrid aparece desabilitado, para isso forçamos um Save para depois utilizar o form ***
   
                   // Salva Formulário
                   Xrm.Page.data.entity.save();
   
                   break;
               }
           default:
               {
                   // Attach o evento Refresh no SubGrid
                   setTimeout("AttachOnRefreshSubGrid('" + nomeSubGrid + "');", 1000);
   
                   // Attach o evento Click no SubGrid
                   setTimeout("AttachOnClickSubGrid('" + nomeSubGrid + "')", 1500);
   
                   break;
               }
       }
   }
   

2. No código acima, note que existem dois eventos sendo adicionados, um no refresh e o outro no click, o refresh só existe para que na paginação do SubGrid a inserção do click das linhas seja atualizada. A função de cada um é apenas “injetar” um javascript com o evento desejado, vejam:

   /// FUNCTION: AttachOnClickSubGrid
   /// DESCRIPTION: Adiciona o evento Click no SubGrid para capturar o click das linhas
   function AttachOnClickSubGrid(subgridname) {
       var gridControl = document.getElementById(subgridname).control;
       var recordsFromInnerGrid;
   
       // Tenta recuperar os registros do Grid
       try {
           // *** PRÉ POLARIS ***
           recordsFromInnerGrid = gridControl.getRecordsFromInnerGrid();
       } catch (e) {
           // *** POLARIS ***
           recordsFromInnerGrid = gridControl.GetRecordsFromInnerGrid();
       }
   
       // Percorre por todas as linhas do subgrid adicionando evento onclick
       for (var rowNo = 0; rowNo < recordsFromInnerGrid.length; rowNo++) {
           var linha = recordsFromInnerGrid[rowNo][3];
   
           // Oculta checkbox
           linha.cells[0].getElementsByTagName("input")[0].style.display = "none";
   
           // IE 9
           if (linha.attachEvent) {
               linha.attachEvent("onclick", (function (that, handler_ary) {
                   return function () {
                       SelecionarLinhaGrid(that, handler_ary);
                       return false;
                   }
               })(subgridname, linha));
           }
           // Todos os navegadores, menos o IE 9
           else {
               linha.addEventListener("click", (function (that, handler_ary) {
                   return function () {
                       SelecionarLinhaGrid(that, handler_ary);
                       return false;
                   }
               })(subgridname, linha), false);
           }
       }
   }
   
   /// FUNCTION: AttachOnRefreshSubGrid
   /// DESCRIPTION: Adiciona o evento Refresh no SubGrid para que na paginação do SubGrid seja adicionado o evento Click nas linhas
   function AttachOnRefreshSubGrid(subgridname) {
       var subgrid = document.getElementById(subgridname);
   
       if (subgrid) {
           // Tenta recuperar os registros do Grid
           try {
               // *** POLARIS ***
               subgrid.control.add_onRefresh((function (that, handler_ary) {
                   return function () {
                       AttachOnClickSubGrid(that, handler_ary);
                       return false;
                   }
               })(subgridname));
           } catch (e) {
               // *** PRÉ POLARIS ***
               subgrid.attachEvent("onrefresh", (function (that, handler_ary) {
                   return function () {
                       AttachOnClickSubGrid(that, handler_ary);
                       return false;
                   }
               })(subgridname));
           }
       }
   }
   

3. Por fim, vamos a onde a “mágica” acontece, a função “SelecionarLinhaGrid”, lá colocaremos a inteligência do click, criei um campo no formulário para armazenar uma coluna do SubGrid:

   /// FUNCTION: SelecionarLinhaGrid
   /// DESCRIPTION: Realiza as ações necessárias ao clicar em uma linha do SubGrid
   function SelecionarLinhaGrid(subgridname, linha) {
       // *** Aqui use o "debugger;" para entender melhor o HTML, como a posição das células e ID ***
       // debugger;
       // EXEMPLO:
   
       var ID = linha.cells[0].getElementsByTagName("input")[0].id.replace("checkBox_{", "").replace("}", "");
   
       // Verifica se a Coluna está em branco
       if (linha.cells[1].innerText != "") {
           // *** POLARIS ***
           var nomeLinhaSubGrid = linha.cells[1].innerText;
       }
       else {
           // *** PRÉ POLARIS ***
           var nomeLinhaSubGrid = linha.cells[2].innerText;
       }
   
       Xrm.Page.getAttribute("new_nomelinhasubgrid").setValue(nomeLinhaSubGrid);
   }
   

Exportei a solução completa (não esqueça de alterar a extensão para “ZIP”):
OnclickSubgrid_1_1_0_0 (ALTERAR A EXTENSÃO PARA “ZIP”)

PS: Atualizado para funcionar com o Polaris.

Espero ter ajudado!

[]’s,

Tiago Cardoso