zone de saisie semi-automatique dans infragistics cellule ultrawebgrid

Question

Je veux un contrôle déroulant autocomplete dans la cellule ultrawebgrid en mode édition, de sorte que l'utilisateur peut taper les données et la valeur est remplie automatiquement si existe, les données invalides ne devraient pas être autorisés. Est-ce possible? Je ne veux pas utiliser webcombo, c'est trop lourd et je n'ai pas besoin d'une liste déroulante multi-colonnes. Je veux une liste déroulante simple, mais la possibilité pour l'utilisateur de taper comme Google suggère, mais toutes les valeurs mises en cache sur le client, pas d'aller-retour au serveur sur chaque coup de clé.

le contrôle doit être comme le suivant

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx

grâce,

RK

Answer 1

Je suis en mesure d'accomplir quelque chose comme ce que vous voulez. Voici ce que j'ai fait, mais je ne sais pas si cela fonctionne dans le paquet Infragistics:

1- J'ai téléchargé la boîte de texte de remplissage automatique JQuery UI 2- J'ai modifié un peu l'exemple donné sur le site. 3- J'ai appliqué quelque chose pour modifier toute ma liste déroulante ayant une classe nommée XYZ pour l'auto complète. J'ai utilisé un délégué, donc quand il génère une liste déroulante sur l'interface utilisateur, il le remplace automatiquement par ma zone de saisie automatique. Désolé, mon anglais n'est pas parfait, ce n'est pas ma langue maternelle.

est ici un code (Remarque: Dans l'exemple que je ne l'ai pas utilisé la fonction en direct() ou délégué()):

(function($) { 
    $.widget("ui.autoCompleteDDL", { 
     _create: function() { 
      var self = this; 
      var select = this.element.hide(); 
      var _isHoverUl = false; 

      var input = $("<input>") 
       .addClass("ig_Edit igtxt_Edit") 
       .width(select.width()) 
       .addClass(select.attr("class")) 
       .removeClass("AutoComplete DropDownList") 
       .click(function(e){this.select(); }) 
       .insertAfter(select) 
       .autocomplete({ 
        source: function(request, response) { 
         var matcher = new RegExp(request.term, "i"); 
         response(select.children("option").map(function() { 
          var text = $(this).text(); 
          if (!request.term || matcher.test(text)) 
           return { 
            id: $(this).val(), 
            label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), 
            value: text 
           }; 
         })); 
        }, 
        delay: 100, 
        select: function(e, ui) { 
         if (!ui.item) { 
          // remove invalid value, as it didn't match anything 
          $(this).val(""); 
          return false; 
         } 
         $(this).focus(); 
         select.val(ui.item.id); 

         self._trigger("selected", null, { 
          item: select.find("[value='" + ui.item.id + "']") 
         }); 

        }, 
        minLength: 1 
       }) 
       .blur(function(e){ 
         var curInput= $(this); 
         if (!_isHoverUl){ 
          setTimeout(function(){ 
           curInput.val(select.get(0).options[select.get(0).selectedIndex].text); 
           input.autocomplete("close"); 
          }, 150); // 150 is because of the autocomplete implementation. 
         } 
        }); 

      // Fix for the scrollbar in IE7/8 
      $("body") 
       .delegate(".ui-autocomplete", "mouseover", function(evt){ _isHoverUl = true;}) 
       .delegate(".ui-autocomplete", "mousemove", function(evt){input.focus();}) 
       .delegate(".ui-autocomplete", "mouseout", function(evt){_isHoverUl = false;}); 

      // Possibility of showing an arrow button. 
      $("<div>&nbsp;</div>") 
      .insertAfter(input) 
      .addClass("ui-icon-combo-arrow") 
      .mouseover(function(){$(this).toggleClass("ui-icon-combo-arrow ui-icon-combo-arrowH"); }) 
      .mouseout(function(){$(this).toggleClass("ui-icon-combo-arrow ui-icon-combo-arrowH"); }) 
      .removeClass("ui-corner-all") 
      .css({"display":"inline"}) 
      .position({ 
       my: "left center", 
       at: "right center", 
       of: input, 
       offset: "-1 0" 
      }) 
      .attr("title", "") 
      .click(function() { 
       // close if already visible 
       if (input.autocomplete("widget").is(":visible")) { 
        input.autocomplete("close"); 
        return; 
       } 
       // pass empty string as value to search for, displaying all results 
       input.autocomplete("search", ""); 
       input.focus(); 
      }); 

      input.val(select.get(0).options[select.get(0).selectedIndex].text); 
     } 
    }); 

})(jQuery); 

$(function() { 
    $("select.AutoComplete").autoCompleteDDL(); 
}); 

J'espère que cela a aidé