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
>