Populating grid cell (drop down list box) in MVC 5 (non-classic)

[Edmund Herbert]

Hi Guys do you have an example of populating a grid cell (drop down list box) with Jason data (non-classic)

Thanks in advance

Edmund Herbert

[Gowthami V]

Hi Edmund,

Thanks for using Syncfusion products.

Based on your requirement we have created a sample and the same can be downloaded from the following link.

Sample Link: Sample.zip

In the above sample we have used ColumnTemplate for rendering the dropdown list control in each cell of the grid. Using the Create client side event of the grid, we have set the datasource for the ejDropDownList.

Please refer the below code snippet.

<script type="text/x-jsrender" id="columnTemplate">

     <input type="text" class="bikeList" />

</script>

  @(Html.EJ().Grid<Sample.OrdersView>("FlatGrid")

.Columns(col =>

col.HeaderText("DropdownColumn").Template(true).TemplateID("#columnTemplate"). Width(100).Add();

})

.ClientSideEvents(eve => { eve.Create("create");})

   )

<script type="text/javascript">

    function create(args)

    {

       $('.bikeList').ejDropDownList({

            dataSource: BikeList, //Json data

            fields: { id: "empid", text: "text", value: "text" },

            selectedItemIndex: 2

    });

        }

    </script>

Please try the sample and let us know if you have any queries.

Regards,

Gowthami V.

[Edmund Herbert]

Hi,
Thanks for example, I was looking for example as follows:

• MVC 5 latest Syncfusion build.
• CRUD inline editing.
  
• Ajax Datasource for list box (remote data from table in database)
• Using EF Code first (simple database) not Northwind Database.

I apologize if I am making your life difficult, you support service is amazing, I am going to recommend your product to all the developers that I know

keep up the good work. 

Thanks

Edmund Herbert

[Saravanan Arunachalam]

Hi Edmund,

Thanks for your update.

Based on your requirement we have created the sample and the same can be downloaded from the following link.

Sample Location: http://www.syncfusion.com/downloads/support/directtrac/118362/crudEF-640147725.zip

In the above sample we have bound data from Entity Framework to Grid and also performed the CRUD operation with inline form editing using “RemoteSaveAdaptor” of ejDataManager.  Please refer the following code snippet.

@(Html.EJ().Grid<EJGrid.Models.Order>("Grid")

                        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).Adaptor(AdaptorType.RemoteSaveAdaptor)

            .UpdateURL("Home/Update").InsertURL("Home/Insert").RemoveURL("Home/Remove"))

               . . . . . . .

            

)

[Home/Insert]

public ActionResult Insert(Order value)

        {

            simpledbEntities3 obj = new simpledbEntities3();

            obj.Orders.Add(value);

            obj.SaveChanges();

            var DataSource = new simpledbEntities3().Orders.ToList();

            return Json(DataSource, JsonRequestBehavior.AllowGet);

        }

[Home/Update]

public ActionResult Update(Order value)

        {

            simpledbEntities3 obj = new simpledbEntities3();

            obj.Entry(value).State = EntityState.Modified;

            obj.SaveChanges();

            var DataSource = new simpledbEntities3().Orders.ToList();

            return Json(DataSource, JsonRequestBehavior.AllowGet);

        }

Using “DataBound” and “ActionComplete” Grid events we have rendered dropdown control in template column with the dropdown’s datasource retrieved using ajax postback. Please refer the following code snippt.

@(Html.EJ().Grid<EJGrid.Models.Order>("Grid")

                 . . . . . . .

             .ClientSideEvents(eve => { eve.DataBound("dataBound").ActionComplete("complete"); })

)

function dataBound(args) {

        renderDropDown();

    }

function renderDropDown() {

        var dataManger;

        $.ajax({

            url: "Home/Data",

            success: function (result) {

                dataManger = result;

                $('.Shipdetails').ejDropDownList({

                    dataSource: dataManger,

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

                    selectedItemIndex: 1

                });

              

            }

        });

       

    }

For your information, “DataBound” Grid event would be triggered at initial Grid render when datasource is successfully bound to Grid.

Please let us know if you have any queries.

Thanks,

Saravanan.A

[Edmund Herbert]

Hi,
Thank you for your speedy reply, I have one question, you are using Syncfusion.EJ, Version=12.4450.0.34, I have Syncfusion.EJ, Version=12.4450.0.24 where can I download Syncfusion.EJ, Version=12.4450.0.34.

The following :

ClientSideEvents(eve => { eve.DataBound("dataBound").ActionComplete("complete"); })
eve.DataBound is not available in 12.4450.0.24  

Thanks

Edmund Herbert

[Gowthami V]

Hi Edmund,

Sorry about the inconvenience caused.

For your kind information , the "DataBound" client side event of the grid is included in the version 12.4.0.30 only.So that it throws error while using 12.4.0.24.

Please follow the below steps to upgrade from version 12.4.0.24 to 12.4.0.34.

1.      Download and install the Essential Studio v12.4.0.34 from the below link.

            http://www.syncfusion.com/forums/118366/essential-studio-2014-volume-4-service-pack-2-release-v12-4-0-34-available-for-download

2.      Replace the Syncfusion dlls, scripts, and css in your project from the following location.

            Scripts and Css: C:\Program Files (x86)\Syncfusion\Essential Studio\12.4.0.34\JavaScript\assets

Dlls: C:\Program Files (x86)\Syncfusion\Essential Studio\12.4.0.34\Assemblies

Please let us know if you have any queries.

Regards,

Gowthami V.

[Edmund Herbert]

Thanks for reply I still have one issue, is to save the selected drop down list item back to the database, example I want to choose item and the when it is updated the chosen value from listbox is saved to database.

Regards
Edmund Herbert

[Gowthami V]

 Hi Edmund,

Thanks for your update.

Before proceeding with this query we need to clarify the below details with you.

1.      Whether you need to render the dropdownlist at initial time of grid rendering by using ColumnTemplate as in the below screenshot.

Screenshot Link:  columnTemplate.zip

[Or]

2.      You need to render the dropdownlist at the time of editing the record and save the selected value of the dropdownlist to the database as in the below screenshot.

      Screenshot Link: while_editing.zip

Please get back to us with the above requested details and we will update you the response as early as possible.

Regards,

Gowthami V.

 
 
 

[Edmund Herbert]

Hi Thank you very much for you rapid reply I need to be able to select from drop down list box when editing a record and then saving result to database.

http://www.syncfusion.com/downloads/support/directtrac/118362/while_editing443366245.zip

Thank you in advance

Edmund Herbert

[Gowthami V]

Hi Edmund,

Thanks for your update.

Based on your requirement we have modified the sample and the same can be downloaded from the following link.

Sample Link: EJGrid.zip

In the above sample we have removed the ColumnTemplate because you need not to render the dropdown list at initial time of grid rendering.

Please remove the below highlighted snippet from the previously updated sample.

<script type="text/x-jsrender" id="columnTemplate">

    <input type="text" class="Shipdetails" value="{{:CustomerID}}"/>

</script>

@(Html.EJ().Grid<EJGrid.Models.Order>("Grid")

. . . .

. . . .

.Columns(col =>

        {

col.HeaderText("ShipCity").Template(true).TemplateID("#columnTemplate").Width(100).Add();

           

        })

        .ClientSideEvents(eve => { eve.DataBound("dataBound").ActionComplete("complete").ActionBegin("begin"); })

//And also remove the corresponding script files for the mentioned events

)

We can achieve your requirement by set “EditType” property of the column as “Dropdown” for the column in which you need to render the dropdown list while editing the record.

Please refer the below code snippet.

@(Html.EJ().Grid<EJGrid.Models.Order>("Grid")

.Columns(col =>

        {

. . . .

     col.Field("CustomerID").HeaderText("Customer ID") .EditType(EditingType.Dropdown) .Width(100).Add();

           

        })

   

)

Please try the sample and let us know if you have any queries.

Regards,

Gowthami V.

[Edmund Herbert]

Thank you for your speed reply I have tried to clarify my requirements

 

 

Example I have table called Cars and I enter Ford, BMW and Porsche into Cars table.

 

I have another table called Sales and a field called Cars.

 

I want to have a drop down list box (cars) that I can select either a Ford, BMW or Porsche

 

if I select Ford then I want the sales field cars to contain Ford and save it to database.

 

I apologize if I was not very clear, I am not fussed which example you use see below  selection you gave me as long as I can choose a car and save it to database.

 

Thanks in advance

 

Edmund Herbert

 

.

 

1.      Whether you need to render the dropdownlist at initial time of grid rendering by using ColumnTemplate as in the below screenshot.

Screenshot Link:  columnTemplate.zip

[Or]

2.      You need to render the dropdownlist at the time of editing the record and save the selected value of the dropdownlist to the database as in the below screenshot.

      Screenshot Link: while_editing.zip 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Gowthami V]

Hi Edmund,

Thanks for your update.

Based on your requirement we have modified the sample and the same can be downloaded from the following link.

Sample Link: EJGrid.zip

In the above sample we have created two tables with the name “Table” and “SalesTable”. In the Table we have the list of cars and in the SalesTable we have the list of cars and sales detail as you have mentioned in the previous response.

We have passed the external data source for the dropdown list column “CarModel” ,for that we have passed the data source to the “CarModel” column in the value and text format as follows.

public ActionResult Index()

        {

            var carDetails = new simpledbEntities3().Tables.Select(c=>c.carModel).ToList();

            var SalesList = new List<object>();

            foreach (var item in carDetails)

            {

                SalesList.Add(new { value = item, text = item });

            }

            ViewData["DropDownSource"] = SalesList;

. . . .

}

@(Html.EJ().Grid<EJGrid.Models.SalesTable>("Grid")

. . . .

.Columns(col =>

        {

col.Field("CarModel").HeaderText("Car Model").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewData["DropDownSource"]).Width(150).Add();

. . . .

  })

    . . . .

)

And also while editing the row the corresponding car details which was selected from the dropdown list will be saved in the “SalesTable”.

Please refer the below code snippet.

public ActionResult Update(SalesTable value)

        {

       obj.Entry(value).State = EntityState.Modified;

            obj.SaveChanges();

            var DataSource = new simpledbEntities3().SalesTables.ToList();

}

//Same for insert and delete also

Please try the sample and let us know if you have any queries.

Regards,

Gowthami V.

[Edmund Herbert]

Hi Gowthami

Thanks for your help the last update is what I was looking for again thank you very much.

Regards

Edmund Herbert

[Gowthami V]

Hi Edmund,
 
Thanks for your update. Please get back to us if you need further assistance. We will happy to assist you.
 
Regards,
Gowthami V.