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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Placing a Tab control in the Dialog Template

Thread ID:

Created:

Updated:

Platform:

Replies:

143895 Apr 9,2019 04:18 PM UTC Apr 15,2019 10:39 AM UTC ASP.NET Web Forms 5
loading
Tags: Grid
Jahanzeb Khan
Asked On April 9, 2019 04:18 PM UTC

Hi,

I'm just starting with Syncfusion.

I have a Grid Control:

    <form id="form1" runat="server">
        <div>
            <ej:Grid ID="grPets" runat='server' AllowFiltering="True" AllowSorting="True">
                <Columns>
                    <ej:Column Field="ID" HeaderText="ID" IsIdentity="True" IsPrimaryKey="True">
                    </ej:Column>
                    <ej:Column Field="Firstname" HeaderText="Firstname">
                    </ej:Column>
                    <ej:Column Field="Lastname" HeaderText="Lastname">
                    </ej:Column>
                    <ej:Column Field="Age" HeaderText="Age">
                    </ej:Column>
                    <ej:Column Field="Pets" HeaderText="Pets">
                    </ej:Column>
                </Columns>
                <EditSettings AllowEditing="True" EditMode="DialogTemplate" DialogEditorTemplateID="#template" />
            </ej:Grid>
        </div>

   <script id="template" type="text/template">  
   <ej:Tab ID="Tab1" runat="server">
       <Items>
           <ej:TabItem ID="Part1" Text="txtPart1">
               <ContentSection>
   <table cellspacing="10">
<tr>
<td>ID</td>
<td>
<input id="ID" name="ID" disabled="disabled" value="{{:ID}}" class="e-field e-ejinputtext" style="width:116px;height:28px" />
            </td>
<td>Firstname</td>
<td>
<input id="Firstname" name="Firstname" value="{{:Firstname}}" class="e-field e-ejinputtext" style="width: 116px; height: 28px" />
</td>
</tr>
    </table>
   </ContentSection>
  </ej:TabItem>

    <ej:TabItem ID="Part2" Text="txtPart2">
        <ContentSection>
    <table>
<tr>
<td>Lastname</td>
<td>
<input type="text" id="Lastname" name="Lastname" value="{{:Lastname}}" />
</td>
<td>Age</td>
<td>
                <input type="text" id="Age" name="Age" value="{{:Age}}" />
</td>
</tr>
   </table>
   </ContentSection>
    </ej:TabItem>
 </Items>
   </ej:Tab>                           
 </script>
    <script>
              function complete(args) {
             $("#Age").ejNumericTextbox();
              }
        </script>

    </form>


This is not working, it renders as below:



If I put the code on another web form it renders as a tab control.

Can you please point me in the right direction.

Thanks

JK

Vignesh Natarajan [Syncfusion]
Replied On April 10, 2019 06:28 AM UTC

Hi Jahanzeb khan, 
 
Greetings from Syncfusion support  
 
Query: “Placing a tab control in dialog template” 
 
From your query, we understand that you need to render the ejTab control in the dialog template. We use jsrender to render the template forms. So we cannot not use ASP.NET Webforms code directly inside the template. We suggest you to render the ejTab element using javascript code.  
 
Refer the below code  example for your reference 
 
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" OnServerEditRow="EditEvents_ServerEditRow" OnServerAddRow="EditEvents_ServerAddRow" 
                OnServerDeleteRow="EditEvents_ServerDeleteRow"> 
                <ClientSideEvents ActionComplete="complete"/> 
                <Columns> 
……………………………………………………………………. 
                </Columns> 
                <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="DialogTemplate" DialogEditorTemplateID="#template"></EditSettings> 
                <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
            </ej:Grid> 
 
Dialog template script tag 
 
<script type="text/template" id="template"> 
        <div id="apiTab" style="width: 500px"> 
            <ul> 
                <li><a rel='nofollow' href="#javaScript">Part 1</a></li> 
                <li><a rel='nofollow' href="#cSharp">Part 2</a></li> 
 
            </ul> 
            <div id="javaScript"> 
                <b>OrderDetails</b> 
                <table cellspacing="10"> 
                    <tr> 
                        <td style="text-align: right;">Order ID 
                        </td> 
                        <td style="text-align: left"> 
                            <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" 
                                class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" /> 
                        </td> 
                        <td style="text-align: right;">Customer ID 
                        </td> 
                        <td style="text-align: left"> 
                            <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" 
                                style="width: 116px; height: 28px" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td style="text-align: right;">Freight 
                        </td> 
                        <td style="text-align: left"> 
                            <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 
                        </td>                        
                    </tr> 
                     
                </table> 
            </div> 
            <div id="cSharp"> 
              <table cellspacing="10">                     
                    <tr>                         
                        <td style="text-align: right;">ShipCountry 
                        </td> 
                        <td style="text-align: left"> 
                            <select id="ShipCountry" name="ShipCountry"> 
                                <option value="Germany">Germany</option> 
                                <option value="Mexico">Mexico</option> 
                                <option value="UK">UK</option> 
                                <option value="Sweden">Sweden</option> 
                                <option value="France">France</option> 
                                <option value="Italy">Italy</option> 
                                <option value="Spain">Spain</option> 
                            </select> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td style="text-align: right;">ShipName 
                        </td> 
                        <td style="text-align: left"> 
                            <input id="ShipName" name="ShipName" class="e-field e-ejinputtext valid" 
                                style="width: 116px; height: 28px" value="{{:ShipName}}" /> 
                        </td> 
                        <td style="text-align: right;">EmployeeID 
                        </td> 
                        <td style="text-align: left"> 
                            <input id="EmployeeID" name="EmployeeID" class="e-field e-ejinputtext valid" 
                                style="width: 116px; height: 28px" value="{{:EmployeeID}}" /> 
                        </td> 
                    </tr> 
                </table> 
            </div> 
        </div> 
    </script> 
 
Convert the list to ejTab in the ActionComplete event 
 
function complete(args) { 
            if (args.requestType == "refresh" || args.requestType == "save") { 
                $('#<%= OrdersGrid.ClientID %>').ejWaitingPopup("hide"); 
            } 
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
                $("#apiTab").ejTab(); 
                ………………………………………………………………. 
                } 
            } 
        } 
 
Refer the below screenshot for the output 
 
 
 
 
 
  
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
Refer our help documentation for your reference 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 


Jahanzeb Khan
Replied On April 10, 2019 04:25 PM UTC

Thank you.

That worked perfectly.

How can I add a "dropdown with checkbox control" to the template using a similar method?

The data for Grid comes from a DB table, I have field that stores comma seperated values from another table, I want to select values from the other table.

For example - type of dog owned, this would be a dropdown with check boxes where the user can select 0 or many breeds, this will then update the bound field comma separated.

I have tried various things and searched the forums but not got this to work.

Thanks,

JK


Vignesh Natarajan [Syncfusion]
Replied On April 11, 2019 06:57 AM UTC

Hi Jahanzeb Khan,  
 
Thanks for the update.  
 
Query: ” How can I add a "dropdown with checkbox control" to the template using a similar method? 
 
From your query we understand that you need to render the multiselect dropdown in dialog template. We have achieved your requirement using actionComplete event of ejGrid. 
 
Refer the below code example 
 
 <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" OnServerEditRow="EditEvents_ServerEditRow" OnServerAddRow="EditEvents_ServerAddRow" 
                OnServerDeleteRow="EditEvents_ServerDeleteRow"> 
                <ClientSideEvents ActionComplete="complete" ActionBegin="begin"/> 
……………………………………………… 
            </ej:Grid> 
 
 
 
…………………… 
 
 
 
function complete(args) { 
            if (args.requestType == "refresh" || args.requestType == "save") { 
                $('#<%= OrdersGrid.ClientID %>').ejWaitingPopup("hide"); 
            } 
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
                $("#apiTab").ejTab(); 
                $("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "28px", decimalPlaces: 2 }); 
                $("#EmployeeID").ejNumericTextbox({ value: $("#EmployeeID").val(), width: "116px", height: "28px" }); 
                $("#ShipCountry").ejDropDownList({ width: '116px',showCheckbox: true, allowMultiSelection: true, value: args.rowData.ShipCountry }); 
                if (args.requestType == "beginedit") { 
                    $("#OrderID").attr("disabled", "disabled"); 
                    $("#ShipCountry").ejDropDownList("setSelectedValue", args.row.children().eq(4).text()); 
                } 
            } 
        } 
 
Refer below screenshot foe the output 
 
 
 
Refer our UG documentation for your reference 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 


Jahanzeb Khan
Replied On April 12, 2019 12:21 PM UTC

Thank you for that, that worked.

The only remaining issue I have is when I add or edit, it only save the first selection from dropdown list box, if I check 3 or 4 just the first get saved. I think I'm doing something really stupid!

Code Snippet:

                   </ej:Column>
                    <ej:Column Field="Membership" HeaderText="Membership" EditType="DropdownEdit">
                    </ej:Column>
                </Columns>
                <EditSettings AllowEditing="True" AllowAdding="true" AllowDeleting="true" 
                    EditMode="DialogTemplate" DialogEditorTemplateID="#template"/>
                <ClientSideEvents ActionComplete="complete" />
                <ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete">
                </ToolbarSettings>
            </ej:Grid>

            <script type="text/template" id="template">
                <div id="apiTab">
                    <ul>
                        <li><a rel="nofollow" rel='nofollow' href="#Part1">Part1</a></li>
                        <li><a rel="nofollow" rel='nofollow' href="#Part2">Part2</a></li>
                    </ul>
                    <div id="Part1">
                        <table>
                            <tr>
                                <td>Firstname</td>
                                <td><input id="Firstname" name="Firstname" value="{{:Firstname}}" /></td>
                            </tr>
                            <tr>
                                <td>Age</td>
                                <td><input id="Age" name="Age" value="{{:Age}}" /></td>
                            </tr>
                            <tr>
                                <td>MemberShip</td>
                                <td>
                                    <input type="text" id="Membership" value="{{:Membership}}"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="Part2">
                        <table>
                            <tr>
                                <td>Lastname</td>
                                <td><input id="Lastname" name="Lastname" value="{{:Lastname}}" /></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </script>

            <script type="text/javascript">
            function complete(args) { 
            if (args.requestType == "refresh" || args.requestType == "save") { 
                $('#<%= Grid1.ClientID %>').ejWaitingPopup("hide"); 
                } 

                if ((args.requestType == "beginedit" || args.requestType == "add") &&
                    args.model.editSettings.editMode == "dialogtemplate") {
                    $("#apiTab").ejTab();
                    $("#Membership").ejDropDownList({width:"116px",
                        showCheckbox: true, allowMultiSelection: true,
                        value: args.rowData.Membership,
                        dataSource: args.model.columns[5].dataSource,
                        multiSelectMode: ej.MultiSelectMode.Delimiter,
                        text: ej.dataUtil.distinct(args.model.columns[5].dataSource, "value").toString(),  
                        fields: { text: "text", value: "value" }
                    });
                    if (args.requestType == "beginedit") {
                    $("#Membership").ejDropDownList("setSelectedValue",args.row.children().eq(5).text());
                     } 
                }
            }  
         </script>

I can't find anywhere where to save the multiple items.

Thanks,

JK

Vignesh Natarajan [Syncfusion]
Replied On April 15, 2019 10:39 AM UTC

Hi Jahanzeb,  
 
Query: “ have is when I add or edit, it only save the first selection from dropdown list box, if I check 3 or 4 just the first get saved 
 
From your query, we understand that you are facing issue while saving the multiple values from server side.  We are also able to reproduce the reported issue at our end. To overcome the reported issue, we suggest you to change the values of ShipCountry (multiselect dropdown column) in the ActionBegin event of ejGrid.  
 
Refer the below code example 
 
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" OnServerEditRow="EditEvents_ServerEditRow" OnServerAddRow="EditEvents_ServerAddRow" 
                OnServerDeleteRow="EditEvents_ServerDeleteRow"> 
                <ClientSideEvents ActionComplete="complete" ActionBegin="begin"/> 
                ………………………………………………. 
            </ej:Grid> 
 
……………………………. 
 
 
function begin(args) { 
            if (args.requestType == "save") { 
                args.data.ShipCountry = args.data.hiddenEle 
            } 
        } 
   
Refer the below screenshot for the output 
 
 
 
For your convenience we have prepared sample which can be downloaded from below link 
 
 
Refer our API documentation for your reference 
 
 
Please get back to us if you have further queries.   
 
Regards,  
Vignesh Natarajan.  
 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon