Wednesday, April 10, 2013

Telerik grid to open a new web page

It took me a long time to find out how to go to a new page on telerik when clicking on a grid row. Here is a sample code in case an internet traveler stumbles upon it.

Html.Telerik().Grid(Model.dialogueEntity)
                    .DataKeys(keys => keys.Add(o => o.DialogueID))
                    .HtmlAttributes(new { style = "height: 100%; border: 0;" })
                    .Name("Grido")
                    .Selectable()
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.DialogueID).Hidden();
                        columns.Bound(o => o.LoanID);
                    })
                    //.Scrollable()
                    //.Sortable(sorting => sorting.OrderBy(sortOrder => sortOrder.Add(o => o.LoanID).Ascending())
                    .Sortable(config => config
                        .OrderBy(order => order
                            .Add(((string)ViewData["view"]) == "sortedByDate" ? "Category Type" : "LoanID")
                             )
                    )
                    .ClientEvents(events => events.OnRowSelect("onRowSelect"))

                    .Filterable()
                    .Render();

The green text is needed for this to work
And this javascript part is needed to go to another page. o.DialogueID was the key that I was using to take the user to as explained below.

<script type="text/javascript">
    function onRowSelect(e)
    {
        var id = e.row.cells[0].innerHTML;
        location.href = "/Dialogue/Details/" + id;
    }
</script>