Placing a Tab control in the Dialog Template

[Jahanzeb Khan]

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]

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 

 

Sample: http://www.syncfusion.com/downloads/support/forum/143895/ze/SyncfusionASPNETApp_(3)-1590152165  

 

Refer our help documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan. 

[Jahanzeb Khan]

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]

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 

 

https://help.syncfusion.com/js/dropdownlist/checkbox  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan. 

[Jahanzeb Khan]

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]

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 

 

Sample: http://www.syncfusion.com/downloads/support/forum/143895/ze/SyncfusionASPNETApp2068353066  

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#events:actionbegin  

 

Please get back to us if you have further queries.   

 

Regards,  

Vignesh Natarajan.