Trying to get a Grid to load within a Tab

6 posts, 1 answers
  1. Toffer
    Toffer avatar
    34 posts
    Member since:
    Sep 2015

    Posted 05 Oct 2015 Link to this post

    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>

  2. Toffer
    Toffer avatar
    34 posts
    Member since:
    Sep 2015

    Posted 05 Oct 2015 in reply to Toffer Link to this post

    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.
     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Toffer
    Toffer avatar
    34 posts
    Member since:
    Sep 2015

    Posted 05 Oct 2015 in reply to Toffer Link to this post

    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.

  5. Toffer
    Toffer avatar
    34 posts
    Member since:
    Sep 2015

    Posted 05 Oct 2015 in reply to Toffer Link to this post

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

  6. Toffer
    Toffer avatar
    34 posts
    Member since:
    Sep 2015

    Posted 06 Oct 2015 Link to this post

    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?

  7. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 07 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready