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

Button to pass data to another page in a grid

3 Answers 428 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Carrotty
Top achievements
Rank 1
Carrotty asked on 16 Aug 2012, 05:40 PM
Hello,

I'm in the process of upgrading some Telerik controls to KendoUI but am trying to only use javascript.

I have a kendo UI grid that shows some data including an edit button for each. When an edit button for a row is pressed I'd like a new page to be displayed showing that row's data in a form so it can be edited. I'm having problems creating the button though. The telerik version of the page (written with MVC) renders this HTML:

<a class="t-button t-grid-Edit" href="/BMDE/FI/Edit/13?Id=13">Edit</a>

And, ideally, this is what I'd like to replicate using Kendo UI with javascript.

At, the moment I've got this:

    <script type="text/javascript">

        var modelDataSource = new kendo.data.DataSource({
            data: $.parseJSON('@modelString')
        });


        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: modelDataSource,
                columns:
                [
                    { title: "Name", field: "Name"},
                    { title: "Age", field: "Age"},
                    { title: " ", command: { text: "Edit"}},
                ]
            });
        });
    </script>


Can anyone let me know what I need to do to redirect the page when pressing the edit button?

Cheers,

Adam

3 Answers, 1 is accepted

Sort by
0
Charlie
Top achievements
Rank 1
answered on 23 Oct 2012, 03:32 PM
I am trying something similar, were you able to find a solution?
0
Paul
Top achievements
Rank 1
answered on 23 Oct 2012, 05:36 PM
I went for an edit page in the end. So, assuming the grid is selectable like this:

            $("#grid").kendoGrid({
                selectable: true,
...

The edit button would be defined like this:

                columns:
                [
                    { title: "Id", field: "Id" },
                    { title: "First Name", field: "FirstName" },
                    ...
                    { template: kendo.template($("#command-template").html())}

The template for the edit button would be:

    <script id="command-template" type="text/x-kendo-template"> 
        <input id="editButton" type="button" class="k-button" value="Edit" onclick="editItem();" />
    </script>‚Äč

Which calls this function:

        function editItem()
        {
            var Id = modelDataSource.getByUid($("#grid").data("kendoGrid").select().attr('data-uid')).Id;    
            document.location.href = "urlpath/Edit/" + Id + "?Id=" + Id;
        }

The function appends the selected row's id to the url and the asp mvc controller handles redirecting to the edit page for the selected row.

Hope that helps, let me know if does (or doesn't).



0
Charlie
Top achievements
Rank 1
answered on 23 Oct 2012, 05:59 PM
I tried something along that lines with the selectable, but it required the data source property. I think I may be missing a big piece of something that I am just not educated enough in.

After adding the datasource, I get a circular reference... which is the path I am on now.

What you have here makes sense though. 
Tags
Grid
Asked by
Carrotty
Top achievements
Rank 1
Answers by
Charlie
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Share this question
or