Dialog

[Hrvoje Voda]

I'm using this code to show dialog popup.

But after clicking button btnNOvo to open dialog it disapears after two seconds. Why?

 <asp:UpdatePanel ID="pnlLeft" runat ="server">                               

                <ContentTemplate>              

                  <div style="width:100%;vertical-align:top;">     

                       

                              <div style ="margin-left:20px;margin-right:20px;">

                                     <GraweControls:graweGrid id ="gvMaterijali" runat="server" />   

                                  <asp:Button ID="btnNovo" runat="server" CssClass ="button" Text = "UNOS" OnClientClick ="return openDialog()" OnClick ="btnNovo_Click" />&nbsp;&nbsp;&nbsp;

                                  <asp:Button ID="btnPromjena" runat ="server" CssClass ="button" Text ="PROMJENI" OnClick ="btnPromjena_Click" OnClientClick ="return openDialog()" />&nbsp;&nbsp;&nbsp; 

                                  <asp:Button ID="btnBrisi" runat="server" CssClass ="button" Text ="OBRIŠI"  OnClick ="btnBrisi_Click" />&nbsp;&nbsp;&nbsp; 

                                  <asp:Button ID="btnSlike" runat="server" CssClass ="button" Text ="SLIKE.."  OnClick ="btnSlike_Click" /> 

                              </div>

                       </div>                                 

                  

                 </ContentTemplate>

                 <Triggers>

                     <asp:AsyncPostBackTrigger ControlID="gvMaterijali" />               

                 </Triggers>          

             </asp:UpdatePanel>

                     

            

               <asp:UpdatePanel ID="pnl" runat ="server" >

                <ContentTemplate>

                 <ej:Dialog ID="dialogMaterijal" Title="UNOS / PROMJENA MATERIJALA" ShowOnInit="false" CloseOnEscape ="true" CssClass ="popup"  runat="server" Width="750">

                       <DialogContent>                                                                                         

                              <div style ="display:inline-block; float:left;width:65%; height:500px;">    

                                     ID materijala<br />               

                                    <asp:Label ID="lblID" runat="server" /><br /><br />

                                    Grupa materijala<br />

                                   <asp:DropDownList ID="ddlGrupaMaterijala" runat="server"></asp:DropDownList><br /><br />

                                    Materijal<br />

                                    <asp:TextBox ID="txtMaterijal" runat="server" Width="550px"></asp:TextBox><br /><br />

                                    Serijski broj<br />

                                    <asp:TextBox ID="txtSB" runat="server"></asp:TextBox><br /><br />

                                    Jedinična cijena<br />

                                    <asp:TextBox ID="txtCijena" runat="server" Width="70px"></asp:TextBox><br /><br />

                                    Popust<br />

                                    <asp:TextBox ID="txtPopust" runat="server" Width="80px"></asp:TextBox><br /><br />

                                    Stanje zaliha<br />

                                    <asp:TextBox ID="txtZalihe" runat="server" Width="80px"></asp:TextBox><br /><br />

                                    Opis<br />

                                    <asp:TextBox ID="txtOpis" runat="server" Rows ="5" Width ="447px" TextMode="MultiLine"></asp:TextBox><br /><br />     

                                  <asp:Button ID="btnSave" runat="server" CssClass ="button" OnClick = "Save" />                                        

                             </div>    

                                    <asp:Image ID="imgMat" runat="server" Height="200" Width="200" CssClass ="imgFilter" />&nbsp;

                                    <ajax:AsyncFileUpload OnClientUploadError="uploadError" CssClass ="FileUploadClass"

                                        OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1" Width="120px" UploaderStyle="Modern"

                                        CompleteBackColor = "White" UploadingBackColor="#CCFFFF"  ThrobberID="imgLoader" OnUploadedComplete = "FileUploadComplete" 

                                        Font-Size="12" Font-Names="Courier" />            

                                            <asp:Image ID="imgLoader" runat="server" ImageUrl = "../Images/loading.gif"  />

                                            <asp:Label ID="lblMesg" runat="server" Text="" />           

        

         <ej:Tab ID="tab1" runat="server" EnableAnimation="True" HeaderPosition="Top" ShowRoundedCorner="True">

                                          <Items>

                                              <ej:TabItem Text="Slike materijala">

                                                  <ContentSection>

                                                      <table class="tblMiddle">

                                                          <tr>

                                                              <td>

                                                                  <hr style="color: #666666" />

                                                                  <div id="images" style="height: 300px; width: 200px; overflow: Auto;margin-left:10px;margin-top:0px;">

                                                                      <asp:DataList ID="DataList1" runat="server" RepeatColumns="8" RepeatDirection="Horizontal" 

                                                                          RepeatLayout="Flow" ShowFooter="false" BorderStyle="Solid" BorderWidth="0.5" GridLines="Horizontal" 

                                                                           OnItemCommand="dlImages_OnItemCommand" BorderColor="#CCCCCC">

                                                                          <ItemTemplate>

                                                                              <asp:ImageButton ID="menuBtn" runat="server" CssClass="menuImg" Height="50"

                                                                                  CommandArgument='<%# Eval("Value") %>'

                                                                                   ImageUrl='<%# Eval("Value") %>' Width="70"  CommandName="ImageButtonClick" />

                                                                              &nbsp;&nbsp;&nbsp;

                                                                          </ItemTemplate>

                                                                      </asp:DataList>

                                                                  </div>

                                                                  <hr style="color: #666666" />

                                                              </td>                                                              

                                                          </tr>                                                          

                                                      </table>

                                                  </ContentSection>

                                              </ej:TabItem>

                                          </Items>

                                      </ej:Tab>                                

                        </DialogContent>

                 </ej:Dialog>

                </ContentTemplate>

               </asp:UpdatePanel>

 <script>

   

        function openDialog() {

            $("#dialogMaterijal").ejDialog("open");

        }

        function closeDialog() {

            $("#dialogMaterijal").ejDialog("close");

        }

   

              

    </script>   

[Selvamani Sankarappan]

Hi Hrvoje, 

Thanks for using Syncfusion products, 

We have checked your code example. As default, the ASP Button click event will do the post back. So, the dialog does not open after some time. To prevent the post back you have to use the following code example:   

[aspx] 

<asp:Button ID="btnOpen" Text="open dialog" runat="server" OnClientClick="openDialog();return false;" /> 

 

 

Refer the following link: 

https://stackoverflow.com/questions/7547945/disable-postback-at-click-on-a-button 

 

Note: The reported problem occurs only with ASP button since its default behavior will do post on click action. You can use Syncfusion button also to overcome the issue.    

   

We have prepared a sample based on your code. Please get the sample from the following link:   

https://www.syncfusion.com/downloads/support/forum/127197/ze/DialogSample-2119666231 

 

   

Regards,   

Selvamani S.   

[Hrvoje Voda]

Now it works, but when I want to show selected row on dialog nothing is showing.

When I press btnPromjena_Click it doesnt fill textboxed with data:

 Protected Sub btnPromjena_Click(ByVal sender As Object, ByVal e As EventArgs)

         lblID.Text = Session("ID")

        ddlGrupaMaterijala.SelectedItem.Text = Session("Grupa materijala")

        txtMaterijal.Text = Session("Materijal")

        txtOpis.Text = Session("Opis")

        txtPopust.Text = Session("Popust")

        txtCijena.Text = Session("Cijena")

        txtZalihe.Text = Session("Stanje zaliha")

        imgMat.ImageUrl = Session("img")

End Sub

[Selvamani Sankarappan]

Hi Hrvoje,   

  

Thanks for the update.   

  

We were unable to reproduce the reported issue, “does not fill textbox with post back data when clicking the button”. We have prepared a sample based on your shared code example. Please refer to the sample from the following location:   

https://www.syncfusion.com/downloads/support/forum/127197/ze/DialogVB-866555392   

   

If you still face any difficulties, kindly let us know. We will be happy to help you.   

  

Regards,   

Selvamani S.   

[Hrvoje Voda]

This is working, but It's taking to long to show dialog.

Why?

[Selvamani Sankarappan]

Hi Hrvoje,   

Thanks for the update, 

In our previous shared sample, the dialog will take only the post back times (<60ms) to open.  Can you please share the following details? 

1)      As you have mentioned as time take too long for dialog open, does this appears in your application level? Or with our shared sample from our side? 

2)      Are you using any animation Speed for dialog open in your application level? 

3)      There will not be too long time delay in opening the Dialog but it depends on the data fetch time from post back. Could you please share us a demo on delay with showing Dialog after post? 

If you still face any difficulties, kindly get back to us with issue re-producible sample. We will be happy to help you. 

Regards, 

Selvamani S. 

 

[Hrvoje Voda]

I'm adding data to dropdownlist - 5 rows. and loading images - small size. This all work fast on normal screen. but in dialog it takes 3-4 sekunds to open.

Also, grid is slow on selecting row. Is it because it's user control?

[Hrvoje Voda]

Also, I'm using FileUpload(btnImages) inside Dialog, but I get an error: A control with ID 'btnImages' could not be found for the trigger in UpdatePanel '

[Selvamani Sankarappan]

Hi Hrvoje,   

  

Thanks for the update.   

  

Query “I'm adding data to dropdownlist - 5 rows. and loading images - small size. This all work fast on normal screen. but in dialog it takes 3-4 sekunds to open.”   

We have rendered the ASP DropDown and images in the Dialog.  We have also added the File Upload control in Dialog based on the previously shared code. Yet, we were unable to reproduce the reported issue. Please refer to the following sample:   

https://www.syncfusion.com/downloads/support/forum/127197/ze/DialogVB1013210506   

   

Please check the above sample. If you continue to face difficulties, kindly modify the sample to reproduce the issue. It would be nice if you could share an issue reproducing video or demo application to validate the issue further.   

Query? grid is slow on selecting row. Is it because it's user control?  

We have analyzed this requirement and we are unable to reproduce the reported issue at our end. Could you please share the following details to us it would be helpful for us to find the solution at earliest?  

        1.Share the Essential studio version details?  

        2.Do you enable multiple selection? 

        3. How do you select grid rows?  

        4.Please share the sample if possible? Or please share the grid code example.  

 

Regards,   

Selvamani S. 

[Hrvoje Voda]

Query? grid is slow on selecting row. Is it because it's user control?  

We have analyzed this requirement and we are unable to reproduce the reported issue at our end. Could you please share the following details to us it would be helpful for us to find the solution at earliest?  

        1.Share the Essential studio version details?  

        2.Do you enable multiple selection? 

        3. How do you select grid rows?  

        4.Please share the sample if possible? Or please share the grid code example. 

1. Visual Studio 2015

2. No

3. I use this code:

     in user control -

                                           Protected Sub Grid_RowSelected(sender As Object, e As Syncfusion.JavaScript.Web.GridEventArgs) Handles grd.ServerRowSelected

        data = TryCast(e.Arguments("data"), Dictionary(Of String, Object))

        RaiseEvent grdSelectedRow(sender, e)

    End Sub

[Hrvoje Voda]

reply on above mail:

    also in user control:

[Hrvoje Voda]

 Public Event grdSelectedRow As EventHandler

in aspx page:

Protected Sub GridView_SelectedRow()

        For Each keyval As KeyValuePair(Of String, Object) In gvMaterijali.data

            Select Case keyval.Key

                Case "ID"

                    Session("ID") = Convert.ToInt32(keyval.Value).ToString()

                Case "Grupa materijala"

                    Session("Grupa materijala") = keyval.Value

                Case "Materijal"

                    Session("Materijal") = keyval.Value

                Case "Opis"

                    Session("Opis") = keyval.Value

                Case "Popust"

                    Session("Popust") = keyval.Value

                Case "Cijena"

                    Session("Cijena") = keyval.Value

                Case "Stanje zaliha"

                    Session("Stanje zaliha") = keyval.Value

                Case "ImageID"

                    If keyval.Value = 9999 Then

                        Session("img") = "~/_COMMON/Images/noimage.png"

                    Else

                        Session("img") = "~/_COMMON/Images/UMA/" + keyval.Value.ToString() + ".jpg"

                    End If

            End Select

        Next

    End Sub

also in Page_Load:

 AddHandler gvMaterijali.grdSelectedRow, AddressOf GridView_SelectedRow

[Hrvoje Voda]

Also, you are not using FileUpload .

button for save is not used.

[Selvamani Sankarappan]

Hi Hrvoje,   

Thanks for the update.   

Query “you are not using FileUpload .button for save is not used.” 

As previously shared sample, we have used the ASP File Upload control because you mentioned in that query “Also, I'm using FileUpload(btnImages) inside Dialog, but I get an error:” please refer to the following screen shot: 

 

 

Can you please share the following details? 

1)      Are you using ej UploadBox, ASP File Upload or AJAX AsyncFileUpload. If you using ej UploadBox component, please refer to the following demo link: 

https://asp.syncfusion.com/demos/web/uploadbox/defaultfunctionalities.aspx 

 

Query? grid is slow on selecting row. Is it because it's user control?   

We have tried to reproduce the selection issue but we are unable to reproduce the reported issue.  

 

Please find the code example.  

  

  

<ej:Grid ID="Grid" runat="server" EnableViewState="False" AllowPaging="True" AllowGrouping="True"   

            OnServerRowSelected="DefaultEvents_OnServerRowSelected" OnServerToolBarClick="DefaultEvents_OnServerToolBarClick" >  

           <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings>  

            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>  

            <Columns>  

               <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True"  TextAlign="Center" Width="100"/>  

                <ej:Column Field="CustomerID" HeaderText="Customer ID" TextAlign="Center"   Width="100"/>  

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Center"   Width="100" />  

                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Center"    Format="{0:C}" Width="100" />  

            </Columns>  

        </ej:Grid>  

  

  

Please refer to the following online sample link for your reference.  

 

https://asp.syncfusion.com/demos/web/grid/defaultserverevents.aspx.  

  

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample_-_Copy-120142125-628691454.zip.  

  

 

If you still face any difficulties, kindly share the sample for based on your requirement to re-produce the issue at our end. 

Regards, 

Selvamani S.