PDA

View Full Version : [CLOSED] SelectField in editable grid - Cannot get it to work.


sveins12
Oct 06, 2016, 10:09 PM
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")
)
)
)
)
)
fabricio.murta
Oct 07, 2016, 8:13 PM
Hello @sveins12!

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



@{
Layout = null;
}
fabricio.murta
Oct 07, 2016, 10:19 PM
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.Mob ile.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!
fabricio.murta
Dec 02, 2016, 2:01 PM
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.