Hi,

I'm new to Kendo UI and want to implement drag a record from a Kendo Grid and drop to another JQuery controller (http://tux.fi/~jarnok/fullcalendar-resourceviews/). I've managed to implement drag a row using kendo graggable event, but it is not working for the other controller.It support for JQuery UI drop event. How to implement drag a row in a kendo grid using jquery ui drag?

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 :

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?

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!!!

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 

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

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

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:

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.

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!