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

I'm not sure but try [updated](https://vuejs.org/v2/api/#updated) hook or [nextTick](https://vuejs.org/v2/api/#vm-nextTick) — a1626, Apr 04 '18 at 08:06
looks like `e-grid-column` is a Vue component as well. why not do things to the ref inside this component itself ? — Jacob Goh, Apr 04 '18 at 08:08
@a1626 I updated the question, unfortunately updated and nextTick doesn't work — Max, Apr 04 '18 at 08:55
@JacobGoh can you explain in more details ? syncfusion grid is not a Vue component — Max, Apr 04 '18 at 08:55
@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, Apr 04 '18 at 10:58
I just tried it and I'm able to get `refs` in `mounted` for non-component element. Can you reproduce your issue on codepen or somewhere else? Also, can you paste proper HTML snippet? Right now tags are not balanced. — a1626, Apr 04 '18 at 11:05
Ok. I think i figured it out as per [this](https://stackoverflow.com/a/4912608/5976073) `type="text/x-template"` seems something like `template` tag. Which means snippet inside is not rendered and can be accessed with something like `scriptTag.content` in `js` — a1626, Apr 04 '18 at 11:13
@1626 thanks for your response. Update and nexttick are called but ref.title is undefined. Same behaviour if you use sumple razor. — Max, Apr 04 '18 at 11:33

score 0 · Answer 1 · answered Apr 09 '18 at 05:06

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 Answers1