ajax control toolkit combobox – style, add item from javascript, clear items from javascript, get selected value

3 באוקטובר 2010

תגיות: , ,
4 תגובות


 




בפוסט זה נראה איך אפשר לעבוד עם Ajax:ComboBox


 


 

(קרדיט ליוסי גולדברג על הפוסט הזה)

 

 

מי שעדיין לא מכיר את הפקד מוזמן לקרוא עליו בלינק למעלה, בפוסט הזה נדבר על הדברים הבאים:

 



איך מעצבים אותו ב – Windows Style.

 

איך מוסיפים מ – Javascript עוד ערכים.

 

איך מנקים אותו מערכים.

 

איך מקבלים ב – javascript את מה שהמשתמש בחר.

 

איך נרשמים ל – onchange ב – javascript.

 

 

 

השימוש הראושני בו הוא פשוט.

 

השלבים הראשונים משותפים לכל פקדי ה – ajax toolkit

 

 

1. הוספת reference ל – dll (אפשר להוריד מכאן)

 

2. הוספת השורות הבאה בקונפיג

 



<pages>


  <controls>


    <add assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagPrefix="ajax"/>


  </controls>


</pages>


3. הוספת script manager של ה – toolkit

 



<ajax:ToolkitScriptManager ID="sm1" runat="server">


</ajax:ToolkitScriptManager>


 

4. הגדרת ה – combo

 



<ajax:ComboBox ID="ComboBox1"


        runat="server"


        AutoPostBack="False"


        DropDownStyle="DropDownList"


        AutoCompleteMode="SuggestAppend"


        CaseSensitive="False"


        ItemInsertLocation="Append"


        DataTextField="Name"


        DataValueField="Id">


</ajax:ComboBox>


 

אני לא אעבור כרגע על המאפיינים השונים (תוכלו לקרוא באתר של ajax toolkit).

 

נתחיל עם העיצוב – כשתקראו על הפקד באתר שלהם תראו שאת המאפיין CssClass אפשר להגדיר ל – WindowsStyle (למשל) כדי שזה יראה כמו הפקדים של windows, מה שהם לא מספרים שם שזה ה – style שצריך להוסיף. (התמונה מצורפת בדוגמת הקוד להורדה)

 



<style type="text/css">


.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer INPUT


{


    border-bottom: #7f9db9 1px solid;


    border-left: #7f9db9 1px solid;


    padding-bottom: 0px;


    margin: 0px;


    padding-left: 5px;


    padding-right: 0px;


    height: 18px;


    font-size: 13px;


    border-top: #7f9db9 1px solid;


    border-right: 0px;


    padding-top: 1px;


}


.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer BUTTON


{


    background-image: url(windows-arrow.gif);


    border-bottom: 0px;


    border-left: 0px;


    padding-bottom: 0px;


    margin: 0px;


    padding-left: 0px;


    width: 21px;


    padding-right: 0px;


    background-position: left top;


    height: 21px;


    border-top: 0px;


    border-right: 0px;


    padding-top: 0px;


}


.WindowsStyle .ajax__combobox_itemlist


{


    border-bottom-color: #7f9db9;


    border-top-color: #7f9db9;


    border-right-color: #7f9db9;


    border-left-color: #7f9db9;


    font-family: Arial;


    font-size: 12px;


}


</style>


 

 

נניח שהקוד בצד השרת נראה כך:

 



DataTable table = new DataTable();


table.Columns.Add("Id");


table.Columns.Add("Name");


 


table.Rows.Add("1", "Shlomo");


table.Rows.Add("2", "Yossi");


table.Rows.Add("3", "Noam");


table.Rows.Add("4", "Ron");


table.Rows.Add("5", "Tomer");


table.Rows.Add("6", "Shlomo");


table.Rows.Add("7", "Dudu");


table.Rows.Add("8", "Nama");


table.Rows.Add("9", "Roni");


table.Rows.Add("10", "Sulamit");


 


ComboBox1.DataSource = table;


ComboBox1.DataBind();


 

 

כעת אנו רוצים בצד הלקוח להרשם ל – oncahnge ולדעת מה ה – value שהמשתמש בחר -

שני בעיות – הראשונה יש להם כנראה באג וה – value לא נשלח ללקוח, שנייה הם לא ממשו onchange בצד הלקוח.

 

הפיתרון לבעייה הראשונה זה להוסיף את הקוד הבא (לאחר ה – DataBind)

 



foreach (ListItem item in ComboBox1.Items)


{


    item.Attributes["value"] = item.Value;


}


 

הפיתרון לבעייה השנייה זה להירשם לכל האירועים של הפקד (בצד הלקוח) ולבדוק האם מדובר ב – selectedChange, כדי לעשות את זה נצטרך אחרי טעינת העמוד להפעיל את הפונקצייה הבאה

 



function AddOnChangeEvent(id) {


    $find(id).add_propertyChanged(function(sender, e) {


        if (e.get_propertyName() == 'selectedIndex') {


            var selectedIndex = sender.get_selectedIndex();


            var newValue = $get(id).getElementsByTagName('LI')[selectedIndex].value;


 


            alert(newValue);


        }


    })


}


 

הפונקצייה מקבלת את ה – id ובכל פעם שמאפיין מסויים ישתנה בפקד וזה יהיה selectedIndex נגיע לפונקצייה שלנו ונוכל להוציא את ה – value שהמשתמש בחר (כזכור צריך להוסיף את ה – value ידנית לאחר קריאה ל – DataBind)

 

לכאורה צריך לקרוא למתודה הזאת בזמן onload של העמוד – אבל מסתבר שקריאה ל – find תחזיר null ב – 10 מילי-שניות הראשונות של טעינת העמוד מכיוון שהוא עדיין לא סיים לבנות את האובייקט, יכול להיות ש – jQuery יכול לעזור כאן, אבל אם אתם לא רוצים תוכלו לכתוב את הקוד הבא: (אחרי ההגדרה של ה – ScriptManager)

 



<script type="text/javascript">


    Sys.UI.DomEvent.addHandler(window, "load", function() {


        setTimeout("AddOnChangeEvent('<%=ComboBox1.ClientID %>')", 10);


    });


</script>


מה שזה אומר – שבטעינת העמוד נפעיל את פונקצייה שמשתמש ב – setTimeout כדי להפעיל לאחר 10 מילי-שניות את מתודת הרישום לאירוע.

 

 

 

כדי למחוק את הערכים מהקומבו בצד הלקוח תוכלו להפעיל את הפונקצייה הבאה:

 



function DeleteAllComboBoxItems(DdlId) {


    var box = $find(DdlId);


    var items = box._optionListItems;


    items.splice(0, items.length);


    var listctl = box.get_optionListControl();


    while (listctl.childNodes.length > 0) {


        listctl.removeChild(listctl.childNodes[0]);


    }


    var textbox = box.get_textBoxControl();


    textbox.value = "";


}


 

כדי להוסיף ערכים חדשים תוכלו להפעיל את הפונקצייה הבאה:

 



function AddNewItemToCombo(combo, text, value) {


    // delete the old height so the new height will calculate with the new item


    combo._optionListHeight = null;


 


    // build the new Item with a test value  


    var newItem = document.createElement('LI');


    newItem.innerHTML = text;


    newItem.amdValue = value;


    newItem._textIsEmpty = "false";


 


    // add this Item


    combo._optionListControl.appendChild(newItem);


 


    // we need to update the ComboBox' popupBehavior with the new OptionList  


    // dispose of popup extender


    if (combo._popupBehavior) {


        combo._popupBehavior.remove_showing(combo._popupShowingHandler);


        combo._popupBehavior.remove_shown(combo._popupShownHandler);


        combo._popupBehavior.remove_hiding(combo._popupHidingHandler);


        combo._popupBehavior.dispose();


        combo._popupBehavior = null;


    }


 


    // clear old Handlers and Delegates


    combo.clearHandlers();


    combo.clearDelegates();


 


    // initialize New OptionList, create new Delegates and Handlers


    combo.createDelegates();


    combo.initializeOptionList();


    combo.addHandlers();


}

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים

4 תגובות

  1. Lucienne Plotzker 25 במאי 2011 ב 21:30

    One of the more protected sorts of an important keyless attach will be biometric style. (keyless locks) Biometric devices avoid the use of buttons, search within business cards or maybe pins to provide access. These particular kinds usage biometric technologies as a way to deliver the means to access any building up as well as property. Your biometric solutions that is definitely normally put into use is a encoding of the fingerprint on your deal with or even padlock with the doorstep. It will require the latest combination on the finger prints of the people which should've having access to the unique making and even residential home. The enrollment technique supplies a layout and / or piece of the model's fingerprint to supply a compare as soon as somebody attempts to entry the dwelling and even household. Epidermis wild hair that happens to be keyless, biometric tresses are thought that should be probably the most acquire.

    להגיב
  2. Mervin Demiter 29 במאי 2011 ב 13:54

    Loud breathing may be the respiratory system framework moaning that produces reasonable with oxygen routine through breathing throughout sleep. All the sensible is delicate, and yet concerning other hand, it could be over the top and then infuriating. Ordinarily a loud snoring guy is usually unearthed by your spouse. ( snoring ) Snoring can on occasion impact the life-style of any someone. It is usually mathematically shown the fact that spouse contact tend to be increased if noisy inhalation might be fixed with surgery.
    Snoring arises any time a man or woman arrives at midst their age along with outside of, while the guitar neck can become smaller plus the muscle around the tonsils cuts down. Ordinarily a boyfriend has air passages that happen to be smaller than a lovely women. Which is why a guy in general breathes noisily while sleeping far more versus gal. Heap regarding evening breathing is usually that sinus in addition to nose conditions might prohibit discuss in turn earning all the inhalation more and more difficult. Barring typically the neck muscles is also because of chiseled falling asleep healthy posture, because the poise may cause sleep in to the neck of the guitar. Occasionally, snoring is as a result of fat and additionally weak muscle on a family that might be over weight along with overweight. Beer, smoking cigarettes and medications eating boosts structure rest that will be responsible for even more loud breathing.
    There will be anti-snore medications that are available nowadays regarding loud night breathing problem. Generally, any heavy snoring tolerant have got to speak with all of the Ear canal, Nose area and also Neck doctor or maybe also known as Ing. A piece of equipment known as Ongoing Confident Airway Anxiety (CPAP), emits pressurised ticket through a disguise that is definitely currently being placed via the affected individual to the face and / or encounter. This way, your air passage will be wide open whilst sleeping. Laser assisted uvulopalatoplasty or LAUP together with somnoplasty eliminates the various components within the light taste that creates noisy inhalation, with the use of lasers or simply rf signals. Yet, this valuable new medicinal methods need more homework and look at.
    Research in addition demonstrates this loud breathing will be the result of certain food consumptions. Nutrients like great foodstuff just like rice, whole milk, soymilk and alcoholic drinks tend to make heavy snoring rather more serious. So, it will always be help competent to never carry some described cuisine or simply daily meals before going to bed, to prevent loud snores.

    להגיב
  3. يب10 בפברואר 2013 ב 6:42

    روح أستحمى الأول يا معفن يا معفن وكمان أحلق شعرك اللى شبه المجانين ده
    نسيت أثولك صحيح (يا معفن ) :)

    להגיב