Trying to get a Grid to load within a Tab

[Toffer]

Hello,

 I'm trying to get a kendo Grid to load using Ajax from within a Tabstrip using Ajax.  The UI for the grid seems to load just fine, however the Action for filling the grid never seems to get called.  Before moving it to be loaded from within the Tabstrip, the grid worked just fine...so it's gotta be some sort of syntax thing about how I'm loading it.

 I'm using the same controller for actions to load the Tabstrip view (DataMaintenanceView), the grid view (DefectFeatureView), and the action for returning the results to the grid (GetDefectFeatures).

 Please take a look at my controller and views and let me know if there's anything I'm doing wrong...thx in advance!  :)

DataMaintenanceController:

 

public class DataMaintenanceController : Controller
{
    #region View Actions
    [HttpGet]
    public ActionResult DataMaintenanceView()
    {
        return View();
    }

    /// <summary>
    /// default view for the DataMaintenance controller
    /// </summary>
    /// <returns>the default DataMaintenanceView</returns>
    [HttpGet]
    public ActionResult DefectFeatureView()
    {
        return View("DefectFeatureView");
    }
    #endregion

    #region Actions for adding data
    /// <summary>
    /// adds a new DefectFeature into the database
    /// POST: api/ServerToSwitch/AddDefectFeature?name=[nameValue]
    /// </summary>
    /// <param name="name">name of DefectFeature to add</param>
    [HttpPost]
    public ActionResult AddDefectFeature(string name)
    {
        DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
        dataMaintenance.AddDefectFeature(name);

        return RedirectToAction("DataMaintenanceView");
    }
    #endregion

    #region Actions for retrieving data
    /// <summary>
    /// retrieves all DefectFeature objects from the database
    /// GET: /DataMaintenance/GetDefectFeatures
    /// </summary>
    /// <returns>a collection of DefectFeature objects</returns>
    [HttpGet]
    public ActionResult GetDefectFeatures([DataSourceRequest] DataSourceRequest request)
    {
        DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
        var defectFeaturesPayload = dataMaintenance.GetDefectFeatures().Payload;

        DataSourceResult result = defectFeaturesPayload.ToDataSourceResult(request);
        return Json(result);
    }
    #endregion
}

DataMaintenanceView

@using TPOReporting
@model DataMaintenance

@{
    ViewBag.Title = "3rd Party Optics Reports - Data Maintenance";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script>
    function Sleep(milliSeconds)
    {
        var startTime = new Date().getTime();

        while (new Date().getTime() < startTime + milliSeconds);
    }
</script>

<div>
    <br />
    <br />
    <h2>3rd Party Optics Reports - Data Maintenance</h2>
</div>
<div>
    <br />
    <div>
        @(Html.Kendo().TabStrip()
            .Name("DataMaintenanceTabStrip")
            .Items(i =>
            {
                i.Add().Text("Defect Feature Maintenance")
                    .LoadContentFrom("DefectFeatureView", "DataMaintenance")
                    .Selected(true);
            })
        )
    </div>
</div>

DefectFeatureView

@using TPOReporting
@model DataMaintenance

@{
    ViewBag.Title = "Defect Feature Maintenance";
}

<script>
    function NewDefectFeatureSubmitButtonClick(e)
    {
        var defectFeatureGrid = $("#DefectFeatureGrid").data("kendoGrid");
        var newDefectFeatureTextBox = $("#NewDefectFeatureNameTextBox");

        var newDefectFeatureName = newDefectFeatureTextBox.val();

        var dummyUrl = '@Url.Action("AddDefectFeature", "DataMaintenance", new { name = "V1" })';
        var url = dummyUrl.replace("V1", newDefectFeatureName);

        $.ajax(
        {
            type: "POST",
            url: url,
            dataType: "json"
        });

        Sleep(1000);
        defectFeatureGrid.dataSource.read();
        newDefectFeatureTextBox.val("");
    }
</script>

<div>
    <table>
        <tr>
            <td>
                <label>New Defect Name:</label>
            </td>
            <td>
                @(Html.Kendo().TextBox()
                        .Name("NewDefectFeatureNameTextBox"))
            </td>
            <td>
                @(Html.Kendo().Button()
                        .Name("NewDefectFeatureSubmitButton")
                        .Content("Submit")
                        .Events(e => e.Click("NewDefectFeatureSubmitButtonClick")))
            </td>
        </tr>
    </table>
</div>
<div id="defectFeatureDiv">
    @(Html.Kendo().Grid<DefectFeature>()
          .Columns(column =>
          {
              column.Bound(df => df.Name)
                  .Title("Name");
              column.Bound(df => df.LastUpdate)
                  .Title("Last Update");
          })
          .DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("GetDefectFeatures", "DataMaintenance")))
          .HtmlAttributes(new { style = "height:300px;" })
          .Name("DefectFeatureGrid")
          .Scrollable()
          .Selectable()
          .Sortable())
</div>

[Toffer]

While waiting for a response, I've also tried splitting the DefectFeature actions into it's own controller, but that's producing a whole different issue...I get "Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper'." when I try it that way.

 

[Toffer]

Ah...when I split them into 2 different controllers I forgot to move the DefectFeatureView into a DefectFeature folder in the project.  Now I'm getting the same result as the original problem.

 

Please let me know if there's additional info I can provide as this is a blocking issue.

[Toffer]

Well...as luck would have it I figured out what was causing my problems and everything is working smooth now.  The problem was because of the [HttpGet] attribute I had above the GetDefectFeatures action...for some reason the Ajax call comes across as a POST and the HttpGet was blocking it from working on the POST call.  *shrug*...not sure how a POST call ends up happening from a .Read datasource method call, but whateva...I just use the stuff.  ;)

 

FWIW...hopefully the info can be of use to someone else in the same boat.  :)

[Toffer]

So as I said before, this problem doesn't actually have anything to do with the tabstrip.  The tabstrip was working perfectly...the problem was that my action was decorated as an HttpGet when the kendo grid was sending a POST request.  This feels like a bug in kendo.

 

If the DataSource is set to do an Ajax read...shouldn't that be a GET and not a POST?

[Boyan Dimitrov]

Hello Toffer,

 

By default Kendo Grid for ASP.NET MVC should make POST requests when configured for ajax binding. This is implemented by a custom DataSource transport and schema. Those are defined in the kendo.aspnetmvc.min.js. 

 

Please refer Grid Troubleshooting for more information. 

 

Regards,
Boyan Dimitrov
Telerik