Telerik Forums
UI for ASP.NET MVC Forum
4 answers
132 views
Hey,

I've been using your MVC wrappers for some time and I absolutely love them!
I just migrated a project on which I was using the Telerik Extensions for ASP.NET MVC to use Kendo UI. There have been some problems, but in the end it works like a charm.

I'm just faced with an issue I can't resolve...
On a "Details" page, I have a static, server-bound grid with a column which has a specific EditorTemplate, itself using a Kendo DropDownList.

All my controls use the deferred JS output to keep all the JS clean and at the bottom of the page.
My issue is that the initalization script of the DropDownList is outputted right after the <input> and not at the bottom of the page where I call the DeferredScripts() function.

Let me show you some code that may clear up what I'm trying to explain.

My Models:
public class MyParentViewModel
{
    public IEnumerable<MyChildViewModel> Children
    {
        get;
        set;
    }
}
 
public class MyChildViewModel
{
    public String DummyString
    {
        get;
        set;
    }
 
    public Boolean? DummyBoolean
    {
        get;
        set;
    }
}
My view:
@model MyParentViewModel
 
@(
    Html.Kendo().Grid(Model.Children)
        .Name("Children")
        .Deferred()
        .Columns(c =>
        {
            c.Bound(x => x.DummyString);
            c.Bound(x => x.DummyBoolean);
        });
)
The EditorTemplate associated to the DummyBoolean property:
@model Boolean
 
@(
    Html.Kendo().DropDownListFor(x => x)
        .Deferred()
        .Items(items =>
        {
            items.Add().Selected(value == false).Text("Non").Value(Boolean.FalseString);
            items.Add().Selected(value == true).Text("Oui").Value(Boolean.TrueString);
        })
        .HtmlAttributes(new { style = "width:100px; line-height:normal;" })
)
And that's the outputted HTML:
<div class="k-widget k-grid k-secondary" id="Groupements" data-role="grid">
    <table role="grid">
        <colgroup>
            <col style="width:20%">
            <col>
        </colgroup>
        <thead class="k-grid-header">
            <tr>
                <th class="k-header" data-field="DummyString" data-title="DummyString" scope="col">
                    <span class="k-link">DummyString</span>
                </th>
                <th class="k-header" data-field="DummyBoolean" data-title="DummyBoolean" scope="col">
                    <span class="k-link">DummyBoolean</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Groupement #1</td>
                <td>
                    <input disabled="disabled" id="DummyBoolean" name="DummyBoolean" style="width:100px; line-height:normal;" type="text" value="True">
                    <script>
                        jQuery(function () { jQuery("#DummyBoolean").kendoDropDownList({ "dataSource": [{ "Text": "Non", "Value": "False", "Selected": false }, { "Text": "Oui", "Value": "True", "Selected": true }], "dataTextField": "Text", "dataValueField": "Value" }); });
                    </script>
                </td>
            </tr>
            <tr class="k-alt">
                <td>Groupement #2</td>
                <td>
                    <input disabled="disabled" id="DummyBoolean" name="DummyBoolean" style="width:100px; line-height:normal;" type="text" value="True">
                    <script>
                        jQuery(function () { jQuery("#DummyBoolean").kendoDropDownList({ "dataSource": [{ "Text": "Non", "Value": "False", "Selected": false }, { "Text": "Oui", "Value": "True", "Selected": true }], "dataTextField": "Text", "dataValueField": "Value" }); });
                    </script>
                </td>
            </tr>
        </tbody>
    </table>
</div>
As you can see, we only have here the DropDownLists' initialization scripts.
The table's is at the bottom of the page where I expect it to be.

Is there anything I'm missing?
Thanks in advance.
Sincerely,
Mickaël Derriey
Alexander Popov
Telerik team
 answered on 08 Jan 2014
5 answers
578 views
I'm initialising a chart in MVC razor syntax, and am unable to find a way of specifying the schema of returned data from an AJAX bound DataSource, as specified in the DataSource documentation:

schema: {
    data: "results" // twitter's response is { "results": [ /* results */ ] }
}

As I'm not autobinding my chart, I've tried setting the schema property in JS before calling the read() method on the DataSource , but this doesn't seem to make any difference:

chart.dataSource.options = { schema: { data: "results" } };

Is this functionality possible using the ASP.NET wrappers?
Orrin
Top achievements
Rank 1
 answered on 07 Jan 2014
1 answer
97 views
I just downloaded and installed a trial of Kendo UI Complete for ASP MVC.  I am running VS 2012.  I Opened the examples project (Kendo.MVC.Examples) and tried out some of the mobile components.  Most of them seem to be broken.  For example, when you try out the drawer.

http://localhost:56541/razor/mobile/drawer/index
Your port number might be different.1

Click on the button that opens the drawer (upper left corner).  A javascript error is thrown.
Uncaught Error: Syntax error, unrecognized expression: #!
The error is thrown from jQuery and is complaining about the bang symbol after the hash.

I am trying to create my own prototype app from your example code and am encountering the same issues.

Thanks for your help.
Kiril Nikolov
Telerik team
 answered on 07 Jan 2014
1 answer
141 views
Hello,

I've tried this on the online demo at : 

http://demos.kendoui.com/web/editor/all-tools.html

click the View Html tool, edit the first img tag and add onerror="imgError()" to it.

Click update button. View Html again and my change has now disappeared. Why is that ?
I've first noticed it locally and I thought I did something wrong, then I tried it on the online demo section and the same behaviour happens. 

Things get even weirder if you add something like onerror="alert('The image could not be loaded.')"

if you view html again this is what you get : 

<img alt="Editor for ASP.NET MVC logo" be="" could="" image="" loaded.');"="" not="" src="http://www.kendoui.com/Image/kendo-logo.png" style="display:block;margin-left:auto;margin-right:auto;" the="" />

Looks like a big bug to me.
Alex Gyoshev
Telerik team
 answered on 06 Jan 2014
1 answer
321 views
Hi -

I am trying to implement a ListView with remote call from the example using MVC helpers.
I am using MVC5 and Kendo Q3.

I am creating a ListView that calls a controller method to retrieve data. However, nothing is
display and putting a debug break point is never executed on the controller.

Any ideas?  

My helper HTML is straight from the example codes and looks like this:

                        @(Html.Kendo().ListView<StatusItemInfo>()
                                .Name("statuslistview")
                                .TagName("div")
                                .ClientTemplateId("template")
                        .DataSource(dataSource => 
                            dataSource.Read(read => read.Action("Products_Read", "Home"))
                        )
                        )

My controller:


        public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
        {
            List<StatusItemInfo> myList = new List<StatusItemInfo>();
            var info = new StatusItemInfo();
            info.Location = "Sams Plaza";
            info.EcoSystem = "POS";
            info.Category = "File";
            info.Age = "7 hours";
            info.Division = "Div 2";
            myList.Add(info);

            DataSourceResult results = myList.ToDataSourceResult(request);
            return Json(results, JsonRequestBehavior.AllowGet);
        }

My template:
<script type="text/x-kendo-template" id="template">
    <div class="col-md-3 col-xs-3">
        <div class="issue-card white-bg border-wrap ">
            <div class="card-title border-bottom">
                <h4 class="error"><span class="companyFieldNumberIssues">#:Location #</span></h4>
            </div>
            <div class="stacked-stats">
                <h3 class="no-margin">#:Category #</h3><span>#:Age #</span>
                <h3 class="no-margin">#:EcoSystem #</h3><span>#:Division #</span>
            </div>
        </div>
    </div>
</script>

I don't see any javascript console errors.   
In the Network tab of Chrome developer tools, I do not see any calls to my controller.

What am I doing wrong?

Thanks,
bruce 
bruce
Top achievements
Rank 1
 answered on 06 Jan 2014
1 answer
208 views
I have a requirement to override the existing window to add an event as we have additional field we would like to display. The Template open correctly and populates the standard scheduler columns. However before opening the window I need to call our server to get a list of event types and a list of member (or possible members). 

or index.cshtml looks like this

            @(Html.Kendo().Scheduler<TalkBox.Mvc.ViewModels.Calendar.CalendarViewModel>()
                  .Name("scheduler")
                  .Date(DateTime.UtcNow)
                  .Timezone("Etc/UTC")
                  .Height(700)
                  .BindTo(Model)
                  .Views(views =>
                            {
                                views.DayView(dayView => dayView.Selected(true));
                                views.WeekView();
                                views.MonthView();
                                views.AgendaView();
                            })
                   .DataSource(d => d
                        .Model(m => m.Id(f => f.EventId))
                        .Read(u => u.Action("Read", "Calendar"))
                        .Update(u => u.Action("Update", "Calendar").Data("serialize"))
                        .Create(c => c.Action("Create", "Calendar").Data("serialize"))
                        .Destroy(delete => delete.Action("Delete","Calendar"))
                    ) 
                    .Editable(e => e.TemplateName("CalendarEditor"))

I thought that the .Read(u => u.Action("Read", "Calendar")) would fire the read function before the template is displayed.

How do I fire an event on open of the new template?

Damion


Georgi Krustev
Telerik team
 answered on 06 Jan 2014
9 answers
980 views
Grid init:
<div class="AbsenceGrid">
    @(Html.Kendo().Scheduler<AbsenceViewModel>()
          .Name("employeeScheduler")
          .Date(DateTime.Now)
          .Height(600)
          .Views(views => views.MonthView())
          .Editable(e => e.TemplateName("AbsenceEditor"))
          .Resources(res =>
              {
                  res.Add(r => r.AuthorisedById)
                     .Title("Authorised By")
                     .DataTextField("Name")
                     .DataValueField("EmployeeId")
                     .DataSource(d =>d.Read(r => r.Action("AuthorisedByRead", "Schedule")));
              })
               
          .DataSource(d => d
               .Model(m => m.Id(f => f.EmployeeAbsenceId))
               .Read(r => r.Action("EmployeesAbsencesRead", "Schedule"))
               .Create(c => c.Action("EmployeesAbsencesCreate", "Schedule"))
               .Destroy("Destroy", "Schedule")
               .Update("Update", "Schedule")
          )
          )
</div>

Custom Template: (Views/Shared/EditorTemplates/AbsenceEditor.cshtml)
@model Employees.Web.Models.AbsenceViewModel
 
@Html.HiddenFor(x => x.EmployeeAbsenceId)
 
<div class="editor-label">
    @Html.LabelFor(x => x.Title)
</div>
<div class="editor-field">
    @Html.EditorFor(x => x.Title)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(x => x.Start)
</div>
<div class="editor-field">
    @Html.EditorFor(x => x.Start)
</div>
<br/>
<div class="editor-label">
    @Html.LabelFor(x => x.End)
</div>
<div class="editor-field">
    @Html.EditorFor(x => x.End)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(x => x.IsAllDay)
</div>
<div class="editor-field">
    @Html.EditorFor(x => x.IsAllDay)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(x => x.Description)
</div>
<div class="editor-field">
    @Html.EditorFor(x => x.Description)
</div>
<br />

Firstly, is it possible to do it using razor as above, or do I have to use the MVVM binding method? Currently the view shows, but none of the values from the model are persisted into the form and the form won't submit, but I guess I'll get to that in time.

Secondly, if that's possible, how would I include the recurrence rule editor? 

Thanks.
Petur Subev
Telerik team
 answered on 03 Jan 2014
2 answers
910 views
Hello Kendo,

I have a ToolTip widget that is receiving data returned from a JSON call. Here is the data call:

public JsonResult GetCountsForSessions(int Id)
        {
           //hard coded data call for testing
            string CountsForSessions = Id.ToString() +  "<br />";
            CountsForSessions += "Item 1 info <br />";
            CountsForSessions += "Item 2 Info <br />";            
            return this.Json(CountsForSessions, JsonRequestBehavior.AllowGet);            
        }

The ToolTip does display the correct data, but the <br> tags are ignored and the resulting text displayed in the ToolTip looks like:

"1077 \u003cbr /\u003eItem 1 info\u003cbr /\u003eItem 2 Info3 \u003cbr /\u003e"

With no like breaks. My goal is to get the data to display in the ToolTip like:

1077
Item 1 info
Item 2 Info

How can  achieve this formatting? Thanks for the help,

Carl


Carl
Top achievements
Rank 1
 answered on 03 Jan 2014
1 answer
169 views
Hi
                I am using Kendo grid. the filer java script code not working in ie8.But the same code working with firefox and chrome also .below is my code
<br>function GridFilterChange(svalue, sgridName, sColumnName) {<br>   <b> var grid = $(sgridName).data("kendoGrid");</b><br>    if (svalue) {<br>        grid.dataSource.filter({ field: sColumnName, operator: "contains", value: svalue });<br>    } else {<br>        grid.dataSource.filter({});<br>    }<br>}
Can any one help me


Working environment
OS : Windows xp
Browser :IE8

Regards
Vairamuthu.G.S
Atanas Korchev
Telerik team
 answered on 03 Jan 2014
3 answers
186 views
I just downloaded the trial version, and I'm having problems creating a simple grid. I tries three different "variations" and none seem to work.

First, I tried this:
@(Html.Kendo().Grid(Model).Name("ConnectionManagementSystems").Columns(c => {    c.
I don't get intellisense for c.Bound method, so something is wrong.

I then tried 

@(Html.Kendo().Grid<ConnectionManagement.Models.ConnectionManagement2Model></ConnectionManagement.Models.ConnectionManagement2Model>
But it thinks that the model is an html tag and not the model class.

I then tried 

<script>
    $(document).ready(function () {
        $("#connectionManagementSystems").kendoGrid();
    });
</script>
    <div id="connectionManagementSystems">
 
    <table>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddress)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddressCity)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddressState)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddressZipCode)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SystemId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SystemType)
            </th>
            <th></th>
        </tr>
     
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.SiteAddress)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SiteAddressCity)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SiteAddressState)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SiteAddressZipCode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SiteId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SiteName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SystemId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SystemType)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
    }
     
    </table>
            </div>
 
 
    
But this places the headers at the bottom of the grid.

It seems that there are many different ways to create grids, so what is the best way and why don't the above work?

Thanks
Alex

Daniel
Telerik team
 answered on 02 Jan 2014
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
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
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?