[CLOSED] Make Icon clickable in FieldSet to expand row in gridPanel

[pawangyanwali]

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(true))
            .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.indexOf(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.indexOf(form.record));
                                    ")
                            )
                            .Listeners(l =>
                            {
                                l.AfterRender.Handler = "this.getForm().loadRecord(this.record);";
                            })
                    )
            )
        )
    )
}

[Daniil]

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]

Thank you so much for your suggestion. Please close this thread.