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

I have some trouble to apply a theme for the schelduler.
I want to apply the "Moonlight" theme  for the "Schelduler selection" that can be currently selected in the Kendo webpage Demos.
I choose the theme but the code of the Kendo UI web page doesn't change.

Cf : http://demos.telerik.com/kendo-ui/web/scheduler/selection.html

I use Kendo UI 2013.3.1511 and Razor engine.

Here is my code :
@(Html.Kendo().Scheduler<iMail.Web.Models.TaskViewModel>()
                    .Name("scheduler")
                    .Date(DateTime.Now)
                    .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
                    .Height(600)
                    .Views(views =>
                    {
                        views.DayView();
                        views.WeekView();
                        views.MonthView();
                        views.AgendaView(agenda => agenda.Selected(true));
                    })
                    .Selectable(true)
                    .Timezone("Etc/UTC")
                    .Editable(editable => {
                        editable.TemplateName("_EditorTemplatePartial");
                    })
                    .DataSource(d => d
                            .Model(m => {
                                  
                                m.Id(f => f.TaskID);
                                m.Field(f => f.Title).DefaultValue("No title");
                                m.RecurrenceId(f => f.RecurrenceID);
                            })
                        .Events(e => e.Error("error_handler"))
                        .Read("TasksRead", "Dashboard")
                        .Create("Tasks_Create", "Dashboard")
                        .Destroy("Tasks_Destroy", "Dashboard")
                        .Update("Tasks_Update", "Dashboard")
                    )
                )


Shimon
Top achievements
Rank 2
 answered on 17 Mar 2014
3 answers
167 views
I've got my menu setup with controller actions attached.  Based on system permissions only the menu items the logged in user has access to will show up on the menu.  This works fine. 

A couple of the roles though have access to everything and when the menu shows all of the possible items, the menu wraps to 3 lines since it is wider than the width of my layout.  What I need is a way to auto-collapse the menu items at the end of the menu (down to one nested menu item) in the cases where it would wrap past 1 line.  Is there any way to do this?
Stephen
Top achievements
Rank 1
 answered on 17 Mar 2014
1 answer
211 views
Ok, I've hunted around for a solution to this for hours now, but to no avail...

I have a page that uses the Kendo splitter.  In the left pane is a kendo tree view and in the right, a kendo grid.  I am using the toolbar "Save" option, which adds a nice Save/Cancel button to the already existing 'Add new record' button.

I have no trouble updating the grid whenever a new node is selected on the tree view.  What I do need to know is how to do is update the tree view whenever an
existing row is updated or a new row is added to the grid. If it makes any difference, I am using .cshtml pages and not aspx.

ANY help will be GREATLY appreciated!!!

Barry Burton
Top achievements
Rank 1
 answered on 16 Mar 2014
2 answers
538 views
Hello,
I have a DropDownList control in the Edit template of a ListView control and it is passing values to my controller instance correctly if the user selects a value from the DropDownList and then presses the "k-update-button".

Also , I have code that dynamically changes the value of the DropDownList control if the value of another DropDownList control is changed. I am using this statement to change the DropDownList control value:

$("#ValidationType").data("kendoDropDownList").value("Flat");

The above line works correctly and the UI successfully displays the correct DropDownList option on the screen. However, when pressing the "k-update-button", the dynamically selected value is not passed back to the controller during MVC binding. It is a null value.

Again, my the value binding works if the user selects a value, but it does not work if I dynamically select a value using JavaScript/jQuery. 

Just wanted to see if this is a known issue and/or if there is a work-around. 

I have also tried getting the template data via the "Data" method in conjunction with the DataScource Create event but I ran into the same problem here as well. My ListView is defined as:

             @(Html.Kendo().ListView<AdjustmentsListViewModel>()
                                .Name("LineItemsAdjustmentsListView")
                                .TagName("div")
                                .ClientTemplateId("adjustments-template")                                                                   
                                .AutoBind(false)                                
                                .Editable()
                                .Events(events => events
                                    .Remove("LineItemsAdjustmentsListViewRemove")
                                    .DataBound("LineItemsAdjustmentsListViewDataBound")
                                    .Edit("LineItemsAdjustmentsListViewEdit")
                                )
                                .DataSource(dataSource => dataSource                                   
                                    .Model(model =>
                                        {
                                            model.Id(a => a.Id);
                                            model.Field(f => f.AdjustmentId);
                                            model.Field(f => f.AdjustmentType);
                                            model.Field(f => f.Description);
                                            model.Field(f => f.ValidationType);
                                            model.Field(f => f.IncreaseDecrease);
                                            model.Field(f => f.Percent);
                                            model.Field(f => f.Amount);
                                        })
                                    .Create(create => create.Action("CreateAdjustmentForLineItem", "Intake").Data("GetLineItemKeys"))
                                    .Read(read => read.Action("GetAdjustmentsForLineItem", "Intake").Data("GetLineItemKeys"))
                                    .Update(update => update.Action("UpdateAdjustmentForLineItem", "Intake").Data("GetLineItemKeys"))
                                    //Destroy(Delete) handled by Remove event above
                                    .Events(events => events
                                        .Error("LineItemsAdjustmentsListViewError")
                                        .RequestEnd("LineItemsAdjustmentsListViewRequestEnd")                                                                                
                                    )
                                )                                                        
                            )                            
                            @Html.ValidationMessageFor(model => model.LineItems.LineItemsDetail.Adjustments)

My Edit Template appears as: 

@model InvSubModule.WebApp.Areas.Submission.Models.LineItems.AdjustmentsListViewModel

@using System.Globalization;
@using System.Web.Mvc.Html
@using Kendo.Mvc.UI
@using InvSubModule.Infrastructure.Localization

<div class="lineItemsAdjustmentView k-widget">
    <div class="lineItemsAdjustmentButtons">
        <div><a class="k-button k-button-icontext k-update-button" href="\\#"><span title='@ResourceManager.GetString("Save")' class="k-icon k-update"></span></a></div>
        <div><a class="k-button k-button-icontext k-cancel-button" href="\\#"><span title='@ResourceManager.GetString("Cancel")' class="k-icon k-cancel"></span></a></div>
    </div>                                
    <dl>
        <dt><label class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_AdjustmentType")</label></dt> 
        <dd>
            @(Html.Kendo().DropDownListFor(model => model.AdjustmentType)
                    .Name("AdjustmentType")                                        
                    .OptionLabel(" ")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new SelectList(Model.AdjustmentTypes, "AdjustmentType", "AdjustmentTypeAnswer"))    
                    .Events(e =>
                    {
                        e.Change("AdjustmentTypeChange");
                    })                  
            )
            @Html.ValidationMessageFor(model => model.AdjustmentType)
        </dd>
        <dt><label class="displayLabel">@ResourceManager.GetString("LineItems_Adjustments_Description")</label></dt>
        <dd>
            @Html.TextBoxFor(model => model.Description, "", new { @id = "Description", @class = "k-input k-textbox k-state-disabled", @disabled="disabled" })
            @Html.ValidationMessageFor(model => model.Description)
        </dd>
        <dt><label class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_ValidationType")</label></dt>  
        <dd>
            @(Html.Kendo().DropDownListFor(model => model.ValidationType)
                    .Name("ValidationType")                                        
                    .OptionLabel(" ")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new SelectList(Model.ValidationTypes, "ValidationType", "ValidationTypeAnswer"))
                    .Events(e =>
                    {
                        e.Change("ValidationTypeChange");
                    })                      
            )                                
            @Html.ValidationMessageFor(model => model.ValidationType)
        </dd>
        <dt><label class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_IncreaseDecrease")</label></dt>  
        <dd>
            @Html.RadioButtonFor(model => model.IncreaseDecrease, "Increase")
            @ResourceManager.GetString("LineItems_IncreaseDecrease_Increase")
            @Html.RadioButtonFor(model => model.IncreaseDecrease, "Decrease")                        
            @ResourceManager.GetString("LineItems_IncreaseDecrease_Decrease")
            @Html.ValidationMessageFor(model => model.IncreaseDecrease)
        </dd>
        <dt>
            <label id="lblAmount" class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_Amount")</label>
            <label id="lblPercent" class="displayLabel" style="display:none;">*@ResourceManager.GetString("LineItems_Adjustments_Percent")</label>
        </dt> 
        <dd>
            @(Html.Kendo().NumericTextBoxFor<decimal>(model => model.Amount)
                        .Name("Amount")
                        .Format("c")
                        .Decimals(4)
                        .Spinners(false)
                        .Min(-9999999.0000m)
                        .Max(9999999.0000m)
                        .Culture(CultureInfo.CurrentCulture.ToString()) 
            )
            @Html.ValidationMessageFor(model => model.Amount)
            @(Html.Kendo().NumericTextBoxFor<decimal>(model => model.Percent)
                        .Name("Percent")                        
                        .Spinners(true)
                        .Decimals(2)
                        .Min(-100.00m)
                        .Max(100.00m)
                        .Step(0.01m)                        
                        .Culture(CultureInfo.CurrentCulture.ToString())
            )
            @Html.ValidationMessageFor(model => model.Percent)
        </dd>
    </dl>    
</div>        

Thanks for your time,
Scott 


















Scott
Top achievements
Rank 1
 answered on 14 Mar 2014
1 answer
435 views
Hi,

does kendoui widgets support url rewrite?

I have a situation where we have our web site published (firewall) as a "subfolder" of root like this:

http://server.domain/xxxx/Home/Dummy2?Length=7

but the site is actually in the root off IIS. 

I configured url rewrite like this:

<rule name="Kendo" enabled="true" stopProcessing="false">
                    <match filterByTags="A, Area, Base, Form, Frame, Head, IFrame, Img, Input, Link, Script" pattern="([^:]+://)([^:/]+(:[0-9]+)?/)([^:/].*)" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="true" />
                    <action type="Rewrite" value="{R:1}{R:2}xxxx/{R:4}" />
                </rule>

For links, script links etc. it is working fine but for kendogrid

@(Html.Kendo()
      .Grid("xGrid")
.....
.Read(read => read.Action("Dummy2", "Home", "Catalog"))
...

I can`t get it working. It is always rendering http://server/Home/Dummy2?Length=7 instead http://server/xxxx/Home/Dummy2?Length=7.

Any suggestions?
Thx

















Petur Subev
Telerik team
 answered on 14 Mar 2014
2 answers
403 views
Hello,

I have a multiselect and all i want is to get the value(s) from the datatextfield  instead of the datavaluefield value.
                        @(Html.Kendo().MultiSelect()
                              .Name("PrimaryArea")
                              .Placeholder("Välj primäromrÃ¥de")
                              .DataTextField("Name")
                              .DataValueField("SpatialId")
                              .DataSource(ds => ds.Read("GetAllPrimaryArea", "Report"))
                              .HtmlAttributes(new { @style = "width:200px;" }))


Thanks in advance
Mattias Hermansson
Top achievements
Rank 1
 answered on 14 Mar 2014
2 answers
661 views
Hi guys,

I'm trying to use the bootstrap popover as a tooltip with a kendo grid that has ajax binding. I've put the markup into the ClientTemplate for specific colums and when viewing the source the markup is there. The markup is also valid and if I have static content on the page the popover works, I just can't get it to work on a column in the grid. Not sure if the .popover script isn't finding the columns or something.

Here's my markup:

@using Kendo.Mvc.UI
 
@(Html.Kendo().Grid<OffNormalListing>()
            .Name("grid")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("RefreshTable", "OffNormals"))
                .Sort(sort => sort.Add(x => x.StartTime).Descending())
            )
            .Columns(columns =>
            {
                columns.Bound(x => x.Device).ClientTemplate(
                    "<span class='tooltip-column' data-toggle='tooltip' title='Device Id' data-content='#= Id#'>#= Device#</span>");
                columns.Bound(x => x.Phase);
                columns.Bound(x => x.CurrentStatus);
                columns.Bound(x => x.DeviceType);
                columns.Bound(x => x.Start);
                columns.Bound(x => x.DescriptionDisplay);
                columns.Bound(x => x.OriginalFeeder);
                columns.Bound(x => x.Operator);
                columns.Bound(x => x.ServicePoint);
                columns.Bound(x => x.AbbreviateRegion);
            })
            .Pageable()
            .Sortable()
        )
 
@section scripts
{
    <script>
        function updateTable() {
            var grid = $('#grid').data('kendoGrid');
            if (grid != undefined) {
                grid.dataSource.read();
            }
            $(".tooltip-column").popover({
                trigger: "hover",
                placement: "auto top"
            });
        }
 
        $(document).ready(function () {
            updateTable();
        });
 
        $(window).resize(function () {
            updateTable();
        });
         
    </script>
}

Bil
Top achievements
Rank 1
 answered on 13 Mar 2014
3 answers
310 views
Hi,
Below is my code,

 var _fltMain = { logic: "or", filters: [] };
 var _fltRegion = { logic: "or", filters: [] };
 _fltRegion.filters.push({ field: "Region", operator: "contains", value: searchText });
  var _fltOAMOrders = { logic: "or", filters: [] };
 _fltOAMOrders.filters.push({ field: "OAMOrders", operator: "contains", value: searchText });
 
_fltMain.filters.push(_fltRegion);
 _fltMain.filters.push(_fltOAMOrders);

 $("#reportGrid").data("kendoGrid").dataSource.query({ filter: _fltMain });

This Code works fine for first filter but not working for fltOAMOrders this filter.
It gives error
Microsoft JScript runtime error: Object doesn't support this property or method
((d.OAMOrders || '').toLowerCase().indexOf('56') >= 0)
because it is of type decimal.

Please help.

Thanks,
Sunny.

Nikolay Rusev
Telerik team
 answered on 13 Mar 2014
2 answers
509 views
Hi guys,

I'm swapping out our old layout with the Kendo grid. The old system was just using a @foreach on my model but the new one uses the ajax binding. I'm also refreshing the grid every 20 seconds or so as the displays are used in a control room to monitor the items on the list.

It's going back to the server for the refresh but the spinner is showing and there's a brief flicker when it updates. Is there some way to make it more seamless? In the old system there was no flicker so this might be a problem for the users with the new grid.

Here's my (partial) markup and javascript I'm using:

@using Kendo.Mvc.UI

<ul class="nav nav-pills" id="includeOptions">
    <li class="active"><a href="#" onclick="updateTable();" data-toggle="tab" data-option="0">All</a></li>
    <li><a href="#" onclick="updateTable();" data-toggle="tab" data-option="1">Confirmed Only</a></li>
    <li><a href="#" onclick="updateTable();" data-toggle="tab" data-option="2">Predicted/RMX Only</a></li>
</ul>

@(Html.Kendo().Grid<OutageListing>()
            .Name("grid")
            .HtmlAttributes(new { display = "none"})
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("RefreshTable", "Outages").Data("createRefreshPostData"))
                .Sort(sort => sort.Add(x => x.StartDate).Descending())
            )
            .Columns(columns =>
            {
                columns.Bound(x => x.OrderNumber);
                columns.Bound(x => x.Device);
                columns.Bound(x => x.Phase);
                columns.Bound(x => x.CustomerCount);
                columns.Bound(x => x.OutageTypeDisplay);
                columns.Bound(x => x.DeviceType);
                columns.Bound(x => x.LocationDisplay);
                columns.Bound(x => x.StartDateDisplay);
                columns.Bound(x => x.EtrDisplay);
                columns.Bound(x => x.CauseCode);
                columns.Bound(x => x.FeederNumber);
                columns.Bound(x => x.ServicePoint);
                columns.Bound(x => x.AbbreviateRegion);
            })
            .Pageable()
            .Sortable()
        )

@section scripts
{
    <script>

        function createRefreshPostData() {
            return {
                IncludeOption: getIncludeOption()
            };
        }

        function getIncludeOption() {
            return $('li.active > a').data('option');
        }

        function updateTable() {
            var grid = $('#grid').data('kendoGrid');
            if (grid != undefined) {
                var container = $(window);
                var heightAdjustment = 300;
                var containerHeight = container.height();
                containerHeight -= heightAdjustment;
                var rowHeight = 32;
                var newPageSize = Math.round(containerHeight / rowHeight);
                var currentPage = grid.dataSource.page();
                var currentPageSize = grid.dataSource.pageSize();

                if (currentPageSize != newPageSize) {
                    grid.dataSource.pageSize(newPageSize);
                }

                if (currentPage != 1) {
                    grid.dataSource.page(currentPage);
                }
                
                grid.dataSource.read();
            }
        }

        $(document).ready(function() {
            updateTable();
            setInterval(updateTable, "@ApplicationSettings.ListingPageRefreshRate");
        });

        $(window).resize(function() {
            updateTable();
        });

    </script>
}

Thanks!
Dimo
Telerik team
 answered on 13 Mar 2014
1 answer
123 views
Hi,
I have a problem when a data type DateTime is shown, the grid is automatically substracting six hours of the DateTime data.
I use kendo.culture="es-EC" to avoid that, but still happening.

In the localhost works fine.

The system is host in Spain and the database too. The reports the grid export have the correct data, the problem seems only appear in the grid column. 

Here's my code:

<script src="@Url.Content("~/Scripts/kendo/2013.3.1324/cultures/kendo.culture.es-EC.min.js")"></script>
 
    <script>
        kendo.culture("es-EC");
</script>

My View:

@(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
 
            columns.Bound(p => p.ID_SOLICITUDSERVICIO).Visible(false);
            columns.Bound(p => p.ID_PARTESERVICIO).Visible(false);
            columns.Bound(p => p.NOMBRE_EMPRESA).Title("Cliente");
            columns.Command(command => command.Custom("custom").Text("").Click("MostrarSolicitud")).Title("N°solicitud").Width(75);
            columns.Bound(p => p.SOLICITUD_CLIENTE).Title("ODT");
            columns.Bound(p => p.NOMBRE_ESTADOSOLICITUD).Title("Estado");
            columns.Bound(p => p.FECHA_INICIO).Format("{0: yyyy-MM-dd}").Title("Fecha inicio");
            columns.Bound(p => p.FECHA_FIN).Format("{0: yyyy-MM-dd}").Title("Fecha fin");
            columns.Bound(p => p.HORA_INICIO).Format("{0: HH:mm}").Title("Hora inicio");
            columns.Bound(p => p.HORA_FIN).Format("{0: HH:mm}").Title("Hora fin");
            columns.Bound(p => p.NOMBRE_TIPOSERVICIO).Title("Tipo servicio");
            columns.Bound(p => p.NOMBRE_MARCA).Title("Marca");
            columns.Bound(p => p.NOMBRE_MODELO).Title("Modelo");
            columns.Bound(p => p.SERIE_INVENTARIO).Title("N°serie");
            columns.Bound(p => p.DOCUMENTOS_PROCESADOS).Title("Doc. procesados")
                .ClientFooterTemplate("# if (sum==null) { # Total: #= 0 # # } else { # Total: #=sum# # } #")
                .ClientGroupFooterTemplate("# if (sum==null) { # #= 0 # # } else { # #=sum# # } #");
            columns.Bound(p => p.NOMBRE_UBICACION).Title("Loc./Proc. Equipo");
            columns.Bound(p => p.TECNICO_RESPONSABLE).Title("Técnico responsable");
            columns.Bound(p => p.NUMERO_TECNICOS).Title("N°técnicos");
            columns.Bound(p => p.TOTAL_HORAS).Title("Total de horas")
                .ClientFooterTemplate("# if (sum==null) { # Total: #= 0 # h# } else { # Total: #=sum# h# } #")
                .ClientGroupFooterTemplate("# if (sum==null) { # #= 0 # h# } else { # #=sum# h# } #");
            columns.Bound(p => p.FACTURA_PARTESERVICIO).Title("N°factura");
        })
                       .Sortable()
                       .Pageable(m => m.PageSizes(new int[] { 10, 20, 50, 100 }))
                       .Groupable()
                       .Filterable()
                       .Events(e => e.DataBound("dataBound"))
                       .Scrollable(s => s.Height("auto"))
                       .TableHtmlAttributes(new { style = "table-layout: fixed;" })
                       .Resizable(r => r.Columns(true))
               .DataSource(dataSource => dataSource
                   .Ajax()
 
                                   .Aggregates(aggregates =>
                                   {
                                       aggregates.Add(m => m.DOCUMENTOS_PROCESADOS).Sum();
                                       aggregates.Add(m => m.TOTAL_HORAS).Sum();
                                   })
                           .Read(read => read.Action("LeerExt_MatrizServicios", "Consultas").Data("getParameter"))
               )

I attach some images that explain better the problem.

Regards
Daniel
Telerik team
 answered on 12 Mar 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
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Wizard
Security
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
+? more
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?