Button to pass data to another page in a grid

[Carrotty]

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

[Charlie]

I am trying something similar, were you able to find a solution?

[Paul]

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

[Charlie]

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.