Koolgrid support rich client-side event. To register client-side event, you do:
$listbox->ClientEvents["OnSelect"] = "Handle_OnSelect";
>
<?php
/*
* This file is ready to run as standalone example. However, please do:
* 1. Add tags <html><head><body> to make a complete page
* 2. Change relative path in $KoolControlFolder variable to correctly point to KoolControls folder
*/
$KoolControlsFolder = "../../../../KoolControls";//Relative path to "KoolPHPSuite/KoolControls" folder
require $KoolControlsFolder."/KoolListBox/koollistbox.php";
//First listbox
$listbox = new KoolListBox("listbox");
$listbox->styleFolder = "default";
$listbox->AddItem(new ListBoxItem("Agentina"));
$listbox->AddItem(new ListBoxItem("Australia"));
$listbox->AddItem(new ListBoxItem("Brazil"));
$listbox->AddItem(new ListBoxItem("Canada"));
$listbox->AddItem(new ListBoxItem("Chile"));
$listbox->AddItem(new ListBoxItem("China"));
$listbox->AddItem(new ListBoxItem("Egypt"));
$listbox->AddItem(new ListBoxItem("England"));
$listbox->AddItem(new ListBoxItem("France"));
$listbox->AddItem(new ListBoxItem("Germany"));
$listbox->AddItem(new ListBoxItem("India"));
$listbox->AddItem(new ListBoxItem("Indonesia"));
$listbox->AddItem(new ListBoxItem("Kenya"));
$listbox->AddItem(new ListBoxItem("Mexico"));
$listbox->AddItem(new ListBoxItem("New Zealand"));
$listbox->AddItem(new ListBoxItem("South Africa"));
$listbox->AddItem(new ListBoxItem("USA"));
$listbox->TransferToId = "second_listbox";//Specify the id of second listbox that you wish to do transference.
$listbox->ButtonSettings->ShowTransfer = true;//Show transfer buttons
$listbox->ButtonSettings->ShowTransferAll = true;
$listbox->ClientEvents["OnSelect"] = "Handle_OnSelect";
$listbox->ClientEvents["OnDelete"] = "Handle_OnDelete";
$listbox->ClientEvents["OnReorder"] = "Handle_OnReorder";
$listbox->ClientEvents["OnTransfer"] = "Handle_OnTransfer";
$listbox->Init();
//Second listbox
$second_listbox = new KoolListBox("second_listbox");
$second_listbox->styleFolder = "default";
$second_listbox->Init();
?>
<form id="form1" method="post">
<div style="width:650px;">
<div style="padding-top:10px;padding-bottom:30px;float:left">
<?php echo $listbox->Render();?>
<?php echo $second_listbox->Render();?>
</div>
<div style="float:right;padding-top:10px;padding-left:30px;text-align:right;">
<b>Events Log</b>
<br/><hr/>
<div id="event_box" style="width:200px;height:160px;overflow:auto;text-align:left;">
</div>
</div>
<style type="text/css">
.cssLog
{
padding-bottom:5px;
}
</style>
<script type="text/javascript">
function Handle_OnSelect(item,arg)
{
write_log("Select item <b>"+item.get_text()+"</b>");
}
function Handle_OnDelete(item,arg)
{
write_log("Delete item <b>"+arg["Data"]["Text"]+"</b>");
}
function Handle_OnReorder(sender,arg)
{
write_log("Reorder item from <b>"+arg["From"]+"</b> to <b>"+arg["From"]+"</b>");
}
function Handle_OnTransfer(sender,arg)
{
write_log("Transfer item <b>"+arg["Data"]["Text"]+"</b>");
}
function write_log(_content)
{
document.getElementById("event_box").innerHTML +="<div class='cssLog'>"+_content+"</div>";
document.getElementById("event_box").scrollTop = 9999;
}
</script>
<div style="clear:both;"></div>
</div>
</form>