PDA

View Full Version : [CLOSED] Make Icon clickable in FieldSet to expand row in gridPanel



pawangyanwali
Jun 19, 2013, 9:11 AM
I want selected row should expand on GridPanel , when i click fieldSet icon. Please provide me the solution.




@model System.Collections.IEnumerable

@{
ViewBag.Title = "RowExpander with FormPanel Detail";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section headtag
{
<style>
.white-footer .x-toolbar-footer{
background-color: white !important;
}
</style>

<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
.fieldset-icon {
font-size: 12px;
cursor:pointer;
background-image: url(/resources/images/gridCollapse.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</script>
}

@section example
{
<h1>RowExpander Plugin with FormPanel Detail</h1>

@(
Html.X().FieldSet()
.ID("ProrationRules")
.Title("Proration Rules :")
.Collapsible(false)
.Collapsed(false)
.Layout(LayoutType.Anchor)
.DefaultAnchor("100%")
.AutoScroll(true)
.Height(315)
.Cls("fieldset-icon")
.Items(
Html.X().GridPanel()
.Title("Expander Rows with control")
.Icon(Icon.Table)
.Width(600)
.Height(350)
.Store(Html.X().Store()
.DataSource(Model)
.PageSize(10)
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("company"),
Html.X().ModelField().Name("price").Type(ModelFieldType.Float),
Html.X().ModelField().Name("change").Type(ModelFieldType.Float),
Html.X().ModelField().Name("pctChange").Type(ModelFieldType.Float),
Html.X().ModelField().Name("lastChange").Type(ModelFieldType.Date).DateFormat("M/d hh:mmtt"),
Html.X().ModelField().Name("industry")
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("company").Text("Company").Flex(1),
Html.X().Column().DataIndex("price").Text("Price").Renderer(RendererFormat.UsMoney),
Html.X().Column().DataIndex("change").Text("Change").Renderer("change"),
Html.X().Column().DataIndex("pctChange").Text("Change").Renderer("pctChange"),
Html.X().DateColumn().DataIndex("lastChange").Text("Last Updated")
)
.BottomBar(Html.X().PagingToolbar().HideRefresh(tr ue))
.Plugins(
Html.X().RowExpander()
.SingleExpand(false)
.Component(
Html.X().FormPanel()
.BodyPadding(6)
.Height(180)
.Border(false)
.DefaultAnchor("-5")
.Cls("white-footer")
.Items(
Html.X().TextField().Name("company").FieldLabel("Company"),
Html.X().NumberField().Name("price").FieldLabel("Price"),
Html.X().NumberField().Name("change").FieldLabel("Change"),
Html.X().NumberField().Name("pctChange").FieldLabel("% Change"),
Html.X().DateField().Name("lastChange").FieldLabel("Last Updated")
)
.Buttons(
Html.X().Button()
.Text("Save")
.Icon(Icon.Disk)
.Handler(@"
var grid = this.up('grid'), form = this.up('form');
grid.getRowExpander().collapseRow(grid.store.index Of(form.record));
form.getForm().updateRecord(form.record);
"),

Html.X().Button()
.Text("Cancel")
.Icon(Icon.Decline)
.Handler(@"
var grid = this.up('grid'), form = this.up('form');
grid.getRowExpander().collapseRow(grid.store.index Of(form.record));
")
)
.Listeners(l =>
{
l.AfterRender.Handler = "this.getForm().loadRecord(this.record);";
})
)
)
)
)
}

Daniil
Jun 19, 2013, 2:15 PM
Hi Pawan,

To expand a selected row, please use the following script.

Expand Row


var grid = App.GridPanel1,
rowExpander = grid.getRowExpander(),
selModel = grid.getSelectionModel(),
rowIndex;

if (selModel.hasSelection()) {
rowIndex = grid.getStore().indexOf(selModel.getSelection()[0])
rowExpander.expandRow(rowIndex);
}

I have no idea how to get a FieldSet's icon clickable in your case. It requires a separate HTML element. I can suggest the following solution.

Clickable FieldSet's Icon

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<style>
.fieldset-icon {
font-size: 12px;
cursor: pointer;
background-image: url(/resources/images/test.png);
background-position: 0 0;
background-repeat: no-repeat;
width: 20px;
float: left;
}
</style>

<script>
var onIconClick = function () {
var fieldSet = this;

alert(Ext.String.format("Clicked {0}'s icon", fieldSet.id));
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:FieldSet
ID="FieldSet1"
runat="server"
Title="<span class='fieldset-icon'>&nbsp;</span>Title">
<Listeners>
<AfterRender Handler="this.mon(this.el.down('.fieldset-icon'), 'click', onIconClick, this);" />
</Listeners>
</ext:FieldSet>
</form>
</body>
</html>

pawangyanwali
Jun 20, 2013, 11:25 AM
Thank you so much for your suggestion. Please close this thread.