Greetings. Let's say that I have these entites:
public class Slave{
public virtual Int32 Id { get; set; }
public virtual String Name { get; set; }
public virtual Boolean IsEnabled { get; set; }
public virtual Master Master { get; set; }
}
where Master entity is:
public class Master
{
public virtual Int32 Id{get;set;}
public virtual String Name {get;set;}
}
Now, I need a grid where one could view / insert / update Slaves. When the user clicks on an existing slave the grid editing dialog shows up: In the Master field there should be a dropdownlist with the master list, so that the user can choose any master to be associated with the current slave. So, the datasource that the grid has to deal with is of this kind: [{"Id":1,"Name":"Slave 1","IsEnabled":true,"Master":{"Id":1,"Name":"Master 1"}},{"Id":2,"Name":"Slave 2","IsEnabled":true,"Master":{"Id":3,"Name":"Master 3"}}]. The DropDownList should show the master names as text and keep a reference to their Ids. So it's data source is of this kind: [{"Id":1,"Name":"Master 1"},{"Id":2,"Name":"Master 2"}]. I've done the following to satisfy the requirement:
->in the grid declaration:
col.Field("Master").HeaderText("Master").TemplateID("#masterDropDownList")
.ValidationRules(v => v.AddRule("required", true))
.EditTemplate(a => { a
.Create("createMasterDropDownList")
.Read("readMasterDropDownList")
.Write("writeMasterDropDownList");
}).Add();
and then:
<script id="masterDropDownList" type="text/template">
{{:Master.Name}} <!-- so that the current row master's name is shown in the grid column "Master"-->
</script>
<script type="text/javascript">
//MASTER COMBOBOX
var source = @(Html.Raw(Json.Encode(ViewBag.MasterDataSource)))
var dropDownList;
function getIndex(datasource, currentId) {
for(var i=0;i<datasource.length;i++){
if (datasource[i].Id === currentId)
return i;
}
}
function createMasterDropDownList() {
return $("<input>");
}
function writeMasterDropDownList(args) {
var selectedItem = (args.rowdata["Master"] !== undefined) ? getIndex(source, args.rowdata["Master"]["Id"]) : 0;
dropDownList = args.element;
args.element.ejDropDownList({
width: "100%",
height: "40px",
dataSource: source,
fields: { id: 'Id', text: 'Nome', value: 'Id' },
selectedItemIndex: selectedItem,
});
}
function readMasterDropDownList(args) {
var currentIndex = dropDownList.ejDropDownList("option", "selectedItemIndex");
var currentMaster = source[currentIndex];
return currentMaster;
}
</script>
This works; it populates the master dropdownlist when a slave is edited and pre-selects the current master. The grid is also able to get the selected master id through the "readMasterDropDownList" when a slave is edited or created. The problem with this approach is that:
1) Is my code regarding the 3 dropdownlist helper functions (create/write/read master) following a correct approach at all? Is it necessary to hold a reference to the actual dropdown list in the variable "dropDownList"? I get the reference in writeMasterDropDownList ( dropDownList = args.element;) and use it in readMasterDropDownList this way: (var currentIndex = dropDownList.ejDropDownList("option", "selectedItemIndex");). Is there a better way to do this?
2) Trying to accomplish another requirement ( https://www.syncfusion.com/forums/121030/conditional-template-column-with-a-button-in-a-grid ) I added the following line to my grid declaration:
".ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate"); })"
-> this alone causes the grid edit dialog not to create the correct DropDownList input: the field becomes a normal textbox. Why is this happening?
Thanks a lot for your kind help.
