Question

I have a big grid of values. At first, each values was a drop down. But it was very slow to load (+15 sec).
So I would like to use text in my grid (a regular table ) and use a dropdownlist on the double click of the text .
Is this possible ?
Also, is it possible to use a telerik drop down ?

Here’s an example : A grid containing color (ex: blue, blue, red, yellow….).
When double click on the word, a dropdown will replace the selected text. The dropdown will contain all available color : blue, red, yellow. After that, when the value is selected, the drop down would disapear and the text will display the new value.

So far, I got this :

$(function () {
    $('.colorGrid').dblclick(function () {
         debugger;
        $(this).html("<select class=\"resultMenu\" id=\"resultMenuID\" size=\"1\"></select>");
        $(this).children("select").append('<option value=1>Black</option>');
        $(this).children("select").append('<option value=2>Red</option>');
        $(this).children("select").append('<option value=3>Blue</option>');
        $(this).children("select").append('<option value=4>Yellow</option>');
    });
    $('#resultMenuID').change(function (event) {
        debugger;
        $(this).html("<td>test</td>");
    });
});

I’m close to my goal. Now I need to put back the result of the selected in a td tag, and the select must disappear! The change select function is never call. Does anyone know why?

Answer 1

If it takes +15 seconds, then you definitely have to go for AJAX or hardcoding the dropdownvalues in javascript strings.

As told by MrOBrian, I can’t provide you the code solely based on your one or two line problem. You have to upload your existing problem code to get a solution from here. However I can give you an idea.

Say this is your colour block

<div id="colour-block-list">
    <div id="red-block" class="colour-block">
    Red
    </div>
</div>

You have to add an onclick handler.

$(".colour-block").click(function(){

  //call your ajax or get values from hard coded javascript string
   $(this).html("<select></select>");
   $(this).children("select").append(list_of_options);


});