<link href="~/js/chosen.css" rel="stylesheet" type="text/css" runat="server" />
    <script src="<%#ResolveUrl("~") %>js/chosen.jquery.js" type="text/javascript"></script>



<asp:DropDownList ID="ddlAssignGroup" class="form-control"
     CssClass="chosen-select" Width="157px" runat="server">
</asp:DropDownList>


  <script type="text/javascript">

        var config = {
            '.chosen-select': {},
        }
        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }
      </script>


Out put

at this point. everything is ok. but when this page is postback then this option is gone.
then i have find a solution by using this javascript code.

    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function (s, e) {
            var config = {
                '.chosen-select': {},
            }
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }
        });
    </script>


this code actually fire when a post back occurs.

Jquery and css link
https://docs.google.com/file/d/0B2qzKDIYFsGgWFZHMFRDNU50SDg/edit

Datagrid  Date column format : 
<sdk:DataGridTextColumn Header="From" IsReadOnly="True"
                                                Binding="{Binding FromDate, StringFormat='{}{0:MM/dd/yyyy}'}" Width="auto"/>


<sdk:DataGridTextColumn Header="Discharge Date"
                                                Binding="{Binding DischargeDate, StringFormat='{}{0:MM/dd/yyyy a\\t h:mm tt}'}"/>