1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to add drop down list contents to a grid.

How to add drop down list contents to a grid.

I have looked I the documentation for this, but didn't find what I was looking for, hope someone can help.

I have the following grid, with two issues:

1) I've got a text field in the input model 'DeviationReason' and when editing the grid this needs to be selected from a dropdown list.
     I've set this to DropdownEdit but I assume I need to attach some sort of list to this?

E.G. Grid:
           @(Html.EJ().Grid^BertReport.Models.MethodDeviation^("DryFlatGrid")
                   .Datasource((IEnumerable^BertReport.Models.MethodDeviation^)Model.DryMethodDeviations)
                   .EnableRowHover(true)
                   .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);
                       });
                   })
                   .Columns(col =>
                   {
                       col.Field("ID").HeaderText("").IsPrimaryKey(true).AllowEditing(false).Visible(false).Add();
                       col.Field("DeviationReason").HeaderText("Deviation Reason").Width("60%").EditType(EditingType.DropdownEdit).Add();
                       col.Field("WetRun").HeaderText("W").Width("5%").EditType(EditingType.BooleanEdit).Add();
                       col.Field("Run1").HeaderText("1").Width("5%").EditType(EditingType.BooleanEdit).Add();
                       col.Field("Run2").HeaderText("2").Width("5%").EditType(EditingType.BooleanEdit).Add();
                       col.Field("Run3").HeaderText("3").Width("5%").EditType(EditingType.BooleanEdit).Add();
                       col.Field("Run4").HeaderText("4").Width("5%").EditType(EditingType.BooleanEdit).Add();
                       col.Field("Run5").HeaderText("5").Width("5%").EditType(EditingType.BooleanEdit).Add();
                       col.Field("Factor").HeaderText("Factor").Width("10%").AllowEditing(false).Add();
                   })
            )

2) The grid shows the expected data, but nothing is happening when I try to edit or add a line to this table. 
     Have I done something wrong, or am I missing something out?


The  (Chrome) browser Console was giving a 'Uncaught TypeError: Cannot read property …' error,  then it changed.
I now get the following Browser error when clicking the Edit toolbar button: (and a similar one if double clicking a row)

Uncaught TypeError: n.render[(this._id + "JSONEditingTemplate")} is not a function
 at Object._edit (VM507 ej.web.all.min.js:10)
 at Object.sendDataRenderingRequest (VM507 ej.web.all.min.js:10)
 at Object._processBindings (VM507 ej.web.all.min.js:10)
 at Object.startEdit (VM507 ej.web.all.min.js:10)
 at Object._toolbarOperation (VM507 ej.web.all.min.js:10)
 at Object._toolbar (VM507 ej.web.all.min.js:10)
 at Object._trigger (VM507 ej.web.all.min.js:10)
 at Object._onItemClick (VM507 ej.web.all.min.js:10)
 at HTMLLIElement. ^anonymous^ (VM507 ej.web.all.min.js:10)
 at HTMLLIElement.dispatch (VM506 ej.web.all.min.js:10)

Any ideas?

** using ^ instead of les than/greater than, as they disappear!


8 Replies
PK Padmavathy Kamalanathan Syncfusion Team February 7, 2020 06:37 AM UTC

Hi Garry, 

Thanks for contacting Syncfusion Forums. 

QUERY1: How to add dropdown list content to grid 
 
From your query we understand that you have set edit type as “DropDownEdit” for one of the columns of grid and you need to bind dropdown data to that column. By default, if you bind data(for example, data as list) to grid and set one of it’s column as dropdown column, data for that dropdown column will be set from that list (list that you have binded to grid) and you need not to set data separately to that dropdown column.  

Please check the below screenshots, 

Data list binded to grid 
 
 


Column definition with edit type as drop down for the column “CustomerID” 
 
 

Dropdown with data from the list while editing the “CustomerID” column 
 
 
 
 
Please check the below sample, 

QUERY2: got type error while trying to edit or add record 
 
Please make sure that you have referred the jsRender script in your application. Please check the below screenshot, 

 

The reported issue occurs when we use template in grid which has not rendered properly. Please let us know if you use any template in your grid.  

Please share us the below details so that we could help to resolve your issue. 
  1. Please let us know whether you have used any template (column template/edit template)
  2. Please share us your complete grid rendering code zipped.
  3. If possible, reproduce the issue in the above sample and share us.
  4. Share us your version details.

If you have further queries, please get back to us. 

Regards, 
Padmavathy Kamalanathan 



GG Garry Grierson February 7, 2020 02:32 PM UTC

  @Scripts.Render("https://cdn.syncfusion.com/js/assets/external/jsrender.min.js") is in the shared layouts file.

It doesn’t look like there are any templates used.

I’ve added the cshtml file which holds these grids, as a zip.

I believe I have trial versions on EJ1 and EJ2 on my machine.

Right now I think I should concentrate on the general edit problem  (issue 2 above).

I first got the browser error when I only had EJ2 trial, after talking to support I Installed (syncfusionessentialjavascript-js1_trial) but the error is still appearing. Was this the correct thing I’ve loaded, and do I need to do anything else in order to make the app recognize the EJ1 commands?

Should I remove these trial versions and reinstall a version of EJ1? If so how do I do this what should I be loading?


Attachment: testcshtml_628d2e92.zip

GG Garry Grierson February 8, 2020 07:18 PM UTC

It doesn’t look like the ej.web.all.min.js is not being recognised by the solution in general. As I made a new (standard simple) Controller and View and hooked up the same grid with the same model. This was able to be edited as you would expect when using the view bag, and I was able to wire up save routines to update the database with no issue.

However my initial grids still have the same error. I tried passing the date via view bag rather than the partial view type originally setup.

E.g.

model.DryMethodDeviations = conTxt.MethodDeviations.Where(x => x.JobID == jobID && x.StackID == stackID && x.TestTypeID == testTypeID && x.WetChem == false).ToList();

model.WetMethodDeviations = conTxt.MethodDeviations.Where(x => x.JobID == jobID && x.StackID == stackID && x.TestTypeID == testTypeID && x.WetChem == true).ToList();

 ViewBag.datasource = model;  //testing

// or

return PartialView(TPMcalclulations(model));

// shows the data, but gives a browser error n.render[(this._id + “JSONEditingTemplate”)] is not a function

 

But this made no difference, and I’m still getting the same error: see attached screen shot.

So it appears that the issue is with the way the model data is being pulled into the grid.

Could this be because of the partial view?

Or is there something wrong with the permissions of the passed model?

I’ve tried initiating  this in the cshtml grid various ways, but it doesn't make any difference.

E.g.

.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource.DryMethodDeviations).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) // Using the ViewBag Should jump to the relevant code – works in my test code but doesn’t allow editing in the main

 .Datasource((IEnumerable<BertReport.Models.MethodDeviation>)Model.WetMethodDeviations)

// Simple test using the model – also shows text in grid but dosn’t allow editing. (same browser error for both)

               

 

 


Attachment: BrowserError_9507d71b.zip

PK Padmavathy Kamalanathan Syncfusion Team February 10, 2020 07:33 AM UTC

Hi Garry, 

Thanks for your update. 

QUERY: Issue in returning data with partial view 
 
From your query we understand that you are able to render grid and bind data to grid if you use simple controller with view  page. But you couldn’t be able to return data to partial view page. We have prepared sample with grid rendered in partial view page. 

Please check the below sample, 

Please check the below help documentation which describes how to work with partial views, 

You could compare this with yours and find where you have gone wrong in binding data to grid. 

Still facing the issue, please provide the below details, 
  1. Please let us know
i) how you are calling your partial view page from main page 
ii) how you are calling the controller from the partial view page 
iii)how you are returning the data model to partial view 
  1. Please share your partial view page, main view page and controller with data model (if possible)
  2. Share us your version details.
  3. Please use actionFailure event of grid so that you could find any errors if you get other than console errors.
Please check the below help documentations, 
 
If you have further queries, please get back to us. 

Regards, 
Padmavathy Kamalanathan 
 
 
 




GG Garry Grierson February 12, 2020 12:20 PM UTC

The drop-down list sample given above takes it's list items from the current text entered into the appropriate column.
What I want is to be able to add a predefined list of options to the drop-down list, irrespective of what (if anything) has already been entered into the column.

e.g. Predefined Text
          Text line 1
          Text line 2
          Text line 3
          etc...

I saw the documentation for making a simple drop-down list here: https://mvc.syncfusion.com/demos/web/dropdownlist/default
SO I just want to do something like this for a column in a grid, ether bind a simple list like this, or a list from a data source.

PK Padmavathy Kamalanathan Syncfusion Team February 13, 2020 08:50 AM UTC

Hi Garry, 

Thanks for your update. 

QUERY: need to add predefined list of options to drop down list 
 
From your query we understand that you are expecting to set separate data to the dropdown list in grid. This can be achieved by setting data source to grid in the actionComplete event of grid with requestType “beginedit” and “add”. 

Please check the below code snippet, 

@(Html.EJ().Grid<object>("Grid1").Datasource((IEnumerable<object>)ViewBag.data).AllowPaging() 
                .ClientSideEvents(eve => eve.ActionComplete("actionComplete")) 
                .Columns(col => 
                 { 
                     col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add(); 
                     col.Field("CustomerID").HeaderText("Customer ID").EditType(EditingType.DropdownEdit).Add();    
 
                 })) 
 
<script> 
    function actionComplete(args) { 
        //while editing the grid 
        if (args.requestType == "beginedit" || args.requestType == "add") { 
            var dpDataSource = [{ value: 'One', text: 'One' }, { value: 'two', text: 'two' }, { value: 'three', text: 'three' }, { value: 'four', text: 'four' }, { 
                value: 'five', text: 'five'}, ]; 
            $("#Grid1CustomerID").ejDropDownList({ dataSource: dpDataSource, selectedIndex: 1}); //Set the new Dropdown datasource 
        } 
    } 
</script> 


Please check the below help documentation, 

If we have misinterpreted your query, please explain your query with more clarity. 

If you have further queries, please get back to us. 

Regards, 
Padmavathy Kamalanathan 



GG Garry Grierson February 21, 2020 09:18 AM UTC

Thank you for this,

I now have a drop down list that returns the same text as shown on the grid column, but I need to update two values in the database when this grid column is selected.

Eg. I have the chosen text as a value that I can write to the DB, but I also need to write a numeric value that corresponds to the selected text.

Can the dropdown code above be changed to do this?
Or can it be changed to read from a model linked to a database?  (Using MCV)

PK Padmavathy Kamalanathan Syncfusion Team February 24, 2020 01:51 PM UTC

Hi Garry,

Thanks for your update.

QUERY: Need to write numeric value along with text in DB

From your query we understand that you are trying to write numeric value along with the dropdown selected text to DB. This requirement is related to your application (not component side) and you can achieve it in application level. Please let us know what you are expecting to do in the component side to achieve your requirement.

If you need to know how to write to DB (to server end), please check the below help documentation,

Regards,
Padmavathy Kamalanathan


Loader.
Up arrow icon