Dialog Content window Padding size

Question

How can I reduce padding size for this ModalContent window?I want my iframe to get to the edge of the window without leaving any space.

Muthukrishnan Kandasamy · Accepted Answer

Hi Joji,

Thanks for contacting Syncfusion support.

We have validated your requirements in EJ Dialog control. By default, padding was added for EJ Dialog content from the its referred default styles. To reduce the padding for EJ Dialog, we can override its default the styles in sample level by using class selector. Please refer the below code block.

<style>

#basicDialog.e-dialog.e-widget-content {

padding: 5px 1px;

}

</style>

We have prepared sample for your convenience, please refer to the below link for the sample.

https://jsplayground.syncfusion.com/1sfnlsp3

Description	Link
Getting started	https://help.syncfusion.com/aspnet/dialog/getting-started
How-to section	https://help.syncfusion.com/aspnet/dialog/how-to
API documentation	https://help.syncfusion.com/api/js/ejdialog

Please let us know, if you need any further assistance.

Regards,

Muthukrishnan K

Joji Kaju · Answer

Hello Muthukrishnan,That worked perfectly, thanks a lot.But I got another issue (refer to the screenshot below), when I process the form it gets reloaded as expected, but the selected rows remain selected, that's something I don't like... I want all the grid to reload with no rows selected. How can I do that?Secondly, the content type for this modal is iFrame, but when I close the modal and reopen it I need the form values to be clearly from the form. (in short, i want the iframe to reload/reset)...

Joji Kaju · Answer

Secondly, this modal gets content from an iframe page that is within the vb project. how do I clear/reload the iframe onClose of the modal?

Muthukrishnan Kandasamy · Answer

Hi Joji,

Thanks for contacting Syncfusion support.

Query 1: how do I clear/reload the iframe onClose of the modal?

We can clear the form controls value inside the dialog control. Using Dialog close event, we can get the form element inside the iframe. After getting the form, we can clear the values using reset() method. We have prepared sample to meet your requirement, in this sample we have used iframe type for Dialog content. Please refer the below cod block.

[Default.aspx]

<ej:Button ID="Button1" Type="Button" Text="Click to open dialog" ClientSideOnClick="btnclick1" runat="server"></ej:Button>

<ej:Dialog ID="NodeDialog" runat="server" ShowOnInit="false" EnableModal="true" ContentType="iframe" ContentUrl="WebForm1.aspx" ClientSideOnClose="onDialogClose" Width="500" Height="600" Title="Choose an option">

</ej:Dialog>

function btnclick1() {

var dialogObj = $("#<%=NodeDialog.ClientID%>").ejDialog("instance");

dialogObj.open();

$("#<%=Button1.ClientID%>").hide();

}

function onDialogClose(args) {

$("#<%=Button1.ClientID%>").show();

var iframe = document.getElementsByClassName("e-iframe");

var formCtrl = iframe[0].contentWindow.document.getElementsByTagName('form')[0];

formCtrl.reset();

}

</script>

We have attached sample for your convenience, which can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/DialogVB-1892469671

Query 2: How i reset them to unchecked onFormReload?

In order to clear the selection, we suggest you to clear the "SelectedRowIndices" property of Grid and also set the "SelectedRowIndex" to "-1" on form reload. In the below example, we have cleared selection in button click event at server end. Similarly, we suggest you to clear selection in form reload.

Please check the below code,

<ej:button ID="Start" runat="server" Text="Clear" Size="Medium"

ShowRoundedCorner="true" OnClick="Button_Click"></ej:button>

<ej:Grid ID="OrdersGrid" runat="server">

<ej:Column Type="checkbox" HeaderText="OrderID" TextAlign="Left" ></ej:Column>

<ej:Column Field="OrderID" HeaderText="OrderID" IsPrimaryKey="True" ></ej:Column>

</Columns>

</ej:Grid>

Protected Sub Button_Click(ByVal sender As Object, ByVal e As

Syncfusion.JavaScript.Web.ButtonEventArgs)

Dim selectedRows As ArrayList = Me.OrdersGrid.Model.CheckedRowIndices

If OrdersGrid.SelectedRowIndices.Count <> 0 Then

If True Then

'Clearing the SelectedRowIndices of grid using Clear method

Me.OrdersGrid.Model.SelectedRowIndices.Clear()

'Setting SelectedRowIndex to -1

OrdersGrid.SelectedRowIndex = -1

End If

End Sub

Please check the below API help documentations,

https://help.syncfusion.com/api/js/ejgrid#members:selectedrowindices

https://help.syncfusion.com/api/js/ejgrid#members:selectedrowindex

If you still face this issue, then kindly share us the below details,

Complete grid rendering code(both client and code behind).
Video demonstrating the issue.
Screenshots of error with stack trace (if any).
Share us your Essential Studio Version details.

Please let us know, if you need any further assistance.

Regards,

Muthukrishnan K

Joji Kaju · Answer

*RESETING A MODAL WINDOW*The code example you shared with me only clears a single form on the project. How can I clear multiple iframes? See my code below, thanks<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="WebApplicationVB._Default" %><%@ Register assembly="Syncfusion.EJ.Web" namespace="Syncfusion.JavaScript.Web" tagprefix="ej" %>

Muthukrishnan Kandasamy · Answer

Hi Joji, 
 
We have validated your requirement, we can also clear the multiple iframes. We can get the iframes count in the page, using this count we can iterate the all the iframes and then we can reset the form values. Please refer to the below code block. 
 




function onDialogClose2() { 
            var iframe = document.getElementsByClassName("e-iframe"); 
            for (var i = 0; i < iframe.length; i++) { 
                var formCtrl = iframe[i].contentWindow.document.getElementsByTagName('form')[0]; 
                formCtrl.reset(); 
            } 
        } 
  
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K

Joji Kaju · Answer

This works perfectly,Thank you

Muthukrishnan Kandasamy · Answer

Hi Joji, 
 
Thanks for the update. 
 
We are glad to know that given solution works. Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K