Telerik Forums
UI for ASP.NET MVC Forum
1 answer
176 views
I have created a dojo http://dojo.telerik.com/IkaQa with an example spreadsheet that is full size (no scrollbars) that is larger than the screen. If you scroll down to the bottom of the spreadsheet using the window (document) scroll and then select a cell (row 200) it will jump to the top of the window. This only happens in Firefox, IE and Edge, works correctly in chrome. I am currently using a spreadsheet in this fashion in a product. I have been able to add event listeners and override this issue in IE and Edge but for some reason the click event in firefox registers as a double click only. This is a big issue for me and I will open a ticket if need be, any help would be appreciated.
Veselin Tsvetanov
Telerik team
 answered on 30 Mar 2017
1 answer
931 views

Hi,

the Scenario goes as follows - user fills out a form and submits it. The data from the form is merged with a word document template. I want to show the user the completed document. 

here is code snippet  -> return new Result { CoverSheet = memoryStream.ToArray() };

I'm stuck on how to view the document here is my razorview:

I'm stuck on how to render the coversheet. I have tried TelerikReporting and am currently looking at @(Html.Kendo().Editor()...

I see examples for how to use Import to open a word document but now how to create a view with existing data. Any help with how to proceed would be appreciated.

 

 

Ianko
Telerik team
 answered on 30 Mar 2017
6 answers
225 views

Hi!

Is there a way to set the BaseUnit to Milliseconds.

I have to view a sine curve with max. 5Hz like this:

var oscillatorChartData = new kendo.data.ObservableArray(
        [{"T":"\/Date(1490195633551)\/","Val":0.48},{"T":"\/Date(1490195633571)\/","Val":1.45},{"T":"\/Date(1490195633591)\/","Val":2.34},{"T":"\/Date(1490195633611)\/","Val":3.07},{"T":"\/Date(1490195633631)\/","Val":3.61},{"T":"\/Date(1490195633651)\/","Val":3.93},{"T":"\/Date(1490195633671)\/","Val":3.99},{"T":"\/Date(1490195633691)\/","Val":3.81},{"T":"\/Date(1490195633711)\/","Val":3.39},{"T":"\/Date(1490195633731)\/","Val":2.75},{"T":"\/Date(1490195633751)\/","Val":1.94},{"T":"\/Date(1490195633771)\/","Val":1.01},{"T":"\/Date(1490195633791)\/","Val":0.02},{"T":"\/Date(1490195633811)\/","Val":-0.98},{"T":"\/Date(1490195633831)\/","Val":-1.91},{"T":"\/Date(1490195633851)\/","Val":-2.72},{"T":"\/Date(1490195633871)\/","Val":-3.37},{"T":"\/Date(1490195633891)\/","Val":-3.8},{"T":"\/Date(1490195633911)\/","Val":-3.99},{"T":"\/Date(1490195633931)\/","Val":-3.93},{"T":"\/Date(1490195633961)\/","Val":-3.63},{"T":"\/Date(1490195633971)\/","Val":-3.09},{"T":"\/Date(1490195633991)\/","Val":-2.36},{"T":"\/Date(1490195634011)\/","Val":-1.49},{"T":"\/Date(1490195634031)\/","Val":-0.52},{"T":"\/Date(1490195634051)\/","Val":0.48},{"T":"\/Date(1490195634071)\/","Val":1.46},{"T":"\/Date(1490195634091)\/","Val":2.34},{"T":"\/Date(1490195634111)\/","Val":3.07},{"T":"\/Date(1490195634131)\/","Val":3.61},{"T":"\/Date(1490195634151)\/","Val":3.93},{"T":"\/Date(1490195634171)\/","Val":3.99},{"T":"\/Date(1490195634191)\/","Val":3.81},{"T":"\/Date(1490195634211)\/","Val":3.39},{"T":"\/Date(1490195634241)\/","Val":2.75},{"T":"\/Date(1490195634251)\/","Val":1.94},{"T":"\/Date(1490195634271)\/","Val":1.01},{"T":"\/Date(1490195634291)\/","Val":0.01},{"T":"\/Date(1490195634311)\/","Val":-0.98},{"T":"\/Date(1490195634331)\/","Val":-1.91},{"T":"\/Date(1490195634361)\/","Val":-2.73},{"T":"\/Date(1490195634371)\/","Val":-3.37},{"T":"\/Date(1490195634401)\/","Val":-3.8},{"T":"\/Date(1490195634411)\/","Val":-3.99},{"T":"\/Date(1490195634431)\/","Val":-3.93},{"T":"\/Date(1490195634451)\/","Val":-3.63},{"T":"\/Date(1490195634471)\/","Val":-3.09},{"T":"\/Date(1490195634491)\/","Val":-2.36},{"T":"\/Date(1490195634511)\/","Val":-1.49},{"T":"\/Date(1490195634531)\/","Val":-0.52},{"T":"\/Date(1490195634551)\/","Val":0.49},{"T":"\/Date(1490195634571)\/","Val":1.46},{"T":"\/Date(1490195634601)\/","Val":2.34},{"T":"\/Date(1490195634611)\/","Val":3.07},{"T":"\/Date(1490195634631)\/","Val":3.62},{"T":"\/Date(1490195634651)\/","Val":3.93},{"T":"\/Date(1490195634681)\/","Val":3.99},{"T":"\/Date(1490195634691)\/","Val":3.81},{"T":"\/Date(1490195634711)\/","Val":3.38},{"T":"\/Date(1490195634731)\/","Val":2.75},{"T":"\/Date(1490195634751)\/","Val":1.94},{"T":"\/Date(1490195634771)\/","Val":1.01},{"T":"\/Date(1490195634791)\/","Val":0.01},{"T":"\/Date(1490195634811)\/","Val":-0.98},{"T":"\/Date(1490195634841)\/","Val":-1.92},{"T":"\/Date(1490195634851)\/","Val":-2.73},{"T":"\/Date(1490195634871)\/","Val":-3.37},{"T":"\/Date(1490195634891)\/","Val":-3.8},{"T":"\/Date(1490195634911)\/","Val":-3.99},{"T":"\/Date(1490195634941)\/","Val":-3.93},{"T":"\/Date(1490195634951)\/","Val":-3.62},{"T":"\/Date(1490195634981)\/","Val":-3.09},{"T":"\/Date(1490195634991)\/","Val":-2.36},{"T":"\/Date(1490195635011)\/","Val":-1.48},{"T":"\/Date(1490195635031)\/","Val":-0.51},{"T":"\/Date(1490195635051)\/","Val":0.49},{"T":"\/Date(1490195635081)\/","Val":1.47},{"T":"\/Date(1490195635091)\/","Val":2.35},{"T":"\/Date(1490195635111)\/","Val":3.08},{"T":"\/Date(1490195635131)\/","Val":3.61},{"T":"\/Date(1490195635151)\/","Val":3.93},{"T":"\/Date(1490195635171)\/","Val":3.99},{"T":"\/Date(1490195635191)\/","Val":3.81},{"T":"\/Date(1490195635211)\/","Val":3.38},{"T":"\/Date(1490195635231)\/","Val":2.74},{"T":"\/Date(1490195635251)\/","Val":1.94},{"T":"\/Date(1490195635271)\/","Val":1},{"T":"\/Date(1490195635291)\/","Val":0.01},{"T":"\/Date(1490195635311)\/","Val":-0.99},{"T":"\/Date(1490195635331)\/","Val":-1.92},{"T":"\/Date(1490195635351)\/","Val":-2.73},{"T":"\/Date(1490195635371)\/","Val":-3.37},{"T":"\/Date(1490195635391)\/","Val":-3.8},{"T":"\/Date(1490195635411)\/","Val":-3.99},{"T":"\/Date(1490195635431)\/","Val":-3.93},{"T":"\/Date(1490195635451)\/","Val":-3.62},{"T":"\/Date(1490195635471)\/","Val":-3.09},{"T":"\/Date(1490195635491)\/","Val":-2.36},{"T":"\/Date(1490195635511)\/","Val":-1.48},{"T":"\/Date(1490195635531)\/","Val":-0.51},{"T":"\/Date(1490195635551)\/","Val":0.49},{"T":"\/Date(1490195635571)\/","Val":1.46},{"T":"\/Date(1490195635591)\/","Val":2.35},{"T":"\/Date(1490195635611)\/","Val":3.08},{"T":"\/Date(1490195635631)\/","Val":3.62},{"T":"\/Date(1490195635651)\/","Val":3.93},{"T":"\/Date(1490195635671)\/","Val":3.99},{"T":"\/Date(1490195635691)\/","Val":3.81},{"T":"\/Date(1490195635711)\/","Val":3.38},{"T":"\/Date(1490195635731)\/","Val":2.74},{"T":"\/Date(1490195635751)\/","Val":1.93},{"T":"\/Date(1490195635771)\/","Val":1},{"T":"\/Date(1490195635791)\/","Val":0.01},{"T":"\/Date(1490195635811)\/","Val":-0.99},{"T":"\/Date(1490195635831)\/","Val":-1.93},{"T":"\/Date(1490195635851)\/","Val":-2.73},{"T":"\/Date(1490195635871)\/","Val":-3.37},{"T":"\/Date(1490195635891)\/","Val":-3.8},{"T":"\/Date(1490195635911)\/","Val":-3.99},{"T":"\/Date(1490195635931)\/","Val":-3.93},{"T":"\/Date(1490195635951)\/","Val":-3.62},{"T":"\/Date(1490195635971)\/","Val":-3.09},{"T":"\/Date(1490195635991)\/","Val":-2.36},{"T":"\/Date(1490195636011)\/","Val":-1.48},{"T":"\/Date(1490195636031)\/","Val":-0.5},{"T":"\/Date(1490195636051)\/","Val":0.5},{"T":"\/Date(1490195636071)\/","Val":1.47},{"T":"\/Date(1490195636091)\/","Val":2.35},{"T":"\/Date(1490195636111)\/","Val":3.08},{"T":"\/Date(1490195636131)\/","Val":3.62},{"T":"\/Date(1490195636151)\/","Val":3.93},{"T":"\/Date(1490195636171)\/","Val":3.99},{"T":"\/Date(1490195636191)\/","Val":3.81},{"T":"\/Date(1490195636211)\/","Val":3.38},{"T":"\/Date(1490195636240)\/","Val":2.74},{"T":"\/Date(1490195636260)\/","Val":1.93},{"T":"\/Date(1490195636270)\/","Val":1},{"T":"\/Date(1490195636300)\/","Val":0},{"T":"\/Date(1490195636310)\/","Val":-0.99},{"T":"\/Date(1490195636340)\/","Val":-1.92},{"T":"\/Date(1490195636350)\/","Val":-2.74},{"T":"\/Date(1490195636380)\/","Val":-3.38},{"T":"\/Date(1490195636400)\/","Val":-3.8},{"T":"\/Date(1490195636420)\/","Val":-3.99},{"T":"\/Date(1490195636440)\/","Val":-3.93},{"T":"\/Date(1490195636450)\/","Val":-3.62},{"T":"\/Date(1490195636480)\/","Val":-3.08},{"T":"\/Date(1490195636490)\/","Val":-2.35},{"T":"\/Date(1490195636520)\/","Val":-1.47},{"T":"\/Date(1490195636540)\/","Val":-0.5}]
    );

    var oscillatorDataSource = new kendo.data.DataSource({
        data: oscillatorChartData
    });
Stefan
Telerik team
 answered on 29 Mar 2017
3 answers
2.1K+ views

Hi All, 

       How we add dropdownlist as filter in kendo grid and how its populate from enum? Below i providing my code

 

 @(Html.Kendo()
                            .Grid<Portals.Areas.Reports.Models.TransactionReportItem>()
                            .Name("transactionGrid")
                            .HtmlAttributes(new { @class = "grid-primary" })
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(100)
                                .Read(read => read.Action("GetTransactions", "Transactions")))
                            .Pageable(pageable => pageable
                                .Enabled(true)
                                .PageSizes(new[] { 100, 500 })
                                .Refresh(false)
                                .ButtonCount(5))
                            .Columns(columns =>
                            {
                               
                                columns.Bound(row => row.TransactionID);

                                //Order ID Column
                                columns.Bound(row => row.OrderID);

                                //TxnAmount Column
                                columns.Bound(row => row.TransactionAmount).Format("{0:n2}").HeaderHtmlAttributes(new { @class = "text-align-reverse" }).HtmlAttributes(new { @class = "text-align-reverse" });

                                //Txn date column
                                columns.Bound(row => row.TransactionDate).Format("{0:" + userPreference.PreferredDateDisplayFormat + "}").HeaderHtmlAttributes(new { @class = "text-align-reverse" }).HtmlAttributes(new { @class = "text-align-reverse" });

                                //ViewDetail column
                                columns.Bound(row => row.TransactionID).Title("").Filterable(f => f.Enabled(false))
                                .ClientTemplate(@"
                                    <button id='#= TransactionID #' data-btn-viewDetail='#= TransactionID #' class='btn btn-neutral btn-sm'>
                                        View Detail
                                    </button>
                                ");
                            })
                            .Sortable()
                            .Filterable(ftb => ftb.Enabled(true))
                            .ToolBar(tools => tools.Pdf())
                            .ToolBar(tools => tools.Excel())
                            .Pdf(pdf => pdf
                                .AllPages()
                                .PaperSize("A4")
                                .Scale(0.8)
                                .RepeatHeaders()
                                .AvoidLinks()
                                .Landscape()
                                .Title("Title")
                                .TemplateId("page-template")
                                .Margin("2cm", "1cm", "1cm", "1cm")
                                .FileName(string.Format("PayCommerce_Merchant_Transaction_Report_{0}.pdf", DateTime.UtcNow.ToString("yyyymmdd_hhmmss")))
                                .ForceProxy(true)
                                .ProxyURL(Url.Action("Pdf_Export_Save", "Transactions"))
                            )
                            .Excel(excel => excel
                                .AllPages(true)
                                .FileName(string.Format("PayCommerce_Merchant_Transaction_Report_{0}.xlsx", DateTime.UtcNow.ToString("yyyymmdd_hhmmss")))
                                .ForceProxy(true)
                                .ProxyURL(Url.Action("Pdf_Export_Save", "Transactions"))
                            )

                            )

 

 

Tsvetina
Telerik team
 answered on 29 Mar 2017
1 answer
326 views

I'm trying to extend TimelineView so that some events overlap and others are bumped to the next line depending on their status. I can overwrite the _arrangeRows method but can't get the collidingEvents to overwrite. How do I overwrite collidingEvents from the TimelineView?

<script type="text/javascript">

    var customTimelineView = kendo.ui.TimelineView.extend({
        options: {
            name: "customTimelineView",
            title: "Custom Time Line",
            columnWidth: 30,
        },
        name: "customTimelineView",

        _arrangeRows: function (eventObject, slotRange, eventGroup) {
            var test = "test";
            var startIndex = slotRange.start.index;
            var endIndex = slotRange.end.index;
            var rect = eventObject.slotRange.innerRect(eventObject.start, eventObject.end, false);
            var rectRight = rect.right + this.options.eventMinWidth;
            //var events = kendo.ui.SchedulerView.collidingEvents(slotRange.events(), rect.left, rectRight);
            var events = collidingEvents(slotRange.events(), rect.left, rectRight);
            slotRange.addEvent({
                slotIndex: startIndex,
                start: startIndex,
                end: endIndex,
                rectLeft: rect.left,
                rectRight: rectRight,
                element: eventObject.element,
                uid: eventObject.uid
            });
            events.push({
                start: startIndex,
                end: endIndex,
                uid: eventObject.uid
            });
            var rows = kendo.ui.SchedulerView.createRows(events);
            if (eventGroup.maxRowCount < rows.length) {
                eventGroup.maxRowCount = rows.length;
            }
            for (var idx = 0, length = rows.length; idx < length; idx++) {
                var rowEvents = rows[idx].events;
                for (var j = 0, eventLength = rowEvents.length; j < eventLength; j++) {
                    eventGroup.events[rowEvents[j].uid].rowIndex = idx;
                }
            }
        },

    });

    function collidingEvents(elements, left, right) {
        var idx, startPosition, overlaps, endPosition;
        for (idx = elements.length - 1; idx >= 0; idx--) {
            startPosition = elements[idx].rectLeft;
            endPosition = elements[idx].rectRight;
            overlaps = startPosition <= left && endPosition >= left;
            if (overlaps || startPosition >= left && endPosition <= right || left <= startPosition && right >= startPosition) {
                if (startPosition < left) {
                    left = startPosition;
                }
                if (endPosition > right) {
                    right = endPosition;
                }
            }
        }
        return kendo.ui.SchedulerView.eventsForSlot(elements, left, right);
    }

</script>

 

Also, why are some of the functions prefixed with "_"? ie What is difference between "render()" and "_render()"?

 

Ivan Danchev
Telerik team
 answered on 29 Mar 2017
1 answer
991 views

Hi,

 

I'm having trouble to populate a Kendo DropdownBox based upon an change event of a datapicker. I see that everything is working fine, even the json that is parsed after the Ajax call (while iterating through the result) is valid by checking it using alerts (see code below). For some reason the values in my dropdownbox are "Undefined" and i don't know how to resolve this. Can someone help me out with this?

I also tried to use the setDataSource as i read here in this forum, but my dropdownbox doesn't do anything (it's not showing any data at all).

Thanks in advance.

 

Best Regards,

 

Hans Oosterhuis

 

The definition of the DropDownBox:

 

<p>@(Html.Kendo().DropDownList()
                .Name("AvailableTimes")
                .DataTextField("Text")
                .DataValueField("Value")
                    )

 

The Ajax call to populate the dropdownbox above:

function RefreshStartTimes() {
 
        var employeeId = parseInt($('#Appointment_EmployeeId').val());
        var worktypeId = parseInt($("#Appointment_WorkTypeId").val());
        var plannedDate = parseDate($("#Appointment_AfspraakVan").val());
 
        var filtermodel = {};
 
        filtermodel = {
            EmployeeId: employeeId,
            WorkTypeId: worktypeId,
            PlannedDate: plannedDate
        };
 
        var filter = JSON.stringify(filtermodel);
 
 
        $.ajax({
            url: '@Url.Action("GetAvailabeTimeSlots", "Appointment", new { area = string.Empty })',
            type: "POST",
            data: filter,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (listItems) {
                if (JSON.stringify(listItems) != "[]") {
                    //var ddl = $('#AvailableTimes').data("kendoDropDownList");
                    //ddl.setDataSource(listItems);
                    //ddl.refresh();
 
                    $.each(listItems, function (i, listItem) {
                        $("#AvailableTimes").data("kendoDropDownList")
                             .dataSource.add({ "text": listItem.Text, "value": listItem.Value });
                        alert('Listitem is' + listItem.Text);
                        alert('Value is' + listItem.Value);
                        alert('Selected is' + listItem.Selected);
                    })
 
                    //$.each(listItems, function () {
                    //    $.each(this, function (k, v) {
                    //        /// do stuff
                    //        $("#AvailableTimes").data("kendoDropDownList")
                    //            .dataSource.add({ "text": k, "value": v });
                    //    });
                    //});
 
                    
 
                    //$("#AvailableTimes").data("kendoDropDownList").refresh();
 
                     
 
 
                    //$('#divSearchPNResults').show();
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("ERROR RefreshCustomerDetail:" + errorThrown);
            }
        });

 

The Ajax call itself:

 

public JsonResult GetAvailabeTimeSlots(AppointmentFilter filter)
        {
            if (filter != null)
            {
                var listItems = _appointmentService.GetSuitableTimesForPlannedDate(filter.WorkTypeId,
                                                              filter.EmployeeId,
                                                              filter.PlannedDate)
                                    .Select(s => new SelectListItem { Value = s, Text = s })
                                    .ToList<SelectListItem>();
 
                return Json(listItems, JsonRequestBehavior.AllowGet);
            }
 
            return Json(null, JsonRequestBehavior.AllowGet);
             
        }

 

 

 

Ivan Danchev
Telerik team
 answered on 29 Mar 2017
1 answer
1.4K+ views

Hello Team,

When I select 12px in Html Editor it is being set as "9" in Word Document.

Similarly

13 px in Editor is being set as "10"

14px as  "10.5"

15px as "11.5" 

Is there any option that I can set "14.5px" in editor so that will be "11" in word document ? 

Please find the attached word document for reference.

Also I need to add "Calibri" in Font-Names drop down. 

Can you please help me with this issue ASAP ? Thanks in advance.

Ianko
Telerik team
 answered on 29 Mar 2017
1 answer
231 views

When exporting the data from the Grid to PDF, the grid causes the UI to be distorted. Grid tries to recreate the grid and a progress bar is shown in the UI. Once pdf is generated, the grid comes back to normal before the browser save/cancel dialog is displayed. 

So what is causes this flickering and how can i change (hide) this progress bar behavior.

The Grid uses the server side side binding. So the data is already available at the browser.

 

 

Stefan
Telerik team
 answered on 29 Mar 2017
1 answer
105 views

Hi all

 

I have built a grid which uses ClientDetailTemplateId to display details per order row.

I am also using the RTL style to display the grid aligned to RTL languages.

Yet the icon to open the details for each row is still displayed to the LTR direction.

 

Any idea how to fix this?

Here is a working (or not working) sample code

 

Thanks

<div class="k-rtl">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-18 col-md-12">
 
                <script type="text/x-kendo-template" id="rowTemplate">
                    <div class="orderRow">
                        <tr>
                            <td>
                                #:OrderID#
                            </td>
                            <td>
                                #:Freight#
                            </td>
                            <td>
                                #:OrderDate#
                            </td>
                            <td>
                                #:ShipName#
                            </td>
                            <td>
                                #:ShipCity#
                            </td>
                        </tr>
                    </div>
                </script>
 
                <script>
                    var rowTemplate = kendo.template($('#rowTemplate').html());
                </script>
 
                @(Html.Kendo().Grid<APDashboard.Models.OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Freight).Title("מספר ספינה");
                    columns.Bound(p => p.OrderDate).Title("תאריך הזמנה").Format("{0:MM/dd/yyyy}");
                    columns.Bound(p => p.ShipName).Title("שם משלוח");
                    columns.Bound(p => p.ShipCity).Title("עיר משלוח");
                })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .ClientDetailTemplateId("template")
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
                .Events(events => events.DataBound("dataBound"))
                )
 
                @(Html.Kendo().ContextMenu()
                .Name("menu")
                .Target("#grid")
                .Filter(".orderRow")
                .Orientation(ContextMenuOrientation.Horizontal)
                .Items(items =>
                {
                    items.Add()
                         .Text("Forward");
                })
                )
            </div>
        </div>
 
        <script id="template" type="text/kendo-tmpl">
            @(Html.Kendo().Grid<APDashboard.Models.OrderViewModel>()
            .Name("grid_#=OrderID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Title("מספר הזמנה").Width(110);
                columns.Bound(o => o.ShipCountry).Title("ארץ משלוח").Width(110);
                columns.Bound(o => o.ShipAddress).Title("כתובת משלוח").ClientTemplate("\\#= ShipAddress \\#").Width(110);
                columns.Bound(o => o.ShipName).Title("שם משלוח").Width(300);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("Orders_Read", "Grid", new { employeeID = "#=OrderID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
            )
        </script>
        <script>
            function dataBound() {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            }
        </script>
    </div>
</div>

 

Boyan Dimitrov
Telerik team
 answered on 29 Mar 2017
1 answer
1.2K+ views

Hi all

 

I search in the forums and could not find that one thing that I am missing.

I have a simple grid implementation from your examples which I wanted to

add a context menu on it but it just does not do the job (I get the regular browser context menu).

 

here is my code (ASP.NET MVC)

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
 
            <script type="text/x-kendo-template" id="rowTemplate">
                <div class="orderRow">
                    <tr>
                        <td>
                            #:OrderID#
                        </td>
                        <td>
                            #:Freight#
                        </td>
                        <td>
                            #:OrderDate#
                        </td>
                        <td>
                            #:ShipName#
                        </td>
                        <td>
                            #:ShipCity#
                        </td>
                    </tr>
                </div>
            </script>
 
            <script>
                var rowTemplate = kendo.template($('#rowTemplate').html());
            </script>
 
            @(Html.Kendo().Grid<APDashboard.Models.OrderViewModel>()
                .Name("AgilePointDashboardGrid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);
                    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                    columns.Bound(p => p.ShipName);
                    columns.Bound(p => p.ShipCity);
                })
                .ClientRowTemplate("#=rowTemplate(data)#")
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
            )
 
            @(Html.Kendo().ContextMenu()
                .Name("menu")
                .Target("#AgilePointDashboardGrid")
                .Filter(".orderRow")
                .Orientation(ContextMenuOrientation.Horizontal)
                .Items(items =>
                {
                    items.Add()
                         .Text("Forward");
                })
            )
      </div>
    </div>
 
    <script>
    $(document).ready(function() {
        var menu = $("#menu");
        var original = menu.clone(true);
        original.find(".k-state-active").removeClass("k-state-active");
 
        var initMenu = function () {
 
            menu = $("#menu").kendoContextMenu({
                target: "#AgilePointDashboardGrid",
                filter: ".orderRow",
                select: function(e) {
                    // Do something on select
                }
            });
        };
        initMenu();
    });
    </script>
</div>

 

I would love to know what am I missing here

Thanks

Viktor Tachev
Telerik team
 answered on 29 Mar 2017
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
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?