Using Kendo Grid rather than MVC WebGrid for Submitting a Form and passing back selected Row

[Kevin]

Hi,
I am trying to use the Kendo UI Grid with ASP.NET MVC to replace an existing MVC WebGrid which displays a set of data with each row having a Submit button. The Submit button can be displayed as enabled or disabled and when pressed, the form is posted back to the Controller with the selected row identity stored in a a data item.

I can't see how to achieve this relatively simple requirement using the Kendo UI Grid.

The existing code for the MVC WebGrid is below and allows easy definition of the Submit button for each row by using the @item. syntax which is available for the WebGrid.

Is there an equivalent example for the Kendo UI Grid with MVC that shows how you display a submit button (enabled/disabled based on a row property),  submit the form, and then passback the selected row identity to the controller ?

Thanks,
Kevin Wood

@model Vsat_2.Models.AgentTeams
<div id="SearchTeams">
    <div>
        <div id="criteria">
        @Html.HiddenFor( model => model.CompanyId)@Html.HiddenFor( model => model.RegionId )@Html.HiddenFor( model => model.Selection )
        @Html.HiddenFor( model => model.SearchVal)@Html.HiddenFor( model => model.SearchCritId )@Html.HiddenFor( model => model.RowsPerPage )@Html.HiddenFor( model => model.CurrentPage )
        @Html.HiddenFor( model => model.TeamSearch.CompanyId)@Html.HiddenFor( model => model.TeamSearch.RegionId )
        Search @Html.DropDownListFor(model => model.TeamSearch.SearchCritId, Model.TeamSearch.SearchCrit) for @Html.EditorFor(model => model.TeamSearch.SearchVal)
        <input type="submit" value="Search" name="submitButton" id="Search" /> @Html.ValidationMessageFor(model => model.TeamSearch.SearchVal)<span id="Searchwait" style="visibility:hidden"> Please wait..</span>
        </div>    
        <div id="status">
            <span id="statusmessage" style="padding-left:0.5em;color:black">@Html.LabelFor(model => model.TeamSearch.SearchResult, Model.TeamSearch.SearchResult)</span>
        </div>
        <p></p>
        <div id="MainGrid" style="float:left;width:100%">
@{
        var grid2 = new WebGrid(canPage: true, rowsPerPage: Model.TeamSearch.rowsperpageid, canSort: true, defaultSort: "SearchCrit", ajaxUpdateContainerId: "grid3", pageFieldName: "TeamPage");
        grid2.PageIndex = Model.TeamSearch.page;
        grid2.Bind(Model.Teams, rowCount: Model.TeamSearch.TotalRows, autoSortAndPage: false);
        grid2.Pager(WebGridPagerModes.All, numericLinksCount: 10);

        @grid2.GetHtml(htmlAttributes: new { id = "grid3" },
                       columns: grid2.Columns(
                       grid2.Column("InternalName", header: "Agent Team", canSort: false), 
                       grid2.Column(format: @<input type="submit" @item.Disabled onclick="mySelection='@item.Identity'" value="Select Team" name="submitButton" id="Change" style="font-size:90%" />),
                       grid2.Column("Reason", canSort: false) 
                       @*grid2.Column("Name", header: "ID", canSort: false) *@
                       ));
        }
        </div>
    </div>
</div> 

<script>
    var mySelection;

    $(function () {
        $("#Change").live('click', function () {
            $("#Audit").html(""); //Clear Audit Screen
            $("#Search").css({ "visibility": "hidden" });
            $("#Searchwait").css({ "visibility": "visible" });
            $("#Selection").val(mySelection); //Set the Selection field
        });
    });

$(function () {
        $("#Search").live('click', function () {
            $("#Audit").html(""); //Clear Audit Screen
            $("#Search").css({ "visibility": "hidden" });
            $("#Searchwait").css({ "visibility": "visible" });
        });
});


</script>

[Daniel]

Hello Kevin,

You can use a column template in order to add the submit. Please check this documentation topic.

Regards,
Daniel
the Telerik team

[Kevin]

Thanks for the link, Daniel
I managed to work it out from the examples.

Regards
Kevin