Update content

[LUCIANO ALMEIDA PIMENTA]

How to update the contents of a tab, which has already been created. 

I just want to reload internal data.

[Keerthana Rajendran]

Hi Luciano,   

   

Thank you for contacting Syncfusion Support.   

   

Query: How to update the contents of a tab, which has already been created. I just want to reload internal data.   

   

Response:  We can update the content of a tab in 3 ways as shown below:   

   

Way 1: We can load the content through AJAX during itemActive or beforeActive event of tab as shown below    

   

 @{Html.EJ().Tab("defaultTabs").ShowCloseButton(true).EnableRTL(false).EnablePersistence(false).HeaderPosition(HeaderPosition.Top).Items(data =>   

           {   

               data.Add().ID("worldwar").Text("World War Z");   

               data.Add().ID("unive").Text("Monsters University").ContentTemplate(@<div>   

                   <table>   

                       <tr>   

                           <td class="movies-img" valign="top">   

                               <img src="@Url.Content("~/Content/Images/Tab/mu.png")" alt="mos" />   

                           </td>   

                           <td valign="top">   

                               <div>   

                                   <span class="movie-header">Monsters University</span><br />   

                                   <span>Movie Info:</span>   

                                   <p>   

                                       Mike Wazowski and James P. Sullivan are an inseparable pair, but that wasn't always the case.    

                                   </p>   

                               </div>   

                           </td>   

                       </tr>   

                   </table>   

               </div>);   

           }).ClientSideEvents(e=>e.BeforeActive("beforeActive")).Render();}   

    </div>   

    <script>   

        var flag;   

        function beforeActive(args)   

        {   

            if (args.model.selectedItemIndex == 1 && ej.isNullOrUndefined(flag)) {   

                $.ajax({   

                    url: '/Home/Contact',   

                    type: 'POST'   

   

                }).done(function (result) {   

                    $("#worldwar").html(result);   

   

                })   

                flag = true;   

            }   

              

        }   

    </script>   

   

Way 2: We can modify the html content alone through button click as shown below   

   

  @Html.EJ().Button("change").Text("Change Content").ClientSideEvents(e => e.Click("onclick"))     

  <script>     

function onclick()   

        {   

            var tabobj = $("#defaultTabs").data("ejTab");   

            if (tabobj.contentPanels[2].innerText == "")   

            {   

                tabobj.contentPanels[2].innerText = "New Content loaded on button click"   

            }   

              

        }   

</script>   

   

Way 3: We can add dynamic tab item using addItem method of tab as shown below   

   

@Html.EJ().Button("add").Text("addItem").ClientSideEvents(e => e.Click("onaddClick"))   

  <script>   

function onaddClick()   

        {   

            var tabobj = $("#defaultTabs").data("ejTab");   

           tabobj.addItem("/Content/samplecontent/javascript.html", "New Item", tabobj.getItemsCount());   

               

        }</script>   

   

We have attached a sample for your reference. Please download the sample from:   

   

http://www.syncfusion.com/downloads/support/forum/133550/ze/Tab1535020547   

   

Regards,   

Keerthana.