Add check all option in popup list

[Danferd Lan]

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]

[Danferd Lan]

[Kasithangam C]

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 

[Danferd Lan]

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

[Kasithangam C]

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