Vue “hook” external object rendered AFTER mount event

Question

I need to "hook" an object created AFTER the Vue mounted event.

Within a page I have the app and within this I have a div where I render an ASP.NET Core JS2 Syncfusion server-side grid.

In debugging I saw that the grid is rendered after the vue component is mounted.

How can I read the "ref" I put in some columns of the grid?

But in particular what is the best strategy to "hook" an external object, rendered AFTER the mounted event, inside my Vue app?

Html

    <div>Omitted for brevity</div>

        <div id="app">
        <div>

                        <ejs-grid id="grid" enablePersistence="false" dataSource="Model" allowPaging="true" allowFiltering="true" allowGrouping="true"
                                  allowSorting="true" allowExcelExport="true" showColumnChooser="true" allowReordering="true"
                                  contextMenuItems="ContextMenuitems" contextMenuClick="contextMenuClick" 
                                  toolbar="@(new List<string>() { "Search", "ColumnChooser" })">



                        <e-grid-columns>
                            <e-grid-column template="#template" headerText="@Html.DisplayNameFor(model => model.Title)"  ></e-grid-column>
                            <e-grid-column field="Seller.FullName" headerText="@Html.DisplayNameFor(model => model.SellerId)" visible="false"></e-grid-column>

                            <div>Omitted for brevity</div>
                        </ejs-grid>
        </div>



    <script id="template" type="text/x-template">


        <div ref="title">${Title}</div>

    </script>

Vue

new Vue({
    el: '#app',
    data: {
        range: {
            from: null,
            to: null
        },
        filter: {
            show: null
        },
        filters: []
    },
    mounted() {
        // Tried here with no luck
        this.$refs.title
    },

Update

I notice that all html code inside razor (server-side) doesn't work with Vue, for example

    @if (true)
    {

        <div ref="title"></div>
    }

This ref is not viewed by Vue, also inside updated and nextTick

looks like e-grid-column is a Vue component as well. why not do things to the ref inside this component itself ? — Jacob Goh
@a1626 I updated the question, unfortunately updated and nextTick doesn't work — Max
@JacobGoh can you explain in more details ? syncfusion grid is not a Vue component — Max
@Max when you say updated is not working do you mean it is not getting called or that the ref is not present? And where did you try nextTick, in mounted ? — a1626

Renjith Singh Renjith Singh · Accepted Answer · 2018-04-09T05:06:12

We suggest you to use the following codes which will allow you to modify the existing columns in Grid or add a new column to the Grid, after the Grid has been rendered.

 <ejs-grid id="Grid">
    ...
 </ejs-grid>

To change the width of a column in Grid, follow the below codes:

 //Allows you to get the Grid element. Here “Grid” is the ID of Grid element.
 var grid = document.getElementById("Grid")

 //Creates a instance for the Grid
 var gridinstance = grid.ej2_instances[0]

 //Changes the width of the column in 2nd index
 gridinstance.columns[2].width = 400;

 //To refresh the columns in Grid to view the changes call the below function
 gridinstance.refreshColumns();

To add a new column in Grid, follow the below codes:

//Allows you to get the Grid element. Here “Grid” is the ID of Grid element.
var grid = document.getElementById("Grid")

//Creates a instance for the Grid
var gridinstance = grid.ej2_instances[0]

//Adds a new column in in the Grid
gridinstance.columns.push({ field: "ShipCity" })

//To make the added new column display in Grid call the below function
gridinstance.refreshColumns();

If we have misunderstood your query. Please provide more details about your requirement. Please share a video demo to explain your requirement.

Vue “hook” external object rendered AFTER mount event

1 Answers