Refresh Grid in Partial view

[Bernard Jurlina]

I have a little problems with refreshing data in asp.net mvc grid which is inside a partial view. 

This is my grid in partial view:

<div class="row">

    <div class="col-md-12">

        @(Html.EJ().Grid<recognitions>("gridRec")

        .Datasource((IEnumerable<recognitions>)ViewBag.dsRec)

        .IsResponsive()

        .AllowSelection(false)

        .EnableAltRow(true)

        .Columns(col =>

        {

            col.Field("source_id").HeaderText("source_id").TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("plate_text").HeaderText("plate_text").TextAlign(TextAlign.Right).Width(75).Add();

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

            col.Field("confidence_level").HeaderText("confidence_level").TextAlign(TextAlign.Right).Priority(2).Width(75).Add();

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

            col.Field("date").HeaderText("date").TextAlign(TextAlign.Right).Width(75).Format("{0:dd.MM.yyyy. hh:mm:ss}").Add();

            col.HeaderText("plate_image").Template("<img src='data:image/jpeg;base64,{{:plate_image_url}}' />").TextAlign(TextAlign.Center).Width(100).Add();

        })

        )

    </div>

</div>

This is in my controller:

public ActionResult Rec()      // This is for oppening partial view from main view

{

var lstRec = new ANPREntities().recognitions.OrderByDescending(r => r.date).ToList();

foreach (var item in lstRec)

{

item.plate_image_url = Convert.ToBase64String(System.IO.File.ReadAllBytes(item.plate_image_url.ToString()));

}

ViewBag.dsRec = lstRec;

lstRec = null;

return PartialView("_IndexRec");

}

[HttpGet]

public JsonResult GetRec()   // This is for get just the data for the grid

{

var lstRec = new ANPREntities().recognitions.OrderByDescending(r => r.date).ToList();

foreach (var item in lstRec)

{

item.plate_image_url = Convert.ToBase64String(System.IO.File.ReadAllBytes(item.plate_image_url.ToString()));

}

return Json(lstRec, JsonRequestBehavior.AllowGet);

}

JS in main view for updating the grid is this:

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

$.ajax({

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

type: "get",

}).done(function (data) {

obj.dataSource(data);

}).fail(function () {

alert('error');

});

So, why is refreshing the grid works only once? :(

Thanks!

[Prasanna Kumar Viswanathan]

Hi Bernard, 

Thanks for contacting Syncfusion support. 

We checked in our sample with refreshing data inside a partial view using a button click. While refreshing the grid data we did not face any issues in our sample.  

Find the code example and sample: 

 

@Html.EJ().Button("buttonnormal").Text("Refresh").Size(ButtonSize.Normal).ClientSideEvents(e => e.Click("click")) 

 

<div> 

    @Html.Partial("Grid") 

</div> 

 

<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> 

 

--------------------------------------------------------- 

<div class="row"> 

    <div class="col-md-12"> 

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

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

.IsResponsive() 

.AllowSelection(false) 

.EnableAltRow(true) 

.AllowPaging() 

.Columns(col => 

{ 

    ------------------------- 

}) 

        ) 

</div> 

    </div> 

 

Sample: http://www.syncfusion.com/downloads/support/forum/125702/ze/Sample1185771246412171 

To reproduce the issue, we need the following details, 

1. Share the screenshot of problems that you are facing in your sample. 

2. Did you face any script error in your sample? If yes, share the Stackrace of a script error. 

3. Essential Studio Version details. 

4. If possible, reproduce the issue in the attached sample. 

Regards, 

Prasanna Kumar N.S.V 

[Bernard Jurlina]

Hi, and thanks for the answer.

It seems that I only have this problem with Internet explorer. When I run my project with Edge or Chrome, the grid refreshes every time.

Hm, IE is one strange thing. :)

Thanks again!

Bernard.

[Prasanna Kumar Viswanathan]

Hi Arun, 

Thanks for the update.
  

Please let us know if you need any further assistance. 

Regards, 

Prasanna Kumar N.S.V 

[Prasanna Kumar Viswanathan]

Hi Bernard, 

Please ignore the previous update. 

We checked with our sample with IE browser and grid refreshes every time in our sample.  

For your convenience we attached a video and download the video from the following link 

Video: http://www.syncfusion.com/downloads/support/forum/125702/ze/Video1016036876 

We suspect that the issue is due to the cache problem in IE.  If we make Ajax queries with same URL, it tends to give the same result/output as IE caches the data that it gets from first query. 

To avoid this issue, set cache as false in the Ajax call. 

 

Find the code example: 

 

$.ajax({ 

    cache : false, 

---------------------------------- 

}); 

For more information refer the below link 

http://www.dashbay.com/2011/05/internet-explorer-caches-ajax/ 

Regards, 

Prasanna Kumar N.S.V 

 

[Bernard Jurlina]

Hello again!

Yes, I tried with cache: false and it works.

Thank you so much for the update.

Regards,

Bernard.

[Prasanna Kumar Viswanathan]

Hi Bernard, 

We are happy that the provided solution is working fine at your end.  

 

Please let us know if you need any further assistance. 

 

Regards, 

Prasanna Kumar N.S.V