Getting value from dropdown, passing to grid (partial view) and reload grid only

[Yudish]

I have a view named ClaimList and a partial view _ClaimListGrid.

In the view there is a dropdown populated by a stored procedure.

Once i select something from the drop down it should take the ID from the drop down and query from database and then populate the related result in the grid (from partial view) without refreshing the whole page. Just the data grid should be refresh.

Grid from partial view _ClaimsListGrid

<div>

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

          .Datasource((System.Data.DataTable)ViewBag.dataSources)

          .Columns(col =>

          {

              col.Field("ItemDamaged").HeaderText("Item Damaged").TextAlign(TextAlign.Right).Width(75).Add();

              col.Field("Nature").HeaderText("Nature").Width(80).Add();

              col.Field("Value").HeaderText("Value").Width(100).Add();

              col.Field("AmountClaimed").HeaderText("Amount Claimed").Width(100).Add();

          })

          )

</div>

Code in view ClaimsList

    @Html.EJ().DropDownList("selectClaims").Datasource((IEnumerable<object>) ViewBag.datasourcex).DropDownListFields(df => df.ID("ClaimsId")

        .Text("ClaimsFile").Value("ClaimsFile")).WatermarkText("Switch Claim").Width("250px").ClientSideEvents(e => e.Change("click"))

@Html.Partial($"_ClaimsListGrid")

<script>

    function click() {

        var obj = $("#FlatGrid").data("ejGrid");

        $.ajax({

            url: '@Url.Action("DataSource", "Home")',

            type: "get"

        }).done(function (data) {

            obj.dataSource(data); 

        }).fail(function () {

            alert('error');

        });

    }

</script>

Controller

        public ActionResult ClaimsList()

        {

           

            const string req = "Select MAPD_N_ID,XXX_CH_IDFILE " +

                               "from dbo.MA_USERS_DETAILS with(nolock) " +

                               "where MAP_N_ID = 1 " +

                               "and APP_N_ID = 4 " +

                               "and isnull(XXX_CH_IDFILE,'') <> ''";

            var connectionCubage = new ConnectionCubage()

            {

                Base = Base,

                Password = Password,

                Serveur = Serveur,

                Id = Id

            };

            var leDataReader = connectionCubage.Requete(req);

            var claimsDetailses = new List<ClaimsDetails>();

            while (leDataReader.Read())

            {

                claimsDetailses.Add(new ClaimsDetails(leDataReader["MAPD_N_ID"].ToString(), leDataReader["XXX_CH_IDFILE"].ToString()));

            }

            ViewBag.datasourcex = claimsDetailses;

            return View();

        }

public JsonResult DataSource(string selectClaims)

        {

            //ViewBag.Value = selectClaims;

            var storedProcedured = new StoredProcedured()

            {

                Base = Base,

                Password = Password,

                Serveur = Serveur,

                Id = Id

            };

            string sp = "SP_ClaimsLists";

            var clientKey = selectClaims;

            object datasources = null;

            if (clientKey != null)

            {

                IDataParameter[] parametr =

                {

                    new SqlParameter("@ClientKey", SqlDbType.VarChar, 50) {Value = clientKey},

                    new SqlParameter("@language", SqlDbType.VarChar, 50) {Value = "en-US"}

                };

                var datasource = storedProcedured.RequeteDtStoredProcedure(sp, parametr);

                 datasources = ConvertDataTableToJson(datasource);

                return Json(datasources, JsonRequestBehavior.AllowGet);

            }

            return Json(datasources, JsonRequestBehavior.AllowGet);

        }

        private static object ConvertDataTableToJson(DataTable dt)

        {

            var jSonString = new JavaScriptSerializer();

            var rows = new List<Dictionary<string, object>>();

            Dictionary<string, object> row;

            foreach (DataRow dr in dt.Rows)

            {

                row = new Dictionary<string, object>();

                foreach (DataColumn col in dt.Columns)

                {

                    row.Add(col.ColumnName, dr[col]);

                }

                rows.Add(row);

            }

            var serialize = jSonString.Serialize(rows);

            var data = jSonString.Deserialize<IEnumerable<object>>(serialize);

            return data;

        }

        public ActionResult _ClaimsListGrid()

        {

            return View();

        }

Can you please help.

Thank you

[Venkatesh Ayothi Raman]

Hi Yudish, 

Thanks for using Syncfusion products. 

Based on your requirement we have prepared a sample for your convenience which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/PartialView1549787644 

In this sample, we have rendered the Dropdown list in main view and rendered the Grid in partial view without bounding the data source. Now, if we change the Dropdown value, then we have passed to the corresponding selected id using change event and getSelectedItemsId API in Dropdown list. 

Please refer to the following code example, Help documentation and Screenshot for your reference, 

Code example: 

[Main View] 

 

<div class="control"> 

    @Html.EJ().DropDownList("EmployeeTable").ClientSideEvents(e=>e.Change("onChange")).Datasource((IEnumerable<object>)ViewBag.dropdown).DropDownListFields(df => df.ID("EmployeeID").Text("EmployeeID").Value("EmployeeID")).WatermarkText("Select a value").Width("100%") 

</div> 

 

@{Html.RenderPartial("_Grid");} 

 

<script> 

 

    function onChange(args) { 

        var data = JSON.stringify({ id: this.getSelectedItemsID()[0] }); 

        $.ajax({ 

            type: "POST", 

            url: "/Home/Data", 

            async: false, 

            dataType: "json", 

            data:data, 

            contentType: "application/json", 

            success: function (data) { 

                 

                var gridObj = $("#Grid").ejGrid("instance"); //create a grid instance 

                gridObj.dataSource(data); //bound the dynamic dataSource for Grid while changing the value from Dropdown 

 

            }, 

            error: function () { 

                alert('hi'); 

            }, 

        }); 

    } 

</script> 

 

[Partial view] 

<h1>Grid Partial</h1> 

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

        

                .AllowPaging() 

                 

            

        //columns not declared 

            .Columns(col => 

            { 

                . .  .  

            }) 

 

) 

 

@Html.EJ().ScriptManager() 

Note: In above code example, we have defined the scriptmanager for render the widgets in partialview if unobtrusive method is disabled       

Help Documentation: https://help.syncfusion.com/api/js/ejdropdownlist#events:change 

Screenshot: 

 

                      

 

Regards, 

Venkatesh Ayothiraman.