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

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.

Angel Petrov
Telerik team
 answered on 05 Nov 2018
1 answer
1.7K+ views

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

Marin Bratanov
Telerik team
 answered on 02 Nov 2018
1 answer
207 views

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

Ivan Danchev
Telerik team
 answered on 02 Nov 2018
1 answer
135 views

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

Dimitar
Telerik team
 answered on 02 Nov 2018
5 answers
838 views
Hi,
I purchased this product and I have some problems.
1. How to post all data in KendoGrid back to controller on button click? The button is html input button. Can anybody provide a very simple sample, please?
2. I also use client template for editing and deleting because I use custom pop up window. So, in each row there are two more columns for editing and deleting single row selected by user. Can I also send one complete row as Json format or single model to the controller? I have no idea how to do it.

Thanks in advance.
Tsvetina
Telerik team
 answered on 01 Nov 2018
2 answers
7.3K+ views

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://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

Divyang
Top achievements
Rank 1
 answered on 01 Nov 2018
2 answers
4.7K+ views

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!

Marc
Top achievements
Rank 1
 answered on 01 Nov 2018
1 answer
1.1K+ views

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? 

Veselin Tsvetanov
Telerik team
 answered on 31 Oct 2018
3 answers
68 views

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);
}

Richard
Top achievements
Rank 1
 answered on 30 Oct 2018
3 answers
1.4K+ views

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

 

Ivan Danchev
Telerik team
 answered on 30 Oct 2018
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
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
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
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?