I'm evaluation the Telerik ASP.NET MVC UI components and I'm trying to come to grips with the KendoUI Grid for ASP.NET MVC 3. The initial setup works fine, the first page of data is being displayed just fine....

but when I try to go to the second page, my defined function for the Ajax paging does get called just fine, but instead of the page and the grid with the second set of data, I'm seeing a huge blob of JSON data on my screen......

Must have missed something really basic - but I can't seem to find *WHAT* ! The docs aren't really helping - it seems I'm doing everything as prescribed - but it just doesn't work..... no error message or exception or anything - just throws a blob of JSON at me instead of *rendering* it!

Any ideas? What am I missing?

I just downloaded the trial last week and looked at this example: http://localhost:50335/razor/web/combobox/index
In Firefox 28.0 when I scroll down a bit and then click on the combo box it opens and closes immediately (it`s impossible to select any items). The drop down menu only stays open when I scroll to the top of the page. The same happens with other controls that use a drop down menu (i.e. DropDownList, DatePicker, ColorPicker) and of course it also happens when I make my own ASP.NET MVC page.

The problem only exists in Firefox. Chrome and IE 11 both work fine.

Is there a fix available for this?

Hello,

First of all thanks for providing this control.

Please copy below number number and paste into below link.

1234567890
http://demos.telerik.com/kendo-ui/web/maskedtextbox/index.html


Thanks,
Jayesh Goyani

I'm attempting to create a new Kendo UI for ASP.NET MVC 4 project using the MVC Wrappers, Telerik Data Access for the data access layer, and WebAPI controllers, but not having much luck getting all three to work together.  It seems like it should be simple, but I'm not sure what I'm missing.

From the Data Access documentation, I can find examples of using Data Access with MVC or Data Access with WebAPI.  From the Kendo side of things, I can find tutorials on WebAPI and MVC Wrappers, the Binding to a Web ApiController sample project, the Facts on Using Kendo UI With ASP.NET WebAPI blog, and even the UI for ASP.NET MVC sample application has a grid using WebAPI.  But none of these resources seem to use all three of the pieces I'm trying to fit together.  I've tried studying the examples that use two of the three parts and modifying them to work with the third, but nothing seems to work.

Does anyone have a good, simple example of using a Data Access layer, with WebAPI, and MVC server wrappers or any pointers on how to modify the Binding to a Web ApiController project to use a Data Access layer instead?

Thanks!

I cant seem to figure out how to get the value from a hidden column in a kendo grid so that I can then pass it to a call  that will return a partial view.  Any help would be greatly appreciated.

Here is the code for my grid.

            @(Html.Kendo().Grid(Model.LEOfficerDutyRoster)
                  .Name("dutyrosterscrollerGrid")
                  .CellAction(cell =>
                  {

                      if (cell.Column.Title.Equals("   "))
                      {
                          switch (cell.DataItem.LEO_Availability)
                          {
                              case 0:
                                  cell.HtmlAttributes["class"] = "dataFreeBtn";
                                  break;
                              case 1:
                                  cell.HtmlAttributes["class"] = "dataAssignedBtn";
                                  break;
                              case 2:
                                  cell.HtmlAttributes["class"] = "dataNondutyBtn";
                                  break;
                          }
                      }
                  }
                  )
                  .Scrollable()
                  .Columns(columns =>
                  {
                      columns.Bound(r => r.LEO_OfficerID).Hidden(true);
                      columns.Bound(r => r.LEO_Availability).Title("   ").Width(25);
                      columns.Bound(r => r.FullName).Title("Officer");
                      columns.Bound(r => r.LEO_CallSign).Title("Call Sign");
                      columns.Bound(r => r.LEO_PostName).Title("Post");
                  }
                  )
                  
                  )

            @(Html.Kendo().Tooltip()
                .For("#dutyrosterscrollerGrid")
                .Position(TooltipPosition.Right)
                .Filter("tr")
                .LoadContentFrom("GetToolTipData", "DailyLog")
                .AutoHide(true)
                .Width(300)
                .Height(450)
                .Events(events => events.RequestStart("requestStart"))
               )
            
            
            <script type="text/javascript">
                function requestStart(e) {
                    var id = this.select().closest("tr").find("td:eq(0)").text();
                    alert(id);
                }
            </script>

Hi,

I am trying fetch children nodes for destination node in drop event. Everything works ok, when read transport is configured as an object. But when I configure it as a function, it just reads root level nodes instead of children (there is no parameter id in data).

My code looks like this:


And transport read function:



Thanks in advance!

I have a line chart in a MVC razer web app to which the user can add at runtime up to 5 categories. The chart also has 2 x axes, one that delineates time, the other that delineates dates. The tooltip has been appearing over the particular category line over which the mouse hovers. I want the crosshair functionality where a vertical line appears and one tooltip shows the values for all categories and cannot get it to work.

I assume it has something to do with the fact I have 2 x axes, dynamically add categories at runtime, or both. Further, a y axis is added for each category that is added to the chart, though I assume the stuff going on with the y axes is not contributing to the problem, but I'm not certain of that.

Below is the cshtml code for the chart. It differs from the original code only in regards to:
1) The addition of .CategoryAxis(axis => axis.Crosshair(c => c.Visible(true)))
2) The addition of .Shared(true) for the tooltip.

I have not included any of the javascript/jQuery code that executes when a user adds a category, and I realize to solve this problem seeing that code may be necessary. Will provide on request.

Attached is a screen shot of the chart after 5 categories have been added, showing how a tooltip appears only for the category over which the mouse hovers.

@(Html.Kendo().Chart<TagValue>()
      .Series(series => series.ScatterLine(s => s.Local_TimeStamp, s => s.Value))
      .Legend(false)
      .HtmlAttributes(new { @class = "multiPenChart" })
      .CategoryAxis(axis => axis.Crosshair(c => c.Visible(true)))
      .XAxis(x => x.Date()
                .BaseUnit(ChartAxisBaseUnit.Minutes)
                .Labels(labels => labels.Visible(false).Format("HH:mm")))
      .XAxis(x => x.Date()
                .BaseUnit(ChartAxisBaseUnit.Minutes)
                .Color("#DAA520")
                .Labels(labels => labels.Visible(false).Format("MM/dd")))
      .Tooltip(tooltip => tooltip
          .Visible(true)
          .Shared(true)
          .Template("<div class='ChartTooltip'>#= formatDate(value.x) # - #= value.y #</div>"))
      .Events(events => events.DataBound("onDataBound"))
      .Name("chart"))

I'm not sure how to do this but here is the scenario:

I have a page with a header bar that is fixed to the top of the viewport and has a high z-index so that when the page is scrolled vertically, any page content scrolls under the page header bar.

When a window is displayed and centered - there is the chance that the window caption/titlebar appear underneath the header bar where it is now no longer possible to drag the window or close it via the "x" button.

What I am trying to achieve is to set a min-top position for the window where no matter if the window is centered or dragged it will never go less than 100 pixels from the top of the client area (not to be confused with the viewport).

Similar to windows dev where you subclass a window and handle the WM_WINDOWMOVE type message and adjust the window position after the fact.

Any idea?

I have a nullable DateTime in a model and is set to required:



And in a partial view I have:


When the date is left blank, I get the validation error message, but I don't get the red outline styling that is typical with validation errors. A regular text box with the "k-textbox" styling works OK.

I'm using the editor and its in a jquery ui dialog, and I can't type text into the editor.

I call this function to open the jquery ui dialog:
function openSendEmailWindow(checkedArray) {
debugger;
$.ajax({
cache: false,
url: '/SendEmail/Email',
data: { checkedRecords: checkedArray.toString() },
type: "GET",
success: function (response, status, jqXHR) {
//debugger;
if (jqXHR.responseText) {
//debugger;
$("<div id='sendEmailWindow' style='display:none' title='Send Email'></div>").appendTo(".body-content");
$("#sendEmailWindow").html(response);
$("#sendEmailWindow").dialog({
position: ['top', 60],
width: 1300,
height: 625,
modal: true,

 close: function (event, ui) {
$(this).dialog('destroy').remove();
}
});
}
},
error: function (jqXHR) {
//debugger;
alert(jqXHR.statusText);
}
});
}

This is my partial view:
<div id="windowWrapper">
@using (Ajax.BeginForm("Email", "SendEmail", new AjaxOptions() { HttpMethod = "Post" }, new { id = "sendEmailForm", role = "form" }))
{
<div id="commandBar">
<span style="line-height:2em; margin-left:0.125em">
<button type="submit" class="k-button k-button-icon"><span class="k-icon k-update"></span></button>
<button type="button" onclick="closeSendEmailWindow(event);" class="k-button k-button-icon"><span class="k-icon k-cancel"></span></button>
</span>
</div>
<div id="windowContent">
<br />
@*@Html.AntiForgeryToken()*@
@Html.ValidationSummary(false, "Please correct the errors and try again:")
<div class="container-fluid">
<div class="row">
<div class='col-md-12'>
<div class="form-group">
@Html.LabelFor(m => m.Subject)<br />
@Html.TextBoxFor(m => m.Subject, new { @class = "form-control" })
@Html.ValidationMessage("Subject", "*")
</div>
</div>
</div>
<div class="row">
<div class='col-md-12'>
<div class="form-group">
@Html.LabelFor(m => m.Message)
@(Html.Kendo().EditorFor(m => m.Message)
.HtmlAttributes(new { @class = "form-control", style = "height:400px" })
)
@Html.ValidationMessage("Message", "*")
</div>
</div>
</div>
<div class="row">
<div class='col-md-12'>
<div class="form-group">
@Html.LabelFor(m => m.Attachment)<br />
@(Html.Kendo().Upload()
.Name("Files")
.HtmlAttributes(new { @class = "form-control" })
)
@Html.ValidationMessage("Attachment", "*")
</div>
</div>
</div>
</div>
@Html.HiddenFor(m => m.CheckedRecords)
@Html.HiddenFor(m => m.Attachment)
</div>
}
</div>

<script type="text/javascript">

function closeSendEmailWindow(e) {
this.parent.$("#sendEmailWindow").dialog('close');
}

$(document).ready(function () {

//for kendo numeric textbox to enable validation
$.validator.setDefaults({
ignore: ""
});

$.validator.unobtrusive.parse("#sendEmailForm");

$('#sendEmailForm').submit(function (e) {
debugger;
e.preventDefault();
$.ajax({
cache: false,
url: '@Url.Action("Email", "SendEmail")',
type: 'POST',
data: $(this).serialize(),
success: function (response, status, jqXHR) {
debugger;
if (jqXHR.responseText == '') {
$('input:checkbox').each(function () {
this.checked = false;
});
checked = {};
checkedArray = null;
 $("#sendEmailWindow").dialog('close');
}
},
error: function (jqXHR) {
debugger;
alert(jqXHR.statusText);
}
});
return false;
});

});

</script>