(קרדיט ליוסי גולדברג על הפוסט הזה)
מי שעדיין לא מכיר את הפקד מוזמן לקרוא עליו בלינק למעלה, בפוסט הזה נדבר על הדברים הבאים:
איך מעצבים אותו ב - Windows Style.
איך מוסיפים מ - Javascript עוד ערכים.
איך מנקים אותו מערכים.
איך מקבלים ב - javascript את מה שהמשתמש בחר.
איך נרשמים ל - onchange ב - javascript.
השימוש הראושני בו הוא פשוט.
השלבים הראשונים משותפים לכל פקדי ה - ajax toolkit
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();
}