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

3 posts, 1 answers
  1. Kevin
    Kevin avatar
    2 posts
    Member since:
    Feb 2012

    Posted 11 Apr 2013 Link to this post

    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>
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 15 Apr 2013 Link to this post

    Hello Kevin,

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

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kevin
    Kevin avatar
    2 posts
    Member since:
    Feb 2012

    Posted 26 Apr 2013 Link to this post

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

    Regards
    Kevin
Back to Top