We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add check all option in popup list

I was trying to add the "Check All" option in the popup list of the dropdownlist by referring to this link but the the popup list is showing nothing. Anything goes wrong with my code?


<ej:DropDownList ID="ddlMulPlumber" runat="server" ClientSideOnCreate="OnCreate" DataSourceCachingMode="Session"
EnableFilterSearch="True" HeaderTemplate="<div class='temp'><input id ='check' type='checkbox'"
MultiSelectMode="Delimiter" ShowCheckbox="true" WatermarkText="Pilih Tukang Paip/Kontraktor" Width="300px">
</ej:DropDownList>

<script type="text/javascript">
function OnCreate(args) {
$("#check").ejCheckBox({ text: "Check All", change: "onallChange" });
}

function onallChange(args) {
window.flag = true;
var obj = $("#<%=ddlMulPlumber.ClientID%>").ejDropDownList("instance");
if (args.isChecked) obj.checkAll();
else obj.uncheckAll();
window.flag = false;
}
</script>

Private Sub LoadPlumber()
Try
GV.gvSql = "SELECT TEXT, VALUE FROM TABLE_PLUMBER"
GV.CreateDataTable(DB, GV.gvSql, cnnMain, True, True)

ddlMulPlumber.DataTextField = "TEXT"
ddlMulPlumber.DataValueField = "VALUE"
ddlMulPlumber.DataSource = GV.gvDataTable.DefaultView.ToTable
Catch ex As Exception
SystemErrorsAlert("LoadPlumber", ex.Message, Me.Page)
End Try
End Sub

[url=https://postimg.org/image/7dujklra9/][img]https://s32.postimg.org/7dujklra9/Untitled.png[/img][/url]

4 Replies

DL Danferd Lan June 20, 2016 03:14 AM UTC



KC Kasithangam C Syncfusion Team June 20, 2016 09:19 AM UTC

Hi Danferd, 
 
Sorry for the inconvenience caused. 
 
The cause of the issue” Check all option doesn’t show in popup list” is checkbox “input” element and “div” tag is doesn’t closed properly in our online documentation link. To resolve this issue, please close the checkbox input element and div tag in dropdownlist as shown in the below code:   
 
<code> 
 
    <ej:DropDownList ID="ddlMulPlumber" runat="server" ClientSideOnCreate="OnCreate" DataSourceCachingMode="Session" 
EnableFilterSearch="True" HeaderTemplate="<div class='temp'><input id ='check' type='checkbox'></div>" 
MultiSelectMode="Delimiter" ShowCheckbox="true" WatermarkText="Pilih Tukang Paip/Kontraktor" Width="300px"> 
</ej:DropDownList> 
 
</code> 
 
We will modify and update you once our online documentation is refreshed  
 
Regards, 
Kasithangam 



DL Danferd Lan June 20, 2016 09:34 AM UTC

Thanks. it worked.

But the check all option doesn't remain as checked after postback. How can i keep it checked after postback?

Besides that, I tried to get the selectedvalue value with the code below, during the first postback, i will get value like 'PLUMBER1 - PLUMBER NO. 1','PLUMBER2 - PLUMBER NO. 2' which is not what i want. But during the second postback, i will get the value in the form i want, 'PLUMBER1','PLUMBER2'. Anything goes wrong here?

Dim myArray() As String
myArray = ddlMultiSelect.SelectedItemsValue.ToArray

Dim myValue As String = ""

For iCounter = 0 To UBound(myArray) 'in this example loop through 0 to 3
If myValue = "" Then
myValue = "'" & myArray(iCounter) & "'"
Else
myValue = myValue & ",'" & myArray(iCounter) & "'"
End If
Next

Return myValue



KC Kasithangam C Syncfusion Team June 21, 2016 12:27 PM UTC

Hi Danferd,   
   
Thanks for using Syncfusion Products.   
   
Query 1: check all option doesn't remain as checked after postback. How can i keep it checked after postback?   
   
We have achieved your requirement please find the sample under the following location,   
 
Sample: Sample 
 
In this above sample, we have get the checkbox value and store it in hidden element of asp.net in the client side of checkbox change event and please find the below code,  
 
<code> 
<script> 
$("#check").ejCheckBox({ text: "Check All", change: "onallChange" }); 
 
function onallChange(args) { 
            window.flag = true; 
            var obj = $("#<%=ddlMulPlumber.ClientID%>").ejDropDownList("instance"); 
            if (args.isChecked) obj.checkAll(); 
            else obj.uncheckAll(); 
            var data = $("#check").data("ejCheckBox"); 
            $("#<%=HiddenField1.ClientID%>").val(data.checked()); 
            window.flag = false; 
        }                
            </script> 
 
 
    Protected Sub button10_Click(Sender As Object, e As Syncfusion.JavaScript.Web.ButtonEventArgs) 
        Dim val As Boolean = HiddenField1.Value 
    End Sub</code> 
 
Now, we have assigned the hidden element value in “checked” property of Checkbox control in the client side “create” event of DropDownlist control to maintain the checked state of check all option as shown below code:   
 
<code> 
function OnCreate(args) { 
 
            $("#check").ejCheckBox({ text: "Check All", change: "onallChange" }); 
            var data = $("#check").data("ejCheckBox"); 
            if($("#<%=HiddenField1.ClientID%>").val() == "true") 
                val=true; 
            else 
                val=false; 
            data.option("checked", val); 
        } 
</code> 
 
Query 2: I tried to get the selectedvalue value with the code below, during the first postback, i will get value like 'PLUMBER1 - PLUMBER NO. 1','PLUMBER2 - PLUMBER NO. 2' which is not what i want. But during the second postback, i will get the value in the form i want,'PLUMBER1','PLUMBER2'. Anything goes wrong here? 
 
We are able to reproduce the issue in our side. The fix for this issue will be available in our upcoming Vol2,2016 which is expected to be rolled out at the end of this month.    
  
Note: If you required patch in your specific version, could you please let us know your product version details? So that we will prepare patch and update you.   
 
Please let us know if you have any query.

Regards,
Kasithangam
 


Loader.
Up arrow icon