Telerik Forums
UI for ASP.NET MVC Forum
1 answer
175 views

Hi I´m using the Kendo.Mvc.dll version 2014.1.318.440, I have some problems adding the action of Export to Excel on my grid, 

Does not recognize the tools.Excel(), it is possible to use this statement with this Kendo version, or am I missing a reference for example a js file needed to bound??

 

Here's the code of the grid. 

  @(Html.Kendo().Grid<Project.Models.GridModel>()
                    .Name("Grid")
                    .Scrollable()
                    .EnableCustomBinding(true)
                    .HtmlAttributes(new { style = "height:auto;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model =>
                        {
                            model.Id(x => x.NumOP);
                        })
                        .ServerOperation(false)
                        .PageSize(20)
                        .Read(read => read.Action("LoadGrid", "GridController"))
                        )

                    .Columns(columns =>
                    {
                        columns.Bound(p => p.Name).Title("Name").Width(80);
                        columns.Bound(p => p.Description).Title("Description").Width(200);
                        columns.Bound(p => p.Amount).Title("Amount").Format("{0:0,0.0}").Width(100);

                    })
                    .ToolBar(tools => tools.Excel())
                    .Excel(excel => excel
                        .FileName("ExcelFile.xlsx")
                        .ProxyURL(@UrlAction("Excel_Export_Save", "CreditosActivos"))
                        )
                    )

 

Thanks for help

 

Milena
Telerik team
 answered on 05 May 2016
1 answer
164 views

I have a categories dropdown list in the grid that i am populating very similar to the 'Editing custom editor' example. I populate the default categories in the index() method of my controller, just like the example shows and it works fine. When a 'organization dropdownlist' is chosen, I want to repopulate the categories based on what organization was chosen, but when I try to 'Add new record' in the grid, the old categories remain bound to the grid and it doesn't save properly.

 

I have in my grid something similar to this defined for the default value:

model.Field(p => p.Category).DefaultValue(ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);

Every time a new organization dropdown item is chosen, and a read operation occurs, how would I update or rebind the model to reflect the new defaultCategory?

 

Thanks in advance,

Dave

Pavlina
Telerik team
 answered on 04 May 2016
0 answers
113 views

The official 2016 Q2 Release (2016.2.504) release will export Excel files with grid lines disabled.

The change is not intentional and will be reverted in the following hotfix and service pack releases.

As a workaround you can turn on the grid lines explicitly in the ExcelExport event:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()   
    .Name("grid")   
...
    .Events(e => e.ExcelExport(
        @<text>
        function(e) {
            e.workbook.sheets[0].showGridLines = true;
        }
        </text>
        )
    )
)

Apologies for the caused inconvenience.

Kendo UI
Top achievements
Rank 1
 asked on 04 May 2016
2 answers
209 views

Hello, 

I have a column in my Grid with a custom filter which has pre-populated values in a dropdown. When user opens the page I want the default value to be set to a value that I pass from the Controller in ViewData. I'm able to set the grid filtered to a value on page load but the dropdown in the filter does not have the value selected.

Grid has the below column

 columns.Bound(c => c.DealYear).Filterable(filterable => filterable.UI("yearFilter")).Width(70);

with the below options set

.Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
           .ForString(str => str.Clear()
               .StartsWith("Starts with")
               .IsEqualTo("Is equal to")
               .IsNotEqualTo("Is not equal to")
           ))
        )

 

And on page load I filter the grid with a value passed from Controller  - This works fine.

  .Filter(f =>f.Add(p => p.DealYear).Equals(ViewData["DealYear"]))

 

But in my javascript, how do I set the value to the Filter Dropdown?

function yearFilter(element) {
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: "@Url.Action("FilterMenuCustomization_DealYear")"
            }
        },
            optionLabel: "--Select Year--"
        });
    }

 

The page loads with a predefined filter but the dropdown in the Filter shows 'Select Year'.

 

Thanks!

RICHARD
Top achievements
Rank 1
 answered on 04 May 2016
1 answer
194 views

I'm trying to combine the SignalR live updates example with the Hierarchical grid example.

I want both grids to update via SignalR when there's a change. The Customers grid works great.

Trouble is, I can't even read the  order data when I switch the Order grid to SignalR. The Read method on the child (order) grid is never called.

I wish there were more documentation on the Transport, Promise, and Hub properties.

Any suggestions?

 

@{
    ViewBag.Title = "Home Page";
}
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@*<link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
 
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
 
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
 
<script src="@Url.Content("~/signalr/hubs")"></script>
<div id="modalWindow">
    <h2>Delete?</h2>
    <button id="yes" class="k-button">Yes</button>
    <button id="no" class="k-button">No</button>
</div>
<script>
 //   var hub = $.connection.customerHub;
    var customerHub = $.connection.customerHub;
    var orderHub = $.connection.orderHub;
    var hubStart = $.connection.hub.start();
</script>
@(Html.Kendo().Notification()
      .Name("notification")
      .Width("100%")
      .Position(position => position.Top(0).Left(0))
)
@(Html.Kendo().Grid<TelerikMvcCRUDGrid.Models.CustomerViewModel>()
    .Name("Customers")
    .Filterable()
    .Columns(columns =>
    {
        columns.Bound(c => c.CustomerId).Visible(false);
        columns.Bound(c => c.LastName)
                     .ClientTemplate("#:LastName#, #:FirstName#" + "#:MiddleInitial#")
                     .Title("Full Name");
        columns.Bound(c => c.AccountNumber);
        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        })
            .Title("Actions")
            .HeaderHtmlAttributes(new { style = "font-weight:600;" });
    })
    .ToolBar(toolbar => toolbar.Create().Text("Add new Customer"))
    .ToolBar(toolbar => toolbar.Excel().Text("Export to Excel"))
    .ToolBar(toolbar => toolbar.Pdf().Text("Export to PDF"))
    .Editable(editable => editable.Mode(GridEditMode.PopUp)
                        .DisplayDeleteConfirmation(false))
    .Events(events => events.DetailExpand("onExpandCustomer"))
    // .Events(e => e.DataBound("onRowBound"))
    .Pageable(pageable => pageable
                        .Refresh(true)
                        .PageSizes(true)
                        .ButtonCount(5))
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .ClientDetailTemplateId("Orders")
 
       .DataSource(dataSource => dataSource
        .SignalR()
        //    .AutoSync(true) // Automatically save changed data items by calling the sync method
        @*.Events(events => events.Push(@<text>
                function(e) {
                var notification = $("#notification").data("kendoNotification");
                notification.success(e.type);
                }
            </text>))*@
        .PageSize(10)
        // Transport is the configuration used to load and save the data items
        .Transport(tr => tr
 
            .Promise("hubStart") // The promise returned by the start method of the SignalR connection. The promise option is mandatory.
            .Hub("customerHub")
            .Client(c => c //transport.signalr.client  Specifies the client-side CRUD methods of the SignalR hub.
                .Read("read") //Specifies the name of the client-side method of the SignalR hub responsible for reading data items.
                .Create("create") //Specifies the name of the client-side method of the SignalR hub responsible for creating data items.
                .Update("update") //Specifies the name of the client-side method of the SignalR hub responsible for updating data items.
                .Destroy("destroy")) //Specifies the name of the client-side method of the SignalR hub responsible for destroying data items.
            .Server(s => s
                .Read("read") //Specifies the name of the server-side method of the SignalR hub responsible for reading data items.
                .Create("create") // Specifies the name of the server-side method of the SignalR hub responsible for creating data items.
                .Update("update") //Specifies the name of the server-side method of the SignalR hub responsible for updating data items.
                .Destroy("destroy") //Specifies the name of the server-side method of the SignalR hub responsible for destroying data items.
                )
         )
        .Schema(schema => schema
            .Model(model =>
            {
                model.Id(m => m.CustomerId);
                model.Field(m => m.CustomerId).Editable(false);
            })
        )
    )
)
 
 
<script id="Orders" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<TelerikMvcCRUDGrid.Models.OrderViewModel>()
 
                        .Name("grid_#=CustomerId#") // template expression, to be evaluated in the master context
                        .Filterable()
                        .ToolBar(toolbar => toolbar.Create().Text("Add new Order"))
                        .ToolBar(toolbar => toolbar.Excel().Text("Export to Excel"))
                        .ToolBar(toolbar => toolbar.Pdf().Text("Export to PDF"))
                        .Editable(editable => editable.Mode(GridEditMode.PopUp))
                        .HtmlAttributes(new { style = "height:100%;width:100%" })
                        .Events(e => e.DataBound("onRowBound"))
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.OrderId).Visible(false);
                            columns.Bound(o => o.OrderTotal).Width(115);
                            columns.Bound(o => o.OrderSubtotal).Width(120);
                            columns.Bound(o => o.OrderTax).Width(80);
                            columns.Bound(o => o.DatePlaced).Width(115);
                            columns.Bound(o => o.DateShipped).Width(110);
                            columns.ForeignKey(f => f.OrderChannelId, (System.Collections.IEnumerable)
                                        ViewData["orderchannels"], "Value", "Text").Title("Channel");
                            columns.Command(command =>
                            {
                                command.Edit();
                                command.Custom("Delete").Click("openWindow");
                            }).Title("Order Actions").HeaderHtmlAttributes(new { style = "font-weight:600;" });
                        })
 
              .DataSource(dataSource => dataSource
                .SignalR()
                //    .AutoSync(true) // Automatically save changed data items by calling the sync method
                .PageSize(10)
 
                 // Transport is the configuration used to load and save the data items
                .Transport(tr => tr
 
                    .Promise("hubStart") // The promise returned by the start method of the SignalR connection. The promise option is mandatory.
                    .Hub("orderHub")
                    .Client(c => c //transport.signalr.client  Specifies the client-side CRUD methods of the SignalR hub.
                        .Read("read") //Specifies the name of the client-side method of the SignalR hub responsible for reading data items.
                        .Create("create") //Specifies the name of the client-side method of the SignalR hub responsible for creating data items.
                        .Update("update") //Specifies the name of the client-side method of the SignalR hub responsible for updating data items.
                        .Destroy("destroy")) //Specifies the name of the client-side method of the SignalR hub responsible for destroying data items.
                    .Server(s => s
                        .Read("read") //Specifies the name of the server-side method of the SignalR hub responsible for reading data items.
                        .Create("create") // Specifies the name of the server-side method of the SignalR hub responsible for creating data items.
                        .Update("update") //Specifies the name of the server-side method of the SignalR hub responsible for updating data items.
                        .Destroy("destroy") //Specifies the name of the server-side method of the SignalR hub responsible for destroying data items.
                        )
                 )
                .Schema(schema => schema
                    .Model(model =>
                    {
                        model.Id(o => o.OrderId);
                        model.Field(o => o.OrderId).Editable(false);
                    })
 
 
        )
        ).ToClientTemplate());
 
</script>
 
<script>
    var wnd;
    $(document).ready(function () {
        wnd = $("#modalWindow").kendoWindow({
            title: "Delete confirmation",
            modal: true,
            visible: false,
            resizable: false,
            width: 300
        }).data("kendoWindow");
    });
 
    function openWindow(e) {
        e.preventDefault();
        var grid = this;
        var row = $(e.currentTarget).closest("tr");
        wnd.center().open();
        $("#yes").click(function () {
            grid.removeRow(row);
            wnd.close();
        });
        $("#no").click(function () {
            wnd.close();
        });
    }
 
    function onRowBound(e) {
        $(".k-grid-Delete").find("span").addClass("k-icon k-delete");
    }
 
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
 
    function onExpandCustomer() {
        $(".k-detail-cell").css({
            "padding": "10px",
            "background-color": "#f35800"
        });
    }
</script>
 
<script id="delete-confirmation" type="text/x-kendo-template">
    <p class="delete-message">Are you sure?</p>
    <button class="delete-confirm k-button">Yes</button>
    <a href="#" class="delete-cancel">No</a>
</script>
 
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>
<script>
    function onExpandProduct() {
        $(".k-detail-cell").css({
            "padding": "10px",
            "background-color": "white"
        });
    }
</script>
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

Maria Ilieva
Telerik team
 answered on 04 May 2016
3 answers
199 views

Hi,

We have different cultures setup based on the user login.

We found an issue with grid sort, it seems sorting correctly with US culture, but it fails with UK or custom cultures.

thanks!

 

 

Pavlina
Telerik team
 answered on 04 May 2016
2 answers
92 views

I have a grid that includes the Export to Excel functionality.

I retrieve the grid options via getOptions() and store them to local storage so that I may later restore those settings by using setOptions().  The  Export to Excel button is not being displayed after I call setOptions() so I'm assuming this is something I need to manually add to the configuration.  However, I'm having a hard time coming up with the syntax.  How do I do this?

The relevant configuration of the grid looks like this:

.ToolBar(tools => tools.Excel())
.Excel(excel => excel
    .AllPages(true)
    .FileName("Applications.xlsx")
    .Filterable(true)
    .ProxyURL(Url.Action("Excel_Export_Save", "Application"))
)

 

Code to populate the grid options looks like this:

var options = JSON.parse(gridOptions);
 
// Now that I have the options how do I add the Excel settings I defined on the
// grid above before calling setOptions()?
 
grid.setOptions(options);

PJ Melies
Top achievements
Rank 1
 answered on 03 May 2016
5 answers
167 views

I have a Menu that has 9 root level items and many children items under each of them.

I have added tooltips to the items, but I do not want tooltips for the root items to show up at all.

I am loading the text using the ContentHandler and I have tried setting the text for the root items to "" and also to null. I have tried just leaving them out of the JavaScript that I use to set the text.

No matter what I have tried, I get an empty tooltip box showing next to the root item when I first hover over it.

TIA,
Bob Mathis

Bob
Top achievements
Rank 2
 answered on 03 May 2016
2 answers
312 views

Hello, I'm getting very strange behavior on my action buttons on a Kendo Window. I'm currently on UI for ASP.NET MVC 2015.2.805, should I upgrade? ( i see UI for ASP.NET MVC Q1 2016 SP1 has Minimize / maximize events listed, any benefit?)

My setup is, a main view which loads a window, which contents are a kendo scheduler.  Here is the razor declaration for the window.

@(Html.Kendo().Window()
    .Name("shedulerWindow")            
   
.Title("Scheduler Window")      
    .Content(@<text>@Html.Action("_EvaultBackupSchedulerPopOut", "Dashboard")</text>)
    .Draggable()     
    .Resizable()    
    .Width(1285)      
    .Height(545)    
    .Position(settings => settings
           .Top(178)
           .Left(495)
           )
     .Actions(actions => actions              
                   .Minimize()                                 
                   .Custom("Maximize")                                 
                   .Custom("close")               
                    )
     .Events(ev => ev                                 
     .Close("onClose")
     )          
)

 

You'll notice i've started over-writing all of the real close and maximize actions with custom ones, simply because they don't work correctly out of the box; ie.Close never consistently fired my onClose method (50% or less). Maximize and restore were not working correctly and still not.

Now what's happening, when I maximize, I get two restore buttons show up which do not actually work correctly either.
Look at my 'restore code' image of how the HTML renders out.
Look at the restore icons to see what shows up.

 

 

Konstantin Dikov
Telerik team
 answered on 03 May 2016
4 answers
1.6K+ views
Hello,

I am using an inCell editable grid and I want to use a textarea in one column.

The column looks like this:
columns.Bound(p => p.Reason).Title("Reason")
.ClientTemplate("<textarea rows='2' style='text-overflow:ellipsis; display:block; width:99%; height:100%; font-family:Arial; font-size:12px;' readonly='readonly'>#= Reason #</textarea>");


And the Editor-Template like this:
@model string
 
@Html.TextAreaFor(m => m, new { rows = 2, cols = 35, wrap = "hard",  @readonly = true, style = "text-overflow:ellipsis; display:block; width:99%; height:100%; font-family:Arial; font-size:12px;" })


My problem is, that I have to click outside the textarea of my ClientTemplate (but still inside the cell) to get the cell switched into the edit-mode. Is there any possibility to get the edit-mode by clicking anywhere in the cell... also if I click on the readonly-textarea which is defined in the ClientTemplate?

If i don't use a ClientTemplate, the text which gets inserted, especially the returns won't be shown and the whole text is in one line.

Does anyone have a solution for that?
Konstantin Dikov
Telerik team
 answered on 02 May 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?