We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Get data for grid based on drop down value

Thread ID:

Created:

Updated:

Platform:

Replies:

131402 Jul 7,2017 08:30 AM Nov 10,2017 07:57 AM ASP.NET MVC 9
loading
Tags: Grid
sateesh kumar
Asked On July 7, 2017 08:30 AM

Hi Team,

Am new to MVC. 
My target is show data in grid based on the drop down list.
am able to show the list of data in drop down from one table(Source table 1) successfully.
but am struck in how to display grid data based drop down value from second table(Source table 2).
Thanks for the advance.

Regards,
Sateesh

Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 10, 2017 08:16 AM

Hi Sateesh, 

Thanks for contacting Syncfusion support. 

Before we proceed with your requirement, we need some clarifications. 

1. According to your requirement you need to bind data for grid based on dropdownlist value. So, please share the code example that you have used in your sample.  

2. Are you binding the data for the grid from the same table.  

3. You have mentioned that you have face issue while binding data from the second table(Source table 2). Here Source table 2 is a foreign-key table or different table. 
 
4. Do you face any script error while displaying grid data from the second table(Source table 2). If yes, share the screenshot.  
 
5. Essential Studio Version details. 
 
We have created a sample with dropdownlist and send postback to server on dropdown change event. In server-side we filter data based on dropdown value and return the data. In client-side we bind the data to the grid using dataSource method of ejGrid. 


Regards, 
Prasanna Kumar N.S.V 
 


sateesh kumar
Replied On October 28, 2017 05:17 AM

Dear  Prasanna Kumar,

Please find the attached my project.

In the project am able to assign the data to drop down(table1-States), and grid(table2-Cities).

Based on drop down value i want to change grid data. table 1 and table 2 relation with primary key and foreigen keys.

i used code first approach .

Regards,

J.Sateesh Kumar



Attachment: Cascade_Grid_e6dbd82b.7z

Vignesh Natarajan [Syncfusion]
Replied On October 30, 2017 01:09 PM

Hi Sateesh Kumar, 

Thanks for using Syncfusion products. 

We have analyzed your query and we suspect that you want to change the second grid data based on the dropDownList value. We have prepared a sample which can be downloaded from below link 


Refer the below code snippet. 

@Html.EJ().DropDownList("States").Datasource((IEnumerable<object>)ViewBag.state).DropDownListFields(df => df.Text("text")).Width("400").ClientSideEvents(eve => eve.Change("drpvaluechange")) 
 
@(Html.EJ().Grid<object>("Flat") 
 . . . . . . .  
 
        })) 
 
 
<script> 
    function drpvaluechange(args) { 
    
        $.ajax({ 
            url: "/Grid/Dropdown", 
            type: "POST", 
            dataType: "json", 
            data: { "country": args.text }, 
            success: function (data) { 
                var grid = $("#Flat").ejGrid("instance"); 
                grid.dataSource(data); 
            } 
        }); 
    } 
</script> 
 

Note: In the Change event of the DropDownList, ajax post is sent to server with the text and based on that data is filtered and On ajax success the second Grid data source is updated using dataSource method of the grid. 
Refer our online documentation for your reference    

Regards, 
Vignesh Natarajan  


sateesh kumar
Replied On November 6, 2017 08:49 AM

Dear Vignesh,

Thank you Vignesh for your help. 

using java script able to call the controller and getting the filter data. but m not able to refresh the grid with new data.

In view-

@Html.EJ().DropDownList("StateId").Datasource((IEnumerable<object>)ViewBag.StateDs).DropDownListFields(df => df.Text("StateName").Value("StateId")).Width("200").ClientSideEvents(eve => eve.Change("drpvaluechange"))


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

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

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

     .AllowSorting().AllowPaging().PageSettings(page=>page.PageSize(5)).IsResponsive()

             .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("CityId").HeaderText("CityId").IsPrimaryKey(true).TextAlign(TextAlign.Left).Width("8%").AllowEditing().Add();

         col.Field("StateId").HeaderText("StateId").TextAlign(TextAlign.Left).Priority(4).Width("15%").AllowEditing().Add();

         col.Field("CityName").HeaderText("CityName").Width("15%").AllowEditing().Add();

         col.Field("CityState").HeaderText("CityState").TextAlign(TextAlign.Left).Priority(4).Width("15%").AllowEditing().Add();


     }))

 function drpvaluechange(args) {

        debugger;

        $.ajax({

            url: "/School/GetCities",

            type: "POST",

            dataType: "json",

            data: { "StateId": args.selectedValue },

            success: function (data) {

                var grid = $("#Flat").ejGrid("instance");

                grid.dataSource(data1);

            },

            error: function () {

                alert('error');

            }

        });

    }


Regards

J. Sateesh Kumar



Vignesh Natarajan [Syncfusion]
Replied On November 7, 2017 06:40 AM

Hi Sateesh Kumar, 

Thanks for the update. 

In your code example we found that you have defined the wrong value in grid dataSource method which is the root cause of an issue.  

Please refer the below codes 

function drpvaluechange(args) { 
        debugger; 
        $.ajax({ 
            url: "/School/GetCities", 
            type: "POST", 
            dataType: "json", 
            data: { "StateId": args.selectedValue }, 
            success: function (data) { 
                var grid = $("#Flat").ejGrid("instance"); 
                grid.dataSource(data1); 
            }, 
            error: function () { 
                alert('error'); 
            } 
        }); 
    } 


So modify the code as below snippet 

            success: function (data) { 
                var grid = $("#Flat").ejGrid("instance"); 
                grid.dataSource(data); 
            }, 
 


If the issue still exist please provide the following details 

1. Grid Controller code example.  

2. If possible, replicate the issue in the attached sample.  

3. Essential Studio Version details.  

Regards, 
Vignesh Natarajan 



sateesh kumar
Replied On November 7, 2017 09:43 AM

Dear Vignesh,

am using visual studio 2013. for this project we are using .netframework 4.5

please find the attached files.

Thansk for advance,

J Sateesh Kumar




Attachment: Refresh_Grid_based_on_Drop_Down__a36630a3.7z

Vignesh Natarajan [Syncfusion]
Replied On November 8, 2017 07:39 AM

Hi Sateesh Kumar, 

We have analyzed your two different types of sample. In type 1, you have updated dataSource in controller page by changing the Viewbag data by calling Ajax post. But it is not the correct approach. You have to update the DataSource on Ajax success by returning the data in form of Json. 

Please refer below codes 

Cshtml 

function drpvaluechange(args) { 
    
        $.ajax({ 
            url: "/Grid/Dropdown", 
            type: "POST", 
            dataType: "json", 
            data: { "country": args.text }, 
            success: function (data) { 
                var grid = $("#Flat").ejGrid("instance"); 
                grid.dataSource(data); 
            } 
        }); 
    } 

C# 

public ActionResult Dropdown(string country) 
        { 
            var employeeID = OrderRepository.GetAllRecords().Where(c => c.ShipCountry == country).ToList(); 
 
            return Json(employeeID, JsonRequestBehavior.AllowGet); 
        } 

Note: In Ajax post, we have passed the selected value of dropdownlist and filter the data in controller side and return the data in form of JSON and on ajax success, we have updated the Grid dataSource using dataSource method.  

For your convenience we have prepared a sample which can be downloaded from below link 

Regards, 
Vignesh Natarajan 


sateesh kumar
Replied On November 9, 2017 12:38 AM

Hi Vignesh,

as you said am passed the json from the controller only. but still am not able to refresh the grid with new data.

Note: Initially my ej grid load the all the cities . now am trying to change the grid when user select any one from the drop down.

Regards,

J. Sateesh Kumar



Vignesh Natarajan [Syncfusion]
Replied On November 10, 2017 07:57 AM

Hi Sateesh Kumar, 

Based on your suggestion we have prepared a sample which can be downloaded form below link 


Note: Initially Grid will bounded will all the States value and it dataSource will be updated based on the dropdown select value. 

Kindly share the following details to help you better 

  1. Share the full Grid rendering code(cshtml and controller page)
 
  1. Share the screenshot of console window for script error (if any)
 
 
  1. Share the screenshot of the network tab(Response page) when the post is send from the clientside to server
 
  1. And also share the network tab(Headers page) on Ajax success.
 
  1. If possible try to reproduce the issue in the provided sample
 
  1. Or share the issue producible sample
 
Regards, 
Vignesh Natarajan  



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;