We have a simple kendo MVC grid works fine. However, if a bot/scan adds some normally invalid parameters to the querystring, the page throws an exception.
You can see that in action with the Telerik demo page:
This works
https://demos.telerik.com/aspnet-mvc/grid
This throws an exception. If you examine the console, you'll see a 500 error
https://demos.telerik.com/aspnet-mvc/grid?grid-sort=testsort
"testsort" is not a valid column, thus an exception occurs.
The above example isn't *exactly* what's happening with our grid since our grid is bound to a server side Model rather than an ajax source, but the concept is the same. In our page, the Kendo grid throws the error (rather than the ajax source) and the error is
Invalid property or field - '[invalid sort parameter passed in]' for type: [our model]
What is the best way to handle this since the Telerik Grid doesn't handle it automatically? I hate to wrap every grid in a try/catch just because the telerik control doesn't handle an invalid sort param, but I can certainly do that if that's the only option.
I'm having issue with getting WebComponentsIcons to appear in a testing environment after publishing. It works fine in dev.
I've looked everywhere to find the problem but with no success.
The font files are where the should be according to @font-face in kendo-common-bootstrap.css (/Content/web/fonts/glyphs/)
I haven't changed or overridden any of the css classes such as .k-tool-icon.
The class assignments are kendo - provided. I did not choose any of the classes that include WebComponentsIcons
I'm a little stumped here and and unsure of what I should be looking at for a solution.
I can't provide code due to security policy, but if I could get some general pointers to what I should be looking at that would be a huge help
Hi,
I'm trying to figure out how to get the "All Day" section in the Days and Week view to have a max height.
I've narrowed it down to the following CSS selector but i'm wondering if there's an easier way to achieve this.
.k-scheduler-dayview > tbody > tr:nth-child(1) > td > .k-scheduler-times > .k-scheduler-table > tbody > tr:nth-child(2),.k-scheduler-weekview > tbody > tr:nth-child(1) > td > .k-scheduler-times > .k-scheduler-table > tbody > tr:nth-child(2) { height: 100px !important; overflow-y: auto !important;}.k-scheduler-header > .k-scheduler-header-wrap > div { height: 100px !important; overflow-y: auto !important;}
One issue i've found going with this method is that on pages where there are no all day events, the height of the row does not correspond to the active area of the row inside it - which means the active area is just 1 row height - i.e. you can't click on the whole all day row to create a new item.
I've tried using the max-height property too but this doesn't seem to work.
Is the correct way to be setting row heights or is there an easier option?
Thanks

I'm trying to create a scheduler to present shift work for users
This view will require 2 sets of data to show up, one from 7am to 7pm and one from 7pm to 7am.
Is there a way to programmatically set the start and end times for the screen using Javascript so that when the clock goes to 7am, the view shows 7am to 7pm, and when it goes to 7pm, the screen automatically jumps to 7pm - 7am?
If the above is not possible, what is the closest way that we can achieve the above functionality?
Thanks

Hi,
I have read as many of the post surrounding this issue that I could find and still have no clue as to whether there is a solution that has been supplied for what seems to be a simple enough request. I simple want the DatePicker to format the date as dd/MM/yyyy (Culture en-IE), yet the validation keeps throwing this error. Here's what I have and maybe someone out there can suggest more things to try.
My Model:
[DataType(DataType.Date)][Display(Name = "Birth Date")][DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]public DateTime BirthDateE { get; set; }
My _layout.cshtml:
@*had to move it here from the bottom as otherwise ajax wouldn't work*@@Styles.Render("~/Content/kendo/css")@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/kendo")@Scripts.Render("~/bundles/bootstrap")@Styles.Render("~/Content/css")@Scripts.Render("~/bundles/modernizr")@RenderSection("styles", required: false)@RenderSection("scripts", required: false)<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>@* Adding style for DatePicker *@<link href="../../Content/themes/base/all.css" rel="stylesheet" type="text/css" /><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">@* NOT <script src="/ReportViewer/js/telerikReportViewer-10.2.16.1025.min.js"></script>*@<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script src="@Url.Content("~/Scripts/cultures/kendo.culture.en-IE.min.js")"></script><script> kendo.culture("en-IE");</script>
My View:
<tr> <td class="text-right" width="30%"> @Html.LabelFor(model => model.BirthDateE) </td> <td width="70%"> <div class="form-group"> @(Html.Kendo().DatePickerFor(model => model.BirthDateE) .Culture("en-IE") .Format("dd/MM/yyyy") .ParseFormats(new List<string>() { "dd/MM/yyyy" }) .HtmlAttributes(new { @class = "form-control" })) @Html.ValidationMessageFor(model => model.BirthDateE, "", new { @class = "text-danger" }) </div> </td></tr>
My web.config:
<system.web> <globalization culture="en-IE" uiCulture="en-IE" /> <authentication mode="None" /> <compilation debug="true" targetFramework="4.5.2" /> <httpRuntime targetFramework="4.5.2" /></system.web>
And my resulting screen shot is attached.
What am I missing to get this working? It should not be this difficult!!!
Shawn
I'm fairly new to MVC (and web development in general) and I keep coming across several 'gotchas' which result in unexpected behaviour. I am using Kendo UI for ASP.NET MVC, however I'm 99% certain that my problem is due to my lack of understanding of either Javascript or MVC rather than anything to do with Kendo.
You should be able to reproduce the problem using the following code:
Models:
public class DemoClass { public int id { get; set; } public string randomData { get; set; } public List<DemoPartyDetails> partyDetails { get; set; } public DemoClass() { partyDetails = new List<DemoPartyDetails>(); } }public class DemoPartyDetails { public int id { get; set; } public string firstName { get; set; } public string surname { get; set; } public string gender { get; set; } public DemoPartyDetails() { } }
Controller:
public class DemoController : Controller { // GET: Demo public ActionResult Index() { DemoClass demo = new DemoClass(); return View(demo); } [HttpPost] public ActionResult Create(DemoClass model) { try { if (model.partyDetails[0].gender != null) Console.WriteLine("Party details populated"); else Console.WriteLine("Something went wrong..."); return RedirectToAction("Index"); } catch { return View(); } } }
View:
@model DemoPortal.Models.DemoClass<html><head> <meta name="viewport" content="width=device-width" /> <title></title></head><body> @using (Html.BeginForm("Create", "Demo", FormMethod.Post)) { <div> @Html.EditorFor(model => model.randomData) </div> <div> <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-i-add"></span>Add Party</a> @(Html.Kendo().ListView(Model.partyDetails) .Name("demoListView") .TagName("div") .ClientTemplateId("demoTemplate") .DataSource(dataSource => dataSource .Model(model => model.Id(x => x.id)) ) .Editable(editable => editable.TemplateName("DemoPartyDetails")) ) </div> <input type="submit" value="Submit" /> }</body></html><script type="text/x-kendo-tmpl" id="demoTemplate"> <div class="demoParty"> <h3>#:firstName#</h3> <span>#:surname#</span> <input type="hidden" name="PartyDetails[#:index(data)#].firstName" value="#:firstName#" /> <input type="hidden" name="PartyDetails[#:index(data)#].surname" value="#:surname#" /> <input type="hidden" name="PartyDetails[#:index(data)#].gender" value="#:gender#" /> </div></script><script>$(function() { var listView = $("#demoListView").data("kendoListView"); $(".k-add-button").click(function(e) { listView.add(); e.preventDefault(); });});function index(dataItem) { var data = $("#demoListView").data("kendoListView").dataSource.data(); return data.indexOf(dataItem);}function maleClick(e) { document.getElementById("gender").value = "M"; document.getElementById("randomData").value = "random"; var maleButton = document.getElementById("IsMale"); var femaleButton = document.getElementById("IsFemale"); femaleButton.classList.remove("k-primary"); maleButton.classList.add("k-primary");};function femaleClick(e) { document.getElementById("gender").value = "F"; var maleButton = document.getElementById("IsMale"); var femaleButton = document.getElementById("IsFemale"); maleButton.classList.remove("k-primary"); femaleButton.classList.add("k-primary");};</script>
DemoPartyDetails Editor Template
@model DemoPortal.Models.DemoPartyDetails@using (Html.BeginForm()){ <div> <div> <label>Gender:</label> @(Html.Kendo().Button() .Name("IsMale") .Content("Male") .HtmlAttributes(new { type = "button" }) .Events(ev => ev.Click("maleClick"))) @(Html.Kendo().Button() .Name("IsFemale") .Content("Female") .HtmlAttributes(new { type = "button", @class = "k-primary" }) .Events(ev => ev.Click("femaleClick"))) </div> @(Html.HiddenFor(model => model.id)) @(Html.EditorFor(model => model.gender)) @(Html.EditorFor(model => model.firstName)) @(Html.EditorFor(model => model.surname)) <div class="btnArea"> <a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a> <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a> </div> </div>}
When running this code, I can click the button to add a new party, the editor template appears as expected and I press the 'Male' button, which populates the gender field with "M".
I then fill in the other two fields with generic "Test" and "Person" data before confirming the entry and then pressing submit.
What I find when I place a breakpoint at the controller however is that the model being passed through has the gender set to null. The first name and surname ("Test" and "Person") are fully populated however. The randomData is also fully populated as expected.
Interestingly, if I go back and manually type something like "Male" into the gender field, that is now also populated. It's only when I try to use javascript to set the value that it's null.
The ultimate goal is to have a hidden field populated by javascript when a button is pressed, so if someone could point out my mistake it would be very much appreciated!
Hi, I am trying Kendo UI for MVc for first time. I am trying to bind a dropdownlist on change event of another dropdownlist.
Here is what I have in view:
<tr> <td style="width:20%">Country</td> <td style="width:30%"> @(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].CountryId).DataTextField("CountryName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].Country).HtmlAttributes(new { style = "width:280px" }) .Events(e => e.Change("country_Change")) .Name("ddlCountry")) </td> <td style="width:20%"></td> <td style="width:30%"></td> </tr> <tr> <td style="width:20%">State</td> <td> @(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].StateId).DataTextField("StateName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].State).HtmlAttributes(new { style = "width:280px" }) .Events(e => e.Change("state_Change")) .Name("ddlState") .CascadeFrom("ddlCountry")) </td> <td style="width:20%"></td> <td style="width:30%"></td> </tr>And I am trying to bind the ddlState dropdownlist using ajax like below:
function country_Change() { $.ajax({ type: 'GET', url: '/api/v1/State/GetStatesFromCountry', dataType: 'json', data: { countryId : $("#ddlCountry").val() }, success: function (states) { $.each(states, function (i, state) { $("#ddlState").append('<option value="' + state.id + '">' + state.stateName + '</option>'); }); }, error: function (ex) { alert('Failed to retrieve states.' + ex); } });}For Now I have 3 countries in table. On page load, all countries can be seen in the country dropdown and its related states in state dropdown. But after Change event occurs, the default value from state dropdown remains as it is, whereas I was expecting it to be filled by states from other countries.
What am I doing wrong?

I have a listview that I need to create a filter for when a user clicks on a button. The filter it needs to add is very complex and I am at a loss as to how to implement it. The application I am building is taking an existing Access database application and converting it to MVC. The filter they used in Access is below. How can I convert this to work in the function at the bottom? I have several filters like this to figure out so I greatly appreciate any help you can give me.
"(((UM)='yes') AND ((FINDATE) Is Not Null) AND ((INVMANDATE) Is Null)) OR (((STKCLASS)='yes') AND ((FINDATE) Is Not Null) AND ((INVMANDATE) Is Null)) OR (((COMMCODE)='yes') AND ((FINDATE) Is Not Null) AND ((INVMANDATE) Is Null)) OR (((COMMONINV)='yes') AND ((FINDATE) Is Not Null) AND ((INVMANDATE) Is Null)) OR (((UM)<>'YES') AND ((STKCLASS)<>'YES') AND ((COMMCODE)<>'YES') AND ((COMMONINV)<>'YES') AND ((INVCTLDATE) Is Not Null) AND ((INVMANDATE) Is Null)) OR (((UM)<>'YES') AND ((STKCLASS)<>'YES') AND ((COMMCODE)<>'YES') AND ((COMMONINV)<>'YES') AND ((REQDATE) Is Not Null) AND ((INVMANDATE) Is Null))"
function filterListview() {
var listView = $("#lvInvMan").data("kendoListView");
listView.dataSource.filter({});
var currentFilters = [], filter;
var myfilter = {
logic: "and",
filters: currentFilters
};
listView.dataSource.filter(myfilter);
}
Yo, so im using the trail version of Telerik and doing some R&D to check if the telerik controls would suit our dev environment.
I have a mvc grid on a view, the grid has an additional action button column using the ClientTemplate(), in this column i render image button which has javascript function linked to the click event which also passes the Grid Id as a parameter. and depending on an active status bound to the grid this also decides what image buttons are displayed.
@(Html.Kendo().Grid<Presentation.AccountGridViewModel>() .Name("Grid") .Columns(columns => { columns.Select().Width(31); columns.Bound(o => o.Id).Groupable(false).Visible(false); columns.Bound(o => o.Name); columns.Bound(o => o.LastUpdated); columns.Bound(o => o.Active); columns.Bound(o => o.Id).ClientTemplate("<img class='grid-button gb-update' src='../Images/icons/update.png' onclick='update(#=Id#)' title='Update'/>" + "#if(Active){#<img class='grid-button gb-delete' src='../Images/icons/delete.png' onclick='deactivate(#=Id#)' title='Delete'/>#}#") .Width(100) .Title("Actions") .Filterable(false); }) .Pageable(pager => pager.AlwaysVisible(true).ButtonCount(5).PageSizes(new List<object> { 5, 10, 20, 100 })) .Sortable() .Filterable() .Scrollable() .PersistSelection() .Events(ev => ev.Change("onChange")) .ClientDetailTemplateId("template") .HtmlAttributes(new { style = "height: 500px;margin-top:40px;" }) .DataSource(d => d .Ajax() .Model(a => a.Id(p => p.Id)) .Read(read => read.Action("CustomAjaxBinding_Read", "Setting")) .PageSize(20) ))I have also instantiated a very basic window on the page and the rest i control via javascript.
@(Html.Kendo().Window() .Name("window") .Width(650) .Height(500) .Visible(false) .Actions(actions => actions.Maximize().Close()) .Draggable())
When the grid button is clicked the javascript function i have opens the window with out any issue,sets the title and centers the window. the problem i am having is how do i dynamically render a MVC partial view inside of the window. loading static content is no issue. is there a javascript equivalent to LoadContentFrom() for the MVC control?
The request should pass the Id parameter from the javascript function to a MVC PartialViewResult action and render the partial view within the Telerik window.
function update(Id) { $("#window").data("kendoWindow") .center() .title('Update Account') .content("your current ID is : "+ Id) // .LoadContentFrom("Test", "Setting") .open();}
The end goal here is to display a form within the window that will allow me to update the record and close the window once the save button is clicked and the grid will also be refreshed to display the updated values.
Thanks in advance
