Edit Template

[Nicholas Picardi]

Hi all,

It's possible to populate with stored procedure populate the field of edit template?

this is my code:

Grid:

@{Html.EJ().Grid<Object>("FlatGrid")

                    .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.data).UpdateURL("/Home/CellEditUpdate").InsertURL("/Home/CellEditInsert").RemoveURL("/Home/CellEditDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))

                    .AllowPaging()

                    .AllowResizeToFit()

                    .AllowTextWrap()

                    .TextWrapSettings(wrap => { wrap.WrapMode(WrapMode.Both); })

                    .AllowSorting()

                    .AllowScrolling()

                    .ScrollSettings(col => { col.Width(1800); })

                    .AllowSelection()

                    .SelectionType(SelectionType.Single)

                    .IsResponsive(true)

                    .EnableResponsiveRow(true)

                    .AllowFiltering()

                    .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

                    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); })

                    .ToolbarSettings(toolbar =>

                    {

                        toolbar.ShowToolbar().ToolbarItems(items =>

                        {

                            items.AddTool(ToolBarItems.Edit);

                            items.AddTool(ToolBarItems.Update);

                        //items.AddTool(ToolBarItems.Delete);

                    });

                    })

                    .Columns(col =>

                    {

                        col.Field("Id").HeaderText("Id").IsPrimaryKey(true).Visible(false).Add();

                        col.Field("Cabin").HeaderText("Cabin").AllowEditing(false).Width(100).Add();

                        col.Field("Line").HeaderText("Line").AllowEditing(false).AllowResizing().Width(100).Add();

                        col.Field("Turbine").HeaderText("Turbine").AllowEditing(false).AllowResizing().Width(100).Add();

                        col.Field("StatusCode").HeaderText("Status code").AllowEditing(false).AllowResizing().Width(150).Add();

                        col.Field("AlarmDescription").HeaderText("Main fault description").AllowEditing(false).AllowResizing().Width(150).Add();

                        col.Field("AddnAllarmDescription").HeaderText("Additional fault description").AllowEditing(false).AllowResizing().Width(150).Add();

                        col.Field("FalckTaxonomy").HeaderText("Allocated taxonomy").AllowEditing(false).AllowResizing().Width(150).Add();

                        col.Field("Timekey").HeaderText("Timekey").AllowEditing(false).AllowResizing().Width(125).Add();

                        col.Field("dt_from").HeaderText("Start Date").Format("{0:dd/MM/yyyy HH:mm:ss}").AllowEditing(false).AllowResizing().Width(150).Add();

                        col.Field("dt_to").HeaderText("End Date").Format("{0:dd/MM/yyyy HH:mm:ss}").AllowEditing(false).AllowResizing().Width(150).Add();

                        col.Field("KindofActivity").HeaderText("Kind of Activity").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.kindofactivities).AllowResizing().Width(150).Add();

                        col.Field("ReasonDescription").HeaderText("Reason Description").AllowResizing().Width(150).Add();

                        col.Field("MA_StatusCode").HeaderText("Reallocated status code").AllowEditing(true).EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.alarms).ForeignKeyField("MA_StatusCode").AllowResizing().Width(150).Add();

                    //col.Field("Reallocated_FaultDescription").HeaderText("Reallocated Fault Description").EditType(EditingType.Dropdown).DataSource((List<object>)ViewBag.alarms1).AllowResizing().Width(150).Add();

                    //col.Field("Reallocated_AddFaultDescription").HeaderText("Reallocated Add Fault Description").EditType(EditingType.Dropdown).DataSource((List<object>)ViewBag.alarms2).AllowResizing().Width(150).Add();

                    //col.Field("Reallocated_Taxonomy").HeaderText("Reallocated Taxonomy").AllowEditing(false).AllowResizing().Width(150).Add();

                    col.Field("FullDescription").HeaderText("Reallocated Full Description").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.FullAlarm).ForeignKeyField("FullDescription").AllowResizing().Width(400).Add();

                        col.Field("timekey_changed").HeaderText("Timekey Changed").EditType(EditingType.Numeric).ValidationRules(v => v.AddRule("range", "[1,6]").AddRule("required", true)).Width(150).Add();

                        col.Field("Timekey_ReasonDescription").HeaderText("Timekey Reason Description").AllowResizing().Width(150).Add();

                        col.Field("Unallocated_alarms_flag").HeaderText("Unallocated_alarms_flag").AllowResizing().Visible(false).Width(150).Add();

                        col.Field("ServiceCompany").HeaderText("Service Company").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.service).AllowResizing().Width(150).Add();

                        col.Field("Responsability").HeaderText("Responsability").AllowResizing().Width(150).Add();

                        col.Field("sk_plant").HeaderText("sk_plant").AllowResizing().Visible(false).Add();

                    }).ClientSideEvents(eve => eve.ActionComplete("Complete")).Render();

    }

Template:

<script id="template" type="text/template">

    <table cellspacing="10">

        <tr>

            <td>Reallocated Full Description</td>

            <td>

                <select id="FullDescription" name="FullDescription" value="{{:FullDescription}}" class="e-field e-ejinputtext">

                    <option value="Argentina">Argentina</option>

                    </select>

</td>

            

        </tr>

    </table>

</script>

In Edit mode the Fields "FullDescription" isn't populate with stored procedure

Thanks,

Nicholas

[Saravanan Arunachalam]

Hi Nicholas, 

Thanks for contacting Syncfusion’s support. 

We understood from your query you need to render the ejDropDownlist with specified dataSource of corresponding column on dialogTemplateEdit of Grid control and we have achieved this requirement by using “ActionComplete” event of Grid control. In the ActionComplete event, we have rendered the ejDropDownList based on the element in the edit form. Please refer to the below code example. 

<script type="text/template" id="Template"> 

    <b>Order Details</b> 

    <table cellspacing="10"> 

        . . . 

            <td style="text-align: right;"> 

                Employee ID 

            </td> 

            <td style="text-align: left"> 

                <input id="EmployeeID" name="EmployeeID" value="{{: EmployeeID}}" class="e-field e-ejinputtext valid" style="width: 100px; height: 28px" /> 

            </td> 

          . . . 

    </table> 

 

</script> 

 

@(Html.EJ().Grid<OrdersView>("Editing") 

                .Datasource(ds =>  

                    ds.Json((IEnumerable<object>)ViewBag.datasource) 

                    .UpdateURL("/Grid/NormalUpdate") 

                    .InsertURL("/Grid/NormalInsert") 

                    .RemoveURL("/Grid/NormalDelete") 

                    .Adaptor(AdaptorType.RemoteSaveAdaptor)) 

        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#Template"); }) 

           . . .   

        .Columns(col => 

        { 

           . . . 

            col.Field("EmployeeID").HeaderText("Employee Name") 

                .DataSource((IEnumerable<object>)ViewBag.dataSource2).TextAlign(TextAlign.Left).Width(90).Add(); 

             

             

        }) 

            .ClientSideEvents(e => e.ActionComplete("onBeginEdit")) 

) 

<script type="text/javascript"> 

    function onBeginEdit(args) { 

        if (args.requestType == "beginedit" || args.requestType == "add") { 

            var ele = $(".gridform").find("#EmployeeID"), data = this.model.columns[2].dataSource; 

            //Render the dropdownlist based on the column datasource. 

            ele.ejDropDownList({ 

                dataSource: data, 

                fields: { text: "EmployeeID", value: "EmployeeID" }, 

            }); 

        } 

    } 

     

</script> 

 

We have created a sample that can be downloaded from the below link. 

http://www.syncfusion.com/downloads/support/forum/128575/ze/F128575-5466518  

Regards, 

Saravanan A.