What's New?

[CLOSED] Editable / Non Editable component column Grid View - Razor

Page 1 of 2 12 LastLast
  1. #1
    Sep 05, 2012, 8:26 AM

    [CLOSED] Editable / Non Editable component column Grid View - Razor

    Hi,

    I want to make component columns as editable or non editable based on some condition through JavaScript only not code behind code.

    Code Sample: 

    ratecolumnModel.Columns.Add(Html.X().ComponentColumn()
                                            .Text("Invoice Text")
                                            .DataIndex("InvoiceText")
                                            .Editor(true)
                                            .OverOnly(true)
                                            .Sortable(false)
                                            .Draggable(false)
                                            .MenuDisabled(true)
                                            .Flex(1)
                                            .Component(extcomponent =>
                                            {
                                                extcomponent.Add(
                                                    Html.X().TextArea()
                                                    );
                                            })
                                            );
    Please help me to implement this scenario.

    Thanks in advance.
    Last edited by Daniil; Sep 07, 2012 at 3:37 PM. Reason: [CLOSED]
  2. #2
    Sep 05, 2012, 9:26 AM
    Hi,

    I think the following should work.

    1. Set ID for the TextArea, for example
    .ID("TextArea1")
    2. Use the setReadOnly method.
    http://docs.sencha.com/ext-js/4-1/#!...od-setReadOnly
    App.TextArea1.setReadOnly(true);
    For TriggerFields and its inheritors the setEditable can be helpful as well.
    http://docs.sencha.com/ext-js/4-1/#!...od-setEditable
  3. #3
    Sep 05, 2012, 12:03 PM
    Quote Originally Posted by Daniil View Post
    Hi,

    I think the following should work.

    1. Set ID for the TextArea, for example
    .ID("TextArea1")
    2. Use the setReadOnly method.
    http://docs.sencha.com/ext-js/4-1/#!...od-setReadOnly
    App.TextArea1.setReadOnly(true);
    For TriggerFields and its inheritors the setEditable can be helpful as well.
    http://docs.sencha.com/ext-js/4-1/#!...od-setEditable
    App.TextArea1.setReadOnly(true);
    i am not able access this property it says 'Undefined'.
    App.TextArea1 it self 'Undefined'
  4. #4
    Sep 05, 2012, 12:33 PM
    It means that the TextArea was not rendered yet.

    When do you call the setReadOnly method?

    If you need to set it initially you can use the TextArea ReadOnly property.
  5. #5
    Sep 06, 2012, 6:48 AM
    Quote Originally Posted by Daniil View Post
    It means that the TextArea was not rendered yet.

    When do you call the setReadOnly method?

    If you need to set it initially you can use the TextArea ReadOnly property.
    In button click event I am doing this. At that time text area got rendered but I am not able to access that property.
    Could you please give me some code sample to achieve this.

    Thanks in advance.
  6. #6
    Sep 06, 2012, 7:29 AM
    Here you are.

    Before clicking the Button move mouse over the row to cause TextArea appearing.

    Example
    <!DOCTYPE html>

<html>
<head>
    <title>Ext.Net.MVC v2 Example</title>    
</head>
<body>
    @Html.X().ResourceManager()

    @(Html.X().GridPanel()
        .Title("ComponentColumn Editor")
        .Width(600)
        .Height(300)
        .Store(Html.X().Store()
            .Model(Html.X().Model()
                .Fields(
                    new ModelField("test")
                )
            )
            .Data(new object[] { new { test = "test" } })
        )
        .ColumnModel(
            Html.X().ComponentColumn()
                .Editor(true)
                .OverOnly(true)
                .DataIndex("test")
                .Flex(1)
                .Text("Test")
                .Component(c => c.Add(Html.X().TextArea().ID("TextArea1")))
        )
    )

    @(Html.X().Button()
        .Text("Toggle readOnly")
        .Listeners(ls => ls.Click.Handler = "App.TextArea1.setReadOnly(!App.TextArea1.readOnly);")    
    )
</body>
</html>
  7. #7
    Sep 06, 2012, 8:58 AM
    Quote Originally Posted by Daniil View Post
    Here you are.

    Before clicking the Button move mouse over the row to cause TextArea appearing.

    Example
    <!DOCTYPE html>

<html>
<head>
    <title>Ext.Net.MVC v2 Example</title>    
</head>
<body>
    @Html.X().ResourceManager()

    @(Html.X().GridPanel()
        .Title("ComponentColumn Editor")
        .Width(600)
        .Height(300)
        .Store(Html.X().Store()
            .Model(Html.X().Model()
                .Fields(
                    new ModelField("test")
                )
            )
            .Data(new object[] { new { test = "test" } })
        )
        .ColumnModel(
            Html.X().ComponentColumn()
                .Editor(true)
                .OverOnly(true)
                .DataIndex("test")
                .Flex(1)
                .Text("Test")
                .Component(c => c.Add(Html.X().TextArea().ID("TextArea1")))
        )
    )

    @(Html.X().Button()
        .Text("Toggle readOnly")
        .Listeners(ls => ls.Click.Handler = "App.TextArea1.setReadOnly(!App.TextArea1.readOnly);")    
    )
</body>
</html>
    I am having one button based on that button click I am loading that grid. So before that it is not possible to mouse over to that column.

    Thanks in advance.
  8. #8
    Sep 06, 2012, 9:30 AM
    But you said it is already rendered when you click the button:
    Quote Originally Posted by MTSI View Post
    In button click event I am doing this. At that time text area got rendered but I am not able to access that property.
    Please provide a sample which would demonstrate your scenario and reproduce the error.
  9. #9
    Sep 06, 2012, 11:01 AM
    Quote Originally Posted by Daniil View Post
    But you said it is already rendered when you click the button:


    Please provide a sample which would demonstrate your scenario and reproduce the error.
    @using Ext.Net.MVC
@using Ext.Net
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>EditableGrid</title>
    <script type="text/javascript" language="javascript">
        function customcolumn() {
            App.jobidvalue.setReadOnly(true);
        }
    </script>
</head>
<body>
    @Html.X().ResourceManager()
    @(Html.X().GridPanel()
.Title("ComponentColumn Editor")
.Width(600)
.Height(300)
.Store(storeitem =>
{
    storeitem.Add(
    Html.X().Store()
    .PageSize(1)
    .AutoLoad(true)
    .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
    .Url(Url.Content(string.Format("~/AjaxData/GetPrepareCommandData/")))
    .Reader(reader => reader.Add(Html.X().JsonReader()
    .Root("data")
    ))
    ))
    .Model(model => model.Add(Html.X().Model()
    .IDProperty("Id")
    .Fields(fields =>
    {
        fields.Add(Html.X().ModelField().Name("Id"));
    })
    ))
    );
})
.ColumnModel(ratecolumnModel =>
    {
        ratecolumnModel.Columns.Add(Html.X().ComponentColumn()
        .Text("Job Id")
        .DataIndex("Id")
        .Editor(true)
        .OverOnly(true)
        .Sortable(false)
        .Draggable(false)
        .MenuDisabled(true)
        .Flex(1)
        .Component(extcomponent =>
        {
            extcomponent.Add(
            Html.X().NumberField()
            .ID("jobidvalue")
            .MinValue(0)
            );
        })
        );
    }
)
 .TopBar(rategridtopbar =>
    {
        rategridtopbar.Add(
            Html.X().Toolbar()
        .ID("rategridtoolbar1")
        .Margins("0 0 4 0")
        .Items(rategridtoolbaritems =>
        {
            rategridtoolbaritems.Add(
           Html.X().Button()
           .ID("submitselection")
           .ToolTip("Submit Selection")
           .Text("Submit Selection")
           .ToolTipType(Ext.Net.ToolTipType.Title)
           .Icon(Ext.Net.Icon.ResultsetNext)
           .Listeners(savebuttonclick =>
           {
               savebuttonclick.Click.Handler = "javascript:customcolumn()";
           })
           );
        })
);
    })
    )
</body>
</html>
  10. #10
    Sep 06, 2012, 12:17 PM
    I need the GetPrepareCommandData controller action to run your sample. Please provide.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Editable Grid Panel - Razor
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 22, 2012, 12:36 PM
  2. [CLOSED] Editable column on grid: how to raise an event for saving
    By digitek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 13, 2012, 11:02 AM
  3. Value is not displaying in Editable Grid column
    By dtamils in forum 1.x Help
    Replies: 0
    Last Post: Jun 15, 2011, 5:40 AM
  4. Editable Grid Panel with Combo box column
    By jigpatel06 in forum 1.x Help
    Replies: 1
    Last Post: Nov 03, 2010, 8:06 PM
  5. [FIXED] [V0.8.1] Tab key bug in editable grid with combobox column
    By zikr in forum Bugs
    Replies: 1
    Last Post: Jun 16, 2009, 12:28 PM

Posting Permissions