[CLOSED] SelectField in editable grid - Cannot get it to work.

  1. #1

    [CLOSED] SelectField in editable grid - Cannot get it to work.

    When editing a record, the SelectField always shows the value "Object 1" as the initial value. I think it should show a different value for each of the record in the example, "Object 1", "Object 2" and "Object 3":

    Controller-code:
    public class TestController : Controller
    {
            public ActionResult GetMainSet()
            {
                return Json(new List<object>
                {
                    new { text="Main 1", selected=1 },
                    new { text="Main 2", selected=2 },
                    new { text="Main 3", selected=3 }
                }, JsonRequestBehavior.AllowGet);
            }
    
            public ActionResult GetSelectables()
            {
                return Json(new List<object>
                {
                    new { text="Object 1", value=1 },
                    new { text="Object 2", value=2 },
                    new { text="Object 3", value=3 }
                }, JsonRequestBehavior.AllowGet);
            }
    }
    View-code:
    @{
        var x = Html.X();
    }
    @(
        x.Grid()
            .FullScreen(true)
            .Title("SelectField test")
            .Store(x.Store()
                .Fields(
                    x.ModelField().Name("text"),
                    x.ModelField().Name("selected")
                )
                .Proxy(x.AjaxProxy()
                    .Url("/Test/GetMainSet")
                )
            )
            .Plugins(x.EditableGrid())
            .Columns(
                x.Column()
                    .DataIndex("text")
                    .Text("text")
                ,
                x.Column()
                    .Text("selected")
                    .DataIndex("selected")
                    .Editable(true)
                    .Editor(x.SelectField()
                        .Store(x.Store()
                            .Proxy(x.AjaxProxy()
                                .Url("/Test/GetSelectables")
                            )   
                        )
                    )
            )
    )
    Last edited by fabricio.murta; Jan 03, 2017 at 10:35 PM. Reason: no user feedback for 7+ days
  2. #2
    Hello @sveins12!

    Please provide the sample test case with no layout. We can't know what's in your layout file.

    @{
        Layout = null;
    }
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again @sveins12!

    Sorry for the grumpy message above, but sometimes the hidden parts really cause us trouble trying to figure out what's the problem. Well, was not the case this time, but the request still remains: when posting MVC test cases, use an empty/null layout unless that's required to reproduce the issue (in which case the layout file will also be required).

    In your example, there is a race condition: the proxy loads after the component is synced with the editor/grid. Thus, while the component is shown, it has no data, so nothing can be selected at all. Three alternatives to make it work:

    1. use static options list in the select field
    2. bind the store's data in the store definition block (using a model/class)
    3. synchronize the selected field with a suitable store event, for example the Load event that should trigger as soon as the proxy loads the data on the component. This would be more complex as you'd probably have to "look" outside for the current value of the grid cell.

    Here's your reviewed example with pointers for alternatives 1 and 2:

    @{
        Layout = null;
        var x = Html.X();
    
        // Part of Alternative 2: Data model. Could come from a method, class, so it could be dynamic server-sided.
        var data = new[]
        {
            new { text = "op1", value = 1 },
            new { text = "op2", value = 2 },
            new { text = "op3", value = 3 }
        };
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
        <div> 
            @Html.X().ResourceManager().ScriptMode(Ext.Net.Mobile.ScriptMode.Debug).SourceFormatting(true)
    
            @(x.Grid()
                .FullScreen(true)
                .Title("SelectField test")
                .Store(x.Store()
                    .Fields(
                        x.ModelField().Name("text"),
                        x.ModelField().Name("selected")
                    )
                    .Proxy(x.AjaxProxy()
                        .Url("c61582_GetMainSet")
                    )
                )
                .Plugins(x.EditableGrid())
                .Columns(
                    x.Column()
                        .DataIndex("text")
                        .Text("text")
                    ,
                    x.Column()
                        .Text("selected")
                        .DataIndex("selected")
                        .Editor(
                            x.SelectField()
                                .Store(x.Store()
                                    // This would require you to set a Load listener to sync the selected option
                                    // once the proxy loads
                                    //.Proxy(x.AjaxProxy()
                                    //    .Url("c61582_GetSelectables")
                                    //)
                                    
                                    // Alternative 2
                                    .Data(data)
                                )
                                // Alternative 1
                                //.Options(
                                //    x.ListItem().Text("opt1").Value("1"),
                                //    x.ListItem().Text("opt2").Value("2"),
                                //    x.ListItem().Text("opt3").Value("3")
                                //)
                        )
                )
            )
        </div>
    </body>
    </html>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hello again @sveins12!

    Some time passed since we replied you this thread and still no response from you. Do you still need help with this matter? We're looking forward for your feedback.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Editable Plugin doesn't work with Chrome
    By anup in forum 1.x Premium Help
    Replies: 7
    Last Post: Jul 03, 2013, 5:37 AM
  2. Replies: 9
    Last Post: Feb 14, 2013, 3:55 PM
  3. Replies: 12
    Last Post: Sep 07, 2012, 3:42 PM
  4. Replies: 3
    Last Post: Feb 22, 2012, 1:56 PM
  5. Replies: 1
    Last Post: Jan 28, 2009, 8:36 PM

Posting Permissions