This is a migrated thread and some comments may be shown as answers.

Grid with Edit Action link through Taghelper

3 Answers 34 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
Veteran
Erik asked on 12 Feb 2021, 11:05 AM

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!

3 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 17 Feb 2021, 10:43 AM

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:

Let me know so  Ican advise further.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Erik
Top achievements
Rank 1
Veteran
answered on 25 Feb 2021, 08:13 AM

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 :) 

0
Nikolay
Telerik team
answered on 01 Mar 2021, 12:53 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Erik
Top achievements
Rank 1
Veteran
Answers by
Nikolay
Telerik team
Erik
Top achievements
Rank 1
Veteran
Share this question
or