| Current Path : C:/Users/Public/Documents/DXperience 13.1 Demos/ASP.NET/CS/MVCDemos/Views/Splitter/ |
| Current File : C:/Users/Public/Documents/DXperience 13.1 Demos/ASP.NET/CS/MVCDemos/Views/Splitter/Resizing.aspx |
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="headContent" ContentPlaceHolderID="CustomHeadHolder" runat="server">
<style type="text/css">
#editorsTable
{
margin: 2px;
border-collapse: separate;
border-spacing: 4px;
}
.metropolisPane
{
border: 1px solid #c0c0c0!important;
}
.youthfulPane
{
border: 1px solid #d3e4a6!important;
}
</style>
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="ContentHolder" runat="server">
<script type="text/javascript">
//<![CDATA[
function OnGetRowValues(values) {
tbContactName.SetText(values[0]);
tbCompanyName.SetText(values[1]);
var memoText = '';
if(values[2] != null) memoText += 'City: ' + values[2] + '\n';
if(values[3] != null) memoText += 'Address: ' + values[3] + '\n';
if(values[4] != null) memoText += 'Phone: ' + values[4] + '\n';
if(values[5] != null) memoText += 'Fax: ' + values[5] + '\n';
mContacts.SetText(memoText);
}
function UpdateEditorsValues() {
gvEmployees.GetRowValues(gvEmployees.GetFocusedRowIndex(), 'ContactName;CompanyName;City;Address;Phone;Fax', OnGetRowValues);
}
var dataChanged = false;
function OnListBoxValueChanged(s, e) {
gvEmployees.Refresh();
dataChanged = true;
}
function OnSplitterPaneResized(s, e) {
var name = e.pane.name;
if(name == 'listBoxContainer')
ResizeControl(lblEmployees, e.pane);
else if(name == 'gridContainer')
ResizeControl(gvEmployees, e.pane);
else if(name == 'editorsContainer')
ResizeEditors(e.pane);
}
function ResizeControl(control, splitterPane) {
control.SetWidth(splitterPane.GetClientWidth());
control.SetHeight(splitterPane.GetClientHeight());
}
function ResizeEditors(splitterPane) {
SetEditorsSize(1, 1);
var memoTD = document.getElementById('memoCell');
var memoHeight = memoTD.clientHeight + splitterPane.GetClientHeight() - document.getElementById('editorsTable').offsetHeight - 4;
SetEditorsSize(memoTD.clientWidth, memoHeight);
}
function SetEditorsSize(width, height) {
tbContactName.SetWidth(width);
tbCompanyName.SetWidth(width);
mContacts.SetWidth(width);
mContacts.SetHeight(height);
}
function OnGridEndCallback(s, e) {
splResizing.GetPaneByName("gridContainer").RaiseResizedEvent();
if(dataChanged) {
UpdateEditorsValues();
dataChanged = false;
}
}
function OnGridBeginCallback(s, e) {
e.customArgs["EmployeeID"] = lblEmployees.GetValue();
}
// ]]>
</script>
<% Html.BeginForm(); %>
<%
Html.DevExpress().Splitter(
settings =>
{
settings.Name = "splResizing";
settings.Height = 400;
settings.Width = Unit.Percentage(100);
settings.Styles.Pane.Paddings.Padding = 0;
settings.Panes.Add(listBoxPane => {
listBoxPane.Name = "listBoxContainer";
listBoxPane.Size = Unit.Percentage(20);
listBoxPane.ShowCollapseBackwardButton = DefaultBoolean.True;
listBoxPane.SetContent(() => { %>
<%
Html.DevExpress().ListBox(
listBoxSettings => {
listBoxSettings.Name = "lblEmployees";
listBoxSettings.ControlStyle.Border.BorderWidth = 0;
listBoxSettings.Properties.TextField = "Name";
listBoxSettings.Properties.ValueField = "ID";
listBoxSettings.Properties.ValueType = typeof(Int32);
listBoxSettings.SelectedIndex = 0;
listBoxSettings.Properties.ClientSideEvents.ValueChanged = "OnListBoxValueChanged";
})
.BindList(ViewData["Employees"])
.Render();
%>
<%});
});
settings.Panes.Add(contentPane => {
contentPane.MinSize = 350;
contentPane.Panes.Add(gridPane => {
gridPane.Name = "gridContainer";
gridPane.Size = Unit.Percentage(60);
gridPane.MinSize = 100;
gridPane.SetContent(() => { %>
<% Html.RenderPartial("ResizingPartial", Model); %>
<%});
});
contentPane.Panes.Add(editorsPane => {
editorsPane.Name = "editorsContainer";
editorsPane.MinSize = 100;
editorsPane.ShowCollapseForwardButton = DefaultBoolean.True;
editorsPane.SetContent(() => { %>
<table id="editorsTable">
<tr>
<td style="white-space: nowrap">
<%
Html.DevExpress().Label(
labelSettings => {
labelSettings.Text = "Customer name:";
labelSettings.AssociatedControlName = "tbContactName";
}
)
.Render();
%>
</td>
<td style="width: 100%">
<%
Html.DevExpress().TextBox(
textBoxSettings => {
textBoxSettings.Name = "tbContactName";
textBoxSettings.Width = 170;
}
)
.Render();
%>
</td>
</tr>
<tr>
<td style="white-space: nowrap">
<%
Html.DevExpress().Label(
labelSettings => {
labelSettings.Text = "Company name:";
labelSettings.AssociatedControlName = "tbCompanyName";
}
)
.Render();
%>
</td>
<td>
<%
Html.DevExpress().TextBox(
textBoxSettings => {
textBoxSettings.Name = "tbCompanyName";
textBoxSettings.Width = 170;
}
)
.Render();
%>
</td>
</tr>
<tr>
<td style="vertical-align: text-top; white-space: nowrap; padding-top: 2px;">
<%
Html.DevExpress().Label(
labelSettings => {
labelSettings.Text = "Contacts:";
labelSettings.AssociatedControlName = "mContacts";
}
)
.Render();
%>
</td>
<td id="memoCell">
<%
Html.DevExpress().Memo(
memoSettings => {
memoSettings.Name = "mContacts";
memoSettings.Height = 71;
memoSettings.Width = 170;
}
)
.Render();
%>
</td>
</tr>
</table>
<%});
});
});
settings.ClientSideEvents.PaneResized = "OnSplitterPaneResized";
settings.PreRender = (sender, e) => {
if(ASPxWebControl.GlobalTheme.Contains("Metropolis"))
((MVCxSplitter)sender).Styles.Pane.CssClass = "metropolisPane";
else if(ASPxWebControl.GlobalTheme.Contains("Youthful"))
((MVCxSplitter)sender).Styles.Pane.CssClass = "youthfulPane";
else
((MVCxSplitter)sender).Styles.Pane.CssClass = string.Empty;
};
})
.Render();
%>
<% Html.EndForm(); %>
</asp:Content>