Placing a Tab control in the Dialog Template

Jahanzeb Khan

Asked On April 9, 2019 04:18 PM UTC

Hi,

I'm just starting with Syncfusion.

I have a Grid Control:

<div>

<ej:Grid ID="grPets" runat='server' AllowFiltering="True" AllowSorting="True">

<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>

</ej:Grid>

</div>

<ej:Tab ID="Tab1" runat="server">

<Items>

<ej:TabItem ID="Part1" Text="txtPart1">

<tr>

<td>

</td>

<td>Firstname</td>

<td>

</td>

</tr>

</table>

</ContentSection>

</ej:TabItem>

<ej:TabItem ID="Part2" Text="txtPart2">

<table>

<tr>

<td>Lastname</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</ContentSection>

</ej:TabItem>

</Items>

</ej:Tab>

</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

Reply | Reply with quote

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">

…………………………………………………………………….

</Columns>

</ej:Grid>

Dialog template script tag

<ul>

</ul>

<b>OrderDetails</b>

<tr>

<td style="text-align: right;">Order ID

</td>

<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>

<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>

</tr>

</table>

</div>

<tr>

<td style="text-align: right;">ShipCountry

</td>

<option value="Germany">Germany</option>

<option value="Mexico">Mexico</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>

<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>

<input id="EmployeeID" name="EmployeeID" class="e-field e-ejinputtext valid"

style="width: 116px; height: 28px" value="{{:EmployeeID}}" />

</td>

</tr>

</table>

</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.

Reply | Reply with quote

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

Reply | Reply with quote

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">

………………………………………………

</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.

Reply | Reply with quote

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"/>

</ToolbarSettings>

</ej:Grid>

<ul>

</ul>

<table>

<tr>

<td>Firstname</td>

</tr>

<tr>

</tr>

<tr>

<td>MemberShip</td>

<td>

</td>

</tr>

</table>

</div>

<table>

<tr>

<td>Lastname</td>

</tr>

</table>

</div>

</script>

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

Reply | Reply with quote

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">

……………………………………………….

</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.

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US