Refresh DetailsTemplate

[Costa]

Hi. I have Grid with rowDetailsTemplate:

@{Html.EJ().Grid<PhotoViewModel>("gridPhoto")

                    .Datasource(ds => ds.URL("Photo/DataSource").Adaptor(AdaptorType.UrlAdaptor))

                    .Columns(col =>

                    {

                        col.Field(e => e.ID).Add();

                        //.................

                    })

                    .DetailsTemplate("#rowDetailsTemplate")

                    .Render();

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

<h2>_PhotosPartial {{:ID}}</h2>

<h2> RowIndex {{:~index}}</h2>

    <div style="display:table" id="imageTable{{:ID}}">

        {{if Photos.length > 0}}

        {{for Photos}}

        <div class="thumb-container">

            <div class="thumb-image">

                <img alt="{{>PathImage}}" src="{{>PathThumb}}"

                     style="cursor:pointer" onclick="thumbImageOnclick(this)" />

            </div>

            <label class="checkboxlabel" style="cursor:pointer; font-size:medium">

                <input name="selectedPhotoChecks" type="checkbox" class="chkSelectImage"

                       value={{>ID}} {{if Selected}} checked="checked" {{/if}} /> Select

            </label>

        </div>

        {{/for}}

        {{else}}

        No photos...

        {{/if}}

    </div>

    <div>

        <div class="btnUploadPhotos" onclick="openDialogAddPhotos({{:ID}}, {{:~index}})"/>

        <div class="btnDeletePhotos" onclick="deletePhotosConfirmed(this, {{:ID}})"></div>

    </div>

</script>

After inserting or deleting photos, need to refresh(rebind) the rowDetailsTemplate. How to do it?

[Seeni Sakthi Kumar Seeni Raj]

Hi Costa,  

 

We have prepared a sample that can be downloaded from the following location.  

 

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

 

Using the DetailsDataBound event and partial view method, content were rendered and re-rendered the detailsTemplate using the Ajax POST. Refer to the following code example.  

 

Grid: 

 

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

 

                       ... 

 

               .DetailsTemplate("#rowDetailsTemplate") 

                .ClientSideEvents(eve => { eve.DetailsDataBound("detailGridData"); }) 

                .Render(); 

} 

<script id="rowDetailsTemplate" type="text/template"> 

    <div id="Details{{:OrderID}}"></div> 

    <input type="button" id="Details{{:OrderID}}_btn" value="Click"> 

</script> 

<script type="text/javascript"> 

    function detailGridData(args) { 

        var OrderID = args.rowData.OrderID; 

        var arg = args; 

        $.ajax 

            ({ 

                url: "/Grid/Details?OrderID=" + OrderID, 

                type: 'GET', 

                success: ej.proxy(function (data) { 

                    arg.detailsElement.find("div").html(data); 

                }, this) 

            }); 

        $("#Details" + OrderID +"_btn").click(function () { 

            var val = $(arg.detailsElement).find('div')[0].children[1].value; 

            var value = JSON.stringify({ value: { CustomerID: val, OrderID: OrderID }}); 

            $.ajax({ 

                type: "POST", 

                url: "/Grid/OnGetList", 

                contentType: "application/json; charset=utf-8", 

                data: value, 

                success: function (response) { 

                    detailGridData(arg); 

                }, 

                failure: function (response) { 

                    alert(response); 

                } 

            }); 

        }); 

    } 

</script> 

Partial View: 

@model F139957.Controllers.GridController.Orders 

 

@Html.LabelFor(ord=>ord.CustomerID) 

@Html.TextBoxFor(ord=>ord.CustomerID) 

Controller Side: 

 

[HttpGet] 

        public ActionResult Details() 

        { 

            int id = Int32.Parse(Request.Query["OrderID"].ToString()); 

            var data = order.Where(ID => ID.OrderID == id).SingleOrDefault(); 

            return PartialView("PartialView", data); 

        } 

        [HttpPost] 

        public ActionResult OnGetList([FromBody]Values value) 

        { 

            var arg = value.value; 

            var val = order.Where(or => or.OrderID == arg.OrderID).FirstOrDefault(); 

            val.OrderID = arg.OrderID; 

            val.CustomerID = arg.CustomerID; 

            val.EmployeeID = arg.EmployeeID; 

            val.ShipCity = arg.ShipCity; 

            return PartialView("PartialView", val); 

        } 

 

 

Regards,  

Seeni Sakthi Kumar S. 

[Costa]

Thank you, everything is clear.

[Vignesh Natarajan]

Hi Costa, 

 

 

Thanks for the update. 

 

 

We are happy to hear that your query has been resolved by our solution.  

 

 

Please get back to us if you have any further queries. 

 

 

Regards, 

Vignesh Natarajan