Telerik Forums
UI for ASP.NET MVC Forum
1 answer
97 views
We have used KendoUI grid (v2013.2.918) control in our application with Detail template. We observe that when rows selection changes it is taking time to get the row selected.
Is there a known issue with the performance of selecting grid rows in IE (11, 10, 9)?
While it is working fine in other browsers (Chrome, Firefox etc).
Do we need to handle anything specific? Please suggest.

Thanks
Raj


Dimo
Telerik team
 answered on 24 Dec 2013
1 answer
128 views
Hi Team,

We have used KendoUI grid control in our application with Detail template. During testing, we found that there are performance issues in Windows XP with IE8 browser. Data binding/loading in IE 8 browser take more time than compared to other browsers (IE9, Chrome etc. - almost more than double time).

Also observed that when the grid is loaded with more than 500 records the entire application becomes non responsive.
Do we need to handle anything specific? Please suggest. 

This is bit urgent for us since client machines are Win XP.

Thanks,
Raj

Kiril Nikolov
Telerik team
 answered on 24 Dec 2013
2 answers
1.1K+ views
Hello,
I am newbie in telerik kendo UI. I start with list view and I don't have a clue how to pass some data during item creation. My scenario: I have some Types.  Each type has some groups. For each typeI want to create List View with  some groups. I used sample List View editing and have some questions:

- where Can I find information about different types of client template. I mean this markups because in samples there is only string display, and convert to string with some format

- how can I pass TypeID during Item Creation

My editor template code:
@model CustomFieldsGroup
 
@using (Html.BeginForm())
{
 
    @Html.HiddenFor(x => x.GroupID)
    @Html.HiddenFor(x => x.TypeID)
 
    <ul>
        <li>
            @Html.LabelFor(x => x.GroupName)
        </li>
        <li>
            @Html.EditorFor(x => x.GroupName)
        </li>
    </ul>
 
    <div class="edit-buttons">
        <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
    </div>
}
My Type ID is always 0. When I am editing group Type ID is populated.

List View:
<div class="k-toolbar k-grid-toolbar">
    <a id="addRoleButton" class="k-button k-button-icontext k-add-button test" href="\\#"><span class="k-icon k-add"></span>Add new group</a>
</div>
 
<script type="text/x-kendo-tmpl" id="customFieldTemplate">
    <div class="product-view k-widget">
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
        </div>
        <div>
            Group Name
        </div>
        <div>
            ${GroupName}
        </div>
        @*<dl>
                <dt>GroupName</dt>
                <dd>${GroupName}</dd>
                <dt>Unit Price</dt>
                    <dd>#:kendo.toString(UnitPrice, "c")#</dd>
                    <dt>Units In Stock</dt>
                    <dd>#:UnitsInStock#</dd>
                    <dt>Discontinued</dt>
                    <dd>#:Discontinued#</dd>
            </dl>*@
    </div>
</script>
 
<div class="fields">
    @(Html.Kendo().ListView<CustomFieldsGroup>(Model.Groups)
        .Name("listView")
        .ClientTemplateId("customFieldTemplate")
        .TagName("div")
        .DataSource(datasource =>
            datasource.Model(model=>
                {
                    model.Id(x => x.GroupID);
                    model.Field(x => x.TypeID).Editable(false);
                    model.Field(x => x.GroupName);
                })
            .Read(ac => ac.Action("Index_Read", "CustomFields"))
            .Create(ac => ac.Action("CreateGroup", "CustomFields"))
            .Update(ac => ac.Action("EditGroup", "CustomFields")))
        .Editable())
    )
</div>
 
<script>
    $(function () {
        var listView = $("#listView").data("kendoListView");
 
        $(".test").bind("click", function (e) {
            listView.add();
            e.preventDefault();
        })
    })
</script>

 
Marek
Top achievements
Rank 1
 answered on 23 Dec 2013
4 answers
129 views
Dear KendoUI Team!
It looks like there is a bug in the actual Version (2013.3.1119) of KendoUI that didn't exist in older versions. Nested Tables are not possible any more.
To reproduce this issue:
- Upgrade the demo project AjaxHierarchyEditing to Version 2013.3.1119 using the Upgrade wizard.
- Try to open any Detailsorder table. You will receive a javascript error in "e.execScript||function(t){e.eval.call(e,t)})(t)" The Read_OrderDetails method will not be called.
I am using VS2010 und IE 10.
So, my question:
- Is there a fix or a workaround? If not, when will it be available?

brgds
Malcolm Howlett.
Malcolm
Top achievements
Rank 1
 answered on 23 Dec 2013
1 answer
237 views
Hi, I'm having an issue with inline editing, create with the kendo grid. 
When I click on the "edit" button in the grid, instead of the row turning into edit mode, I am redirected to a bank view with Json data. The same thing happens when I click on the "create" button in the grid. If it helps to know, this view is actually a partial view that is injected via ajax and It displays fine..

I have tried a lot of different things, like checking that I have the required JS libraries, tweaking the grid configurations in my view, etc... 
I'm sure there is something really small that is causing this behavior and I would appreciate it if anybody can help me with this..

The view:
@model IEnumerable<TOPS.IQ.ViewModels.Administration.WebInfoVM>
 
    @(Html.Kendo().Grid<TOPS.IQ.ViewModels.Administration.WebInfoVM>(Model)
                .Name("grid")
                .HtmlAttributes(new { style = "height: 280px;" })
                .DataSource(dataSource =>
                    dataSource.Ajax()
                            .Read(read => read.Action("EditingInlineWebInfo_Read", "Administration", new { id = Model.FirstOrDefault() == null ? 0 : Model.First().CommunityID }))
                            .Model(model => model.Id(m => m.WebInfoID))
                            .Create(update => update.Action("EditingInlineWebInfo_Create", "Administration"))
                            .Update(update => update.Action("EditingInlineWebInfo_Update", "Administration"))
                            .Destroy(update => update.Action("EditingInlineWebInfo_Destroy", "Administration"))
                             
                    )
                .Columns(columns =>
                {
                    columns.Bound(p => p.WebInfoTypeName);
                    columns.Bound(p => p.Email);
                    columns.Bound(p => p.Description);
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                })
                 
                 
                .ToolBar(toolbar => toolbar.Create())
                .Editable()
                .Pageable()
                .Sortable()
                .Scrollable()
                 
                 
 )

The Controller actions:

public JsonResult EditingInlineWebInfo_Read([DataSourceRequest] DataSourceRequest request, int id)
       {
           //get the web infos for the given community
           var webInfos = _service.FindAll<Community_Webaddress>().Where(c => c.CommunityID == id).Select(c => c.WebAddress);
           var webInfosVM = webInfos.ConvertToWebInfoesVM();
 
           return Json(webInfosVM.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
       }
 
       [HttpPost]
       public ActionResult EditingInlineWebInfo_Create([DataSourceRequest] DataSourceRequest request, WebInfoVM webVM)
       {
           if (webVM != null && ModelState.IsValid)
           {
               var webAddr = webVM.ConvertToWebAddress();
               _service.Add<WebAddress>(webAddr);
               var task = _service.SaveChangesAsync();
               int result = task.Result;
           }
 
           return Json(new[] { webVM }.ToDataSourceResult(request, ModelState));
       }
 
       [HttpPost]
       public ActionResult EditingInlineWebInfo_Update([DataSourceRequest] DataSourceRequest request, WebInfoVM webVM)
       {
           if (webVM != null && ModelState.IsValid)
           {
               var webAddr = webVM.ConvertToWebAddress();
              var task = _service.SaveChangesAsync();
              int result = task.Result;
           }
 
           return Json(new[] { webVM }.ToDataSourceResult(request, ModelState));
 
       }

Vladimir Iliev
Telerik team
 answered on 21 Dec 2013
1 answer
80 views
I am starting a new scheduler on an existing database.
Making the scheduler showing the data from the database is working now, but only for the data i get via GetAll()
What i would like to do is take the date(range) from the scheduler and use that to get the data from the database
And ofcourse this should be done when the scheduler is started and everytime the view is changed (day, week, month) or the user navigate forward or backward.
Can someone point me in the right direction ?
Vladimir Iliev
Telerik team
 answered on 21 Dec 2013
5 answers
791 views
I have an older copy of the .net kendo ui sample code.  In the sample, the following ViewModel is included.

    public class ProductViewModel
    {
        public ProductDTO ProductMeta { get; set; }
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public int UnitsInStock { get; set; }
        public bool Discontinued { get; set; }
        public DateTime LastSupply { get; set; }
        public int UnitsOnOrder { get; set; }
    }

The VM also uses this class.

    public class ProductDTO
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public decimal? UnitPrice { get; set; }
    }

In the Areas/razor/views/grid/editing.cshtml file, if I change the following line

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
      columns.Bound(p => p.UnitPrice).Width(140);        

TO....

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
      columns.Bound(p => p.ProductMeta.UnitPrice).Width(140);


The binding works correctly on update.  So if I change the value of unit price to 25, the vm.ProductMeta.UnitPrice value will be set appropriately to 25.

However, if I add the following statement (statement bolded), the binding no longer works

    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
            {
                model.Id(p => p.ProductID);
              model.Field(p => p.ProductMeta.UnitPrice).DefaultValue(30);
            })

Inspecting the payload sent to the GridController.EditingUpdate() method, I notice that the value for ProductMeta.UnitPrice is not changed.

Is there a work around for this?  

It seems like the grid is not overly fond of working with nested objects exposed from VMs, especially when using the Model() method.

I'd rather not have to flatten my VM in order to get this to work.

Thanks!
Pauline
Top achievements
Rank 1
 answered on 20 Dec 2013
1 answer
488 views
Hi,

I'm kind of new to Kendo UI, and I'm now trying to put a Panel Bar inside of a Tab Strip with the following code. The error I get is "Inline markup blocks (@<p>Content</p>) cannot be nested.  Only one level of inline markup is allowed." It seems to get stuck on the .Content-part under "UnitLogInfo". Any help is really appreciated.

Thanks,
Peter
@(Html.Kendo().TabStrip()
        .Name("SettingsTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Phone")
                .Selected(true)
                .Content(@<text>
                    @(Html.Kendo().PanelBar()
                        .Name("IntroPanelBar")
                        .Items(panelItems =>
                        {
                            panelItems.Add()
                                .Text("OrtSettings")
                                .Selected(true)
                                .Expanded(true)
                                .Content(@<text>
                                    <p style="padding:0 1em">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        Donec egestas nisi at hendrerit molestie. Nunc sed lectus vel
                                        enim accumsan faucibus ut vel erat. Quisque pharetra ante mi,
                                        vitae volutpat odio tincidunt sed. Nam et elementum tellus.
                                        Nunc non tellus nisi. Aliquam vitae est ut mi gravida cursus
                                        ut in erat. Praesent eu sollicitudin dui.                                    
                                    </p>
                                </text>);
                            panelItems.Add()
                                .Text("UnitLogInfo")
                                .Content(@<text>
                                    <p style="padding:0 1em">
                                        Aliquam tincidunt luctus augue, vitae tempus tortor ultrices a.
                                        Donec turpis lorem, tempor sed orci ut, volutpat sodales augue.
                                        In egestas, tellus ac vestibulum pharetra, erat lectus facilisis
                                        ligula, eu sollicitudin felis leo sed nibh.                                    </p>
                                </text>);
                        })
                    )
                </text>)
                .ContentHtmlAttributes(new { style = "min-height: 200px" });
            tabstrip.Add()
                .Text("Email")
                .Content(@<text>
                    <p>
                        <span class="label">Support:</span>
                        <span><a href="mailto:Support@example.com">Support@example.com</a></span>
                    </p>
                    <p>
                        <span class="label">Marketing:</span>
                        <span><a href="mailto:Marketing@example.com">Marketing@example.com</a></span>
                    </p>
                    <p>
                        <span class="label">General:</span>
                        <span><a href="mailto:General@example.com">General@example.com</a></span>
                    </p>
                </text>)
                .ContentHtmlAttributes(new { style = "min-height: 200px" });
            tabstrip.Add()
                .Text("Address")
                .Content(@<text>
                    <p>
                        One Microsoft Way<br />
                        Redmond, WA 98052-6399
                    </p>
                </text>)
                .ContentHtmlAttributes(new { style = "min-height: 200px" });
        })
)

Peter
Top achievements
Rank 1
 answered on 19 Dec 2013
2 answers
577 views
I'm trying to set a numeric textbox without decimals formatted for currency.
@(Html.Kendo().NumericTextBoxFor(model => model.EstimatedRevenue).Format("C").Spinners(false).Decimals(0))
I want the value to be displayed in whole dollars, is this possible?
Jonathan Travis
Top achievements
Rank 1
 answered on 19 Dec 2013
1 answer
304 views
Hey Sup

Iam playing around with the scheduler from Kendo UI - and the scheduler is working fine atm. 
but but.. Iam trying to use some from the API demo at. 
API Demo

I have a html 'tool bar' as 
<div class="schedulerHeader">
    <p>
        <label>Current Date:</label><input id="currentDate" />
    </p>
    <p>
        <label>Current View:</label>
        <select id="views">
            <option value="agenda">Agenda</option>
            <option value="day">Day</option>
            <option value="month">Month</option>
            <option value="week">Week</option>
            <option value="workWeek">Work Week</option>
        </select>
    </p>
</div>

and javascript:
<script type="text/javascript">
    $(function () {
        var scheduler = $("#myScheduler").data("kendoScheduler");

        $("#currentDate").kendoDatePicker({
            value: new Date("2013/12/24"),
            change: function () {
                scheduler.date(this.value());
            }
        });


        $("#views").kendoDropDownList({
            value: scheduler.view(),
            change: function () {
                scheduler.view(this.value());
            }
        });

    });
</script>
all on in the same view as my scheduler, where I can change the view and date from the 'toolbar' hurra. 
but on site load the $("x").kendoDropDownList({ value: scheduler.view()...  is not set. I think it because that the scheduler wrapper isnt done loading. so the schedulder object in my js is 'null' when it load.
How should I handle this ? or how are you doing it in your demo, I am looking at the example project, but cant see a clear answer.

yeah I can use a timer... but no thanks :) 

- Kasper 
Atanas Korchev
Telerik team
 answered on 19 Dec 2013
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
DateTimePicker
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
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?