Telerik Forums
UI for ASP.NET MVC Forum
4 answers
96 views

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())

Kiril Nikolov
Telerik team
 answered on 08 Oct 2015
6 answers
1.8K+ views
Hello can you give me the exact link to get kendo.common-bootstrap.min.css via CDN? 

This one is not working


Your link http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/asp-net-mvc-5 seem show incorrect information about that :

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" />
Alex Gyoshev
Telerik team
 answered on 08 Oct 2015
5 answers
930 views

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>

Boyan Dimitrov
Telerik team
 answered on 07 Oct 2015
6 answers
1.0K+ views
I have a parent grid / child grid. and I can't seem to get the two working properly.  Using the DetailInit event to set the data for the child grid, but the event is not even firing.  The grids are server bound with a model.  Here is the razor code.  Thanks for the help.
Dan

​
@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>
Rosen
Telerik team
 answered on 07 Oct 2015
1 answer
173 views

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?

Rosen
Telerik team
 answered on 07 Oct 2015
1 answer
160 views
HI

I have a question :

How can Visual Studio 2012 Kendo use UI Scaffolder :

  Add > New Scaffolded Item... > Kendo UI Scaffolder

The 'Add > New Scaffolded Item' command is available 
but the Kendo UI Scaffolder still invisible in Visual Studio 2012,
Is there have any to enable Kendo UI Scaffolder in Visual Studio 2012 ?

Tools :

。Visual Studio 2012 (with ASP.NET and Web Tools 2013.1 for Visual Studio 2012) :

ASP.NET and Web Tools 2013.1 for Visual Studio 2012
http://www.microsoft.com/en-US/download/details.aspx?id=41532
  AspNetWebTools2013_1Setup.exe
  WebToolsExtensionsVS.msi
Entity Framework 6 Tools for Visual Studio 2012 & 2013
http://www.microsoft.com/en-us/download/details.aspx?id=40762

。Telerik 2015 Q3

Best regards

Chris

Dimiter Madjarov
Telerik team
 answered on 07 Oct 2015
1 answer
62 views
I want to ​key in capital letter using Shift key but it does not allow me to enter.
Atanas Georgiev
Telerik team
 answered on 07 Oct 2015
3 answers
487 views
How do I go about showing the value of the foreign key (not the ID) within the ClientRowTemplate of a Grid?
Boyan Dimitrov
Telerik team
 answered on 07 Oct 2015
1 answer
123 views

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.

Georgi Krustev
Telerik team
 answered on 06 Oct 2015
3 answers
80 views
Hi!

We are having a single-page-application using asp.net mvc and creating views using razor. Creating several grids using the mvc-helper on a single view causes that the texts are transferred to the browser foreach grid. I have seen in this post https://github.com/loudenvier/kendo-global that it is possible to provide texts via javascript. But how can I prevent that the grid sends texts to the client?

Best regards!
Georgi Krustev
Telerik team
 answered on 06 Oct 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
DateTimePicker
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?