How to include a blank or null value from a foriegn key column?

[R Brian Lindahl]

I have a column like this:

 col.Field("DeliverToID")
                    .HeaderText("Deliver to")
                    .ForeignKeyField("CustomerID")
                    .ForeignKeyValue("Name")
                    .DataSource((IEnumerable<object>)ViewBag.GroupData)

                    .Add();

This is an optional field, so there isn't necessarily a value in DeliverToID, and it might be necessary for the field to be set back to null if it _did_ have a value. Is there a way to include a blank item at the top of the dropdown list to allow setting the value back to null?

[Karthick Kuppusamy]

Hi Brian, 

Thanks for Contacting Syncfusion support. 

We have analyzed your requirement and we have achieved your requirement through the edit template feature of the grid. 

Edit Template has three functions. 

•Create – It is used to create the control at time of initialize 

•Read –  It is used to read the input value at time of save 

•Write – It is used to assign the value to control at time of editing 

Please refer the below code snippet for further details. 

 

 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

            .AllowPaging()    /*Paging Enabled*/ 

             .SelectionType(SelectionType.Single) 

         .AllowResizing() 

             .ClientSideEvents(eve => { eve.ActionComplete("actionbegin"); }) 

            .AllowFiltering() 

              .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 

              .ToolbarSettings(toolbar => 

                { 

                    toolbar.ShowToolbar().ToolbarItems(items => 

                    { 

                        items.AddTool(ToolBarItems.Add); 

                        items.AddTool(ToolBarItems.Edit); 

                        items.AddTool(ToolBarItems.Delete); 

                        items.AddTool(ToolBarItems.Update); 

                        items.AddTool(ToolBarItems.Cancel); 

                    }); 

                }) 

                .ClientSideEvents(e => e.QueryCellInfo("actionComplete")) 

        .Columns(col => 

        { 

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 

     

            col.Field("CustomerID").HeaderText("Customer ID").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).DataSource((IEnumerable<object>)ViewData["LocalDataSource"]).TextAlign(TextAlign.Right).Width(90).ValidationRules(v => v.AddRule("required", true)).Add(); 

            

            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add(); 

            col.Field("OrderDate").HeaderText("Order Date").Format("{0:dd/MM/yyyy}").TextAlign(TextAlign.Right).Width(80).Add(); 

            col.Field("ShipCity").HeaderText("Ship City").Width(110).Add(); 

 

        })) 

    <script> 

        var items = [{ 

            text: "ALF", 

            value: "ALFKI" 

        }, { 

            text: "ANA", 

            value: "ANATR" 

        }, { 

            text: "ARO", 

            value: "AROUT" 

        }, 

        { 

            text: "BON", 

            value: "BONAP" 

        }, { 

            text: "", 

            value: "BOTTM" 

        }, 

        { 

            text: "ANT", 

            value: "ANTON" 

        }, { 

            text: "BER", 

            value: "BERGS" 

        }, 

        ]; 

        function create() { 

            return $("<input>"); 

        } 

 

        function write(args) { 

           

            args.element.ejDropDownList({ width: "100%", dataSource:items,fields: { text: "text", value: "value" }, enableSorting: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" });//dropdownlist 

        } 

 

        function read(args) { 

 

            return args.ejDropDownList("getValue"); 

        } 

    </script> 

Please refer the below UG Documentation and online demo link to know further details about EditTemplate in Grid. 

  

UG Documentation:  http://help.syncfusion.com/aspnetmvc/grid/editing#cell-edit-template. 

 

Online Demo: http://mvc.syncfusion.com/demos/web/grid/edittemplate. 

 

Sample. http://www.syncfusion.com/downloads/support/directtrac/general/ze/DropdownData-323582591-624468587-1617818588.zip. 

If we misunderstood your requirement then could you please share more details about your requirement. 

Regards, 

K.Karthick.