Hello,
I've been struggling to get my grid to work with an Web API...I know the WebAPI works when I call it via web browser, I get a properly formatted json response, however I can't seem to get it to work when calling it with the datasource for the grid. I've tried using .Ajax() and .WebApi() and neither seems to work.
I also created a Action in my controller that returns the same information as the WebAPI just to see if I could get it to work using the Controller / Action and it worked just fine there, but I really wanted to use the Web API. Here's the code I'm trying to use...can anyone see anything obviously wrong?
@(Html.Kendo().Grid<
DefectFeature
>()
.Columns(column =>
{
column.Bound(df => df.Name)
.Title("Name");
column.Bound(df => df.LastUpdate)
.Title("Last Update");
})
.DataSource(dataSource => dataSource
.WebApi()
.Read(read => read.Url("http://cmd-roswell.redmond.corp.microsoft.com/api/DataMaintenance/GetDefectFeatures").Type(HttpVerbs.Get)))
.HtmlAttributes(new { style = "height:300px;" })
.Name("LKGBuildsGrid")
.Scrollable()
.Selectable()
.Sortable())
<
link
rel
=
"stylesheet"
href
=
"http://cdn.kendostatic.com/2013.2.918/styles/kendo.common-bootstrap.min.css"
/>
Using Kendo UI CDN
To include the Kendo UI JavaScript and CSS files from CDN follow these steps. Important! Don't forget to replace "kendo ui version" from the code snippets below with the current version of Kendo UI e.g. "2013.2.918".
1.Open the layout of the application. By default it is Views/Shared/_Layout.cshtml (or Site.master if using ASPX).
2.Include kendo.common-bootstrap.min.css and kendo.bootstrap.min.css. Add a link tag within the head tag of the layout.
<
link
rel
=
"stylesheet"
href="http://cdn.kendostatic.com/<;kendo ui version>/styles/kendo.common-bootstrap.min.css" />
<
link
rel
=
"stylesheet"
href="http://cdn.kendostatic.com/<;kendo ui version>/styles/kendo.bootstrap.min.css" />
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
>
@model IEnumerable<
EquipmentsSummary
>
<
div
class
=
"info-row"
>
@(Html.Kendo().Grid(Model)
.Name("EquipmentGrid")
.Columns(columns =>
{
columns.Bound(e => e.EquipName).Title("Item Name");
columns.Bound(e => e.SerialNo).Title("Serial #");
columns.Bound(e => e.AssetStatus).Title("Status");
columns.Bound(e => e.AssetStatusDate).Title("Date");
})
.HtmlAttributes(new { style = "height: 390px;" })
.Pageable(pageable => pageable
.PageSizes(true).PageSizes(new int[] { 20, 50, 100 })
.ButtonCount(5))
.Sortable()
.Filterable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false))
.ClientDetailTemplateId("template")
.Events(events => events.DetailInit("initDetail"))
)
<
script
id
=
"template"
type
=
"text/kendo-tmpl"
>
@(Html.Kendo().Grid<
EquipmentSettingsSummary
>()
.Name(string.Format("SettingGrid_#=ID#"))
.Columns(columns =>
{
columns.Bound(e => e.EffectiveDate).Title("Date");
columns.Bound(e => e.AssetStatus).Title("Status");
})
.HtmlAttributes(new { style = "height: 390px;" })
.Pageable(pageable => pageable
.PageSizes(true).PageSizes(new int[] { 20, 50, 100 })
.ButtonCount(5))
.Sortable()
.Filterable()
.Scrollable()
.ToClientTemplate()
)
</
script
>
<
script
>
function initDetail(e) {
alert("ID is " + e.data.ID);
var grid = $("#SettingGrid_" + e.data.ID).data("kendoGrid");
grid.dataSource.data(e.data.SettingItems);
}
</
script
>
</
div
>
Hello all,
I have grid which displays a group of records. Then some custom actions to perform on this records. One of the custom actions will open a popup window which displays another grid with child information about the original table. I'm doing this by passing a custom query string with the parent key.
In this child table, when I try to create a new record, the foreign key that is passing to the controller is 0 event though when editing, the binding will show the correct value. Through jquery I'm able to read the parentID and put it in a hidden field in the child screen, but when submitting, is goes as 0 again even though it has a number on it. The only way I'm able to solve the issue is by passing a value directly to the model in the child window in the OnEdit event like this:
e.model.set("GroupID", $("#txtGroupID").val());
Anyone knows why is passing a 0 value although I'm assigning a value for it: $("#GroupID").val($("#txtGroupID").val());
Any recommendations?
Hello,
I'm new using the Telerik components and I've been looking for a thread related to this feature (year view in the scheduler), but I only found it into the Ajax scheduler component, and not in MVC. Do you guys have any plans to implement this feature for MVC Scheduler ? if not can you send me any sample or guide lines to implement it as custom view?
Thank you.