Grid with Edit Action link through Taghelper

[Erik]

Hi Progress,

 

Im trying to make an grid view that uses an edit button. My goal is for the user to be taken to another page (an edit page) when pressing that button. I do not want inline editing of that item. Since i found the tag helpers very useful and readable, making it easier for other developers to read them, i im currently looking to make an navigation between edit button and passing an value to an View where Customer is supposed to edit the chosen item.  

 

Iv'e tried the following without any luck:

actionlink through using your taghelpers.

         <update  url="@Url.Action("Edit", "VehicleHome", *What do i post here* )"type="PATCH" />

 

<commands>
                        <column-command text="Edit" name="edit">/*What do i post here*/</column-command>
                    </commands>

 

However i do not know how to pass an value of the item i want to edit through taghelpers. 

 

My grid looks as followed.

   <kendo-grid name="VehicleHome" height="550">
            <columns>
                <column field="Id" title="ID">
                    <filterable enabled="false"></filterable>
                </column>
                <column field="Name" title="Namn" />
                <column field="Street" title="Gata" />
                <column field="PostalCode" title="Postnummer" />
                <column>
                    <commands>
                        <column-command text="Edit" name="edit"></column-command>
                    </commands>
                </column>
            </columns>
            <scrollable enabled="true" />
            <sortable enabled="true" />
            <pageable enabled="true" />
            <filterable enabled="true" />
            <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20, 50}"></pageable>
            <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
                <transport>
                    <read url="@Url.Action("Get_VehicleHomes", "Grid")" type="GET" />
                    <update  url="@Url.Action("Edit", "VehicleHome", 1 )"type="PATCH" />
                </transport>
            </datasource>
        </kendo-grid>

 

Thank you!

[Nikolay]

Hi Erik,

Thank yo ufor sharing the Grid declaration.

Could you pelase share more details on the case? Do you need to call an Action Link on a button click? Or it will load a separate partial view where the grid will have a form for Grid editing?

Here is an useful article on how Action Links can be used in a template:

• https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/faq?#how-can-i-use-action-links

Let me know so  Ican advise further.

Regards,
Nikolay
Progress Telerik

[Erik]

Hi Nikolay,

Thank you for the help and the article. The problem is now solved. I needed to call an Action Link on a button click and provide the id of that item to the action link in your grid view.

 

The following code solved my problem

<div class="row">
    <div class="col-12">
        <kendo-grid name="VehicleHome" height="550">
            <columns>
                <column field="Id" title="ID">
                    <filterable enabled="false"></filterable>
                </column>
                <column field="Name" title="Namn" />
                <column field="Street" title="Gata" />
                <column field="PostalCode" title="Postnummer" />
                <column>
                    <commands>
                        <column-command text="Edit" name="edit" click="openEditPage"></column-command>
                    </commands>
                </column>
            </columns>
            <scrollable enabled="true" />
            <sortable enabled="true" />
            <pageable enabled="true" />
            <filterable enabled="true" />
            <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20, 50}"></pageable>
            <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
                <transport>
                    <read url="@Url.Action("Get_VehicleHomes", "Grid")" type="GET" />
                </transport>
            </datasource>
        </kendo-grid>
    </div>
</div>

<script>
    function openEditPage(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        window.location.href = 'VehicleHome/Edit/' + dataItem.Id;
    }
</script>

 

It used the edit button provided by the grid view. When pressed User is navigated to the desired item to be edited :) 

[Nikolay]

Hello Erik,

I am happy to hear this has been resolved and thank you for updating me on the matter. I believe it will help others facing the same scenario.

Please let us know if anything new arises.

Regards,
Nikolay
Progress Telerik