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.
Unfortunately, activation email could not send to your email. Please try again.

Add check all option in popup list

Thread ID:

Created:

Updated:

Platform:

Replies:

124630 Jun 19,2016 11:13 PM Jun 21,2016 08:27 AM ASP.NET Web Forms 4
loading
Tags: DropDownList
Danferd Lan
Asked On June 19, 2016 11:13 PM

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
Replied On June 19, 2016 11:14 PM


Kasithangam C [Syncfusion]
Replied On June 20, 2016 05:19 AM

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
Replied On June 20, 2016 05:34 AM

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 [Syncfusion]
Replied On June 21, 2016 08:27 AM

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
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;