Telerik Forums
UI for ASP.NET MVC Forum
2 answers
246 views

I have a grid that I initalize via the .NET wrapper. I can do the following:

columns.Bound(r => r.SampleColumn).ClientGroupHeaderTemplate("#= myFunction2(data, 50) #")

But I can't do this:

columns.Bound(r => r.SampleColumn).Filterable(f => f.Cell(c => c.Template("#= myFunction1(data, 100) #")))

I get a JS error. Any idea why? I would like to pass in an additional variable on the view.

Fillip
Top achievements
Rank 1
 answered on 28 Jun 2016
1 answer
82 views

In using the grid, with filterable (.Filterable(ftb => ftb.Mode(GridFilterMode.Row))), the icons and/or styles seem to be missing.  I am using the CDN source for my includes:

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
  <link href="http://uilibrary.Vensure.com/Styles/reset.css" rel="stylesheet" type="text/css">
 
  <script src="~/Scripts/modernizr-2.6.2.js"></script>
  <script src="~/Scripts/jquery-3.0.0.min.js"></script>
 
 

Can you tell me what, if anything, am I missing from these?  Because the filterable missing icons and other UI elements makes the screen thus far look pretty ugly.

Also, when clicking on the filterable boxes, which should show dropdowns for filter criteria (Starts With, Contains, etc...) all I get instead is a javascript error: Uncaught TypeError: f.getClientRects is not a function

 

The error appears to be thrown by jquery, of which you'll see I am using version 3.0.0.

Any help, suggestions, or advice would be greatly appreciated.

 

 

Pavlina
Telerik team
 answered on 28 Jun 2016
1 answer
99 views

Hi,

Is it possible to have two Edit buttons in a Grid, One for In-Line edit & another for Edit in Pop-Up mode. Thanks,

Kostadin
Telerik team
 answered on 28 Jun 2016
2 answers
171 views
Does Id have to be an integer or it can be string?
It seems like in my case #=INVOICE# is getting value but it Read method to controller not sure why not getting called.

I tried looking at this example: http://demos.telerik.com/kendo-ui/grid/detailtemplate

    code:
    @(Html.Kendo().Grid<OpenInvoicesInfo>()
                  .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(p => p.INVOICE).ClientTemplate("<input type='checkbox' value='#= INVOICE #' class='testclass' />").Width(4);
          columns.Bound(i => i.INVOICE).Width(15);
          ...     
      })
          .ClientDetailTemplateId("OrdersTemplate")
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(8)
          .Read(read => read.Action("GetOpenInvoices", "Maint", new { cust = Request.QueryString["cust"] }))
      )

    )

    <script id="OrdersTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<CustomerComments>()
                                .Name("grid_#=INVOICE#")
                .Columns(columns =>
                {
                    columns.Bound(o => o.INVOICE).Width(15);
                    columns.Bound(o => o.Comment).Width(40);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(read => read.Action("GetCustomerComments", "Maint", new { invoices = "#=INVOICE#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
    )
</script>
          
        Controller:
        public ActionResult GetCustomerComments([DataSourceRequest] DataSourceRequest request, string invoices)
        {

            List<JNI.Enterprise.Contracts.CustomerComments> customer = InvoiceService.GetCustomerComments(invoices);

            return Json(customer.ToDataSourceResult(request));
        }

I will really appreciate if someone can reply.
Does it only work if it is in entity framework.
I am calling GetCustomerComments from a stored procedure.
It is loading the first grid fine but not calling details grid's controller method.
Gaurav
Top achievements
Rank 1
 answered on 27 Jun 2016
1 answer
1.4K+ views

Hello,

I am having difficulty incorporating the tree view into an existing project. This is the error that I am getting: "jQuery(...).kendoTreeView is not a function". When the page loads, it shows the diagram without any problems, but the tree view is just the text: "Item 1" and "Item 2." There is no functionality and the data from the datasource does not appear.

The only script files being loaded are the mindfusion.diagramming.js and jquery-1.10.2.js, so maybe there are other script files that need to be loaded, which are being prevented from doing so? Or maybe the order of the jquery files in the layout are incorrect? Could someone please advise me on what to do?

Here is my layout:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
  
   
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
 
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    <link href="@Url.Content("~/Content/kendo/2016.2.607/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.2.607/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.2.607/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.2.607/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.2.607/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/kendo/2016.2.607/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2016.2.607/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2016.2.607/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2016.2.607/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
  
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                 </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
 
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    
</body>
</html>

 

And in my sample page:

@using MindFusion.Diagramming;
@using MindFusion.Diagramming.Mvc;
@using System.Drawing;
@using MindFusion.Diagramming.Layout;
@using SolidBrush = MindFusion.Drawing.SolidBrush;
@using LinearGradientBrush = MindFusion.Drawing.LinearGradientBrush;
@using Kendo.Mvc.UI;
@{
    // initialize the DiagramView control
    DiagramView view = new DiagramView("diagramView");
 
    Diagram diagram = view.Diagram;
    //Diagram's BackBrush property defines the default color with which the interior of the diagram will be filled
    diagram.BackBrush = new SolidBrush(Color.Azure);
    //LinkHeadShape and LinkHeadShapeSize properties define the default base shape and size for links' ending arrowhead
    diagram.LinkHeadShape = ArrowHeads.Triangle;
    diagram.LinkHeadShapeSize = 3;
 
    //DiagramStyle style = new DiagramStyle();
    //style.FontFamily = "Times New Roman";
    //style.Brush = new LinearGradientBrush(Color.LightBlue, Color.Blue, 90);
    //style.Stroke = new SolidBrush(Color.Black);
    //diagram.Style = style;
 
    Theme theme = new Theme();
    ShapeNodeStyle style = new ShapeNodeStyle();
    style.FontFamily = "Courier New";
    //Default fill color for shapes
    style.Brush = new LinearGradientBrush(Color.Pink, Color.Green, 90);
    theme.RegisterStyle(typeof(ShapeNode), style);
    diagram.Theme = theme;
 
    // add some nodes and links to the view's Diagram
    //ShapeNode objects can be drawn as various geometric shapes, as set through their Shape property.
    //The Shape property can be set to one of the predefined shapes: RoundRect, Rectangle, Ellipse, Process, Procedure, Delay
    ShapeNode node1 = diagram.Factory.CreateShapeNode(new RectangleF(55, 10, 40, 15));
    node1.Shape = Shapes.Terminator;
    node1.Text = "Start";
    node1.Tag = node1.Id;
    node1.Brush = new LinearGradientBrush(Color.Yellow, Color.Orange, 90);
 
    ShapeNode node2 = diagram.Factory.CreateShapeNode(new RectangleF(50, 40, 50, 20));
    node2.Text = "Receive order via e-mail";
    node2.Tag = node2.Id;
 
    ShapeNode node3 = diagram.Factory.CreateShapeNode(new RectangleF(50, 70, 50, 20));
    node3.Text = "Copy and paste e-mail data into database";
    node3.Tag = node3.Id;
 
    ShapeNode node4 = diagram.Factory.CreateShapeNode(new RectangleF(55, 100, 40, 40));
    node4.Shape = Shape.FromId("Decision");
    node4.Text = "Shipping involved?";
    node4.Brush = new LinearGradientBrush(Color.White, Color.Fuchsia, 90);
    node4.Tag = node4.Id;
 
    ShapeNode node5 = diagram.Factory.CreateShapeNode(new RectangleF(100, 135, 50, 20));
    node5.Shape = Shape.FromId("Save");
    node5.Text = "Print invoice and UPS label";
    node5.Brush = new SolidBrush(Color.Chartreuse);
    node5.Tag = node5.Id;
 
    ShapeNode node6 = diagram.Factory.CreateShapeNode(new RectangleF(100, 165, 50, 20));
    node6.Text = "Send e-mail to confirm shipping";
    node6.Tag = node6.Id;
    diagram.Nodes.Add(node6);
 
    ShapeNode node7 = diagram.Factory.CreateShapeNode(new RectangleF(100, 195, 50, 20));
    node7.Text = "Assemble package and ship";
    node7.Tag = node7.Id;
 
    ShapeNode node8 = diagram.Factory.CreateShapeNode(new RectangleF(55, 230, 40, 15));
    node8.Shape = Shapes.Terminator;
    node8.Text = "End";
    node8.Brush = new LinearGradientBrush(Color.Yellow, Color.Orange, 90);
    node8.Tag = node8.Id;
 
    diagram.Factory.CreateDiagramLink(node1, node2);
    diagram.Factory.CreateDiagramLink(node2, node3);
    diagram.Factory.CreateDiagramLink(node3, node4);
 
    //Add links
    DiagramLink link4 = diagram.Factory.CreateDiagramLink(node4, node5);
    link4.Text = "Yes";
 
    diagram.Factory.CreateDiagramLink(node5, node6);
    diagram.Factory.CreateDiagramLink(node6, node7);
    diagram.Factory.CreateDiagramLink(node7, node8);
 
    DiagramLink link8 = diagram.Factory.CreateDiagramLink(node4, node8);
    link8.Text = "No";
 
    ContainerNode node9 = diagram.Factory.CreateContainerNode(new RectangleF(200, 255, 100, 40));
    node9.Caption = "hi";
    node9.CaptionFormat.Alignment = StringAlignment.Center;
    node9.CaptionHeight = 12;
    node9.CaptionBrush = new SolidBrush(Color.Blue);
 
 
    diagram.Nodes.Add(node9);
    //Store the view in the ViewBag dictionary
    //Registers an object with the control
    ViewBag.DiagramView = view;
 
}
 
<div id="treeview-left">
 
    @(Html.Kendo().TreeView()
              .Name("treeview") //The name of the treeview is mandatory. It specifies the "id" attribute of the widget.
              .Items(items =>
              {
                  items.Add().Text("Item 1"); //Add item with text "Item1")
                  items.Add().Text("Item 2"); //Add item with text "Item2")
              })
               .Events(e => e
                    .Expand("treeview_expand")
                    .Collapse("treeview_collapse")
              )
    )
</div>
 
<script>
        function treeview_collapse() {
            //Handle the collapse event
        }
 
        function treeview_expand() {
            //Handle the expand event
        }
        $(document).ready(function () {
            $("#treeview-left").kendoTreeView({
                dragAndDrop: true,
                dataSource: [
                    {
                        text: "Furniture", expanded: true, items: [
                          { text: "Tables & Chairs" },
                          { text: "Sofas" },
                          { text: "Occasional Furniture" }
                        ]
                    },
                    {
                        text: "Decor", items: [
                          { text: "Bed Linen" },
                          { text: "Curtains & Blinds" },
                          { text: "Carpets" }
                        ]
                    }
                ]
            });
        });
 
</script>
 
 
 
@Html.DiagramView((DiagramView)ViewBag.DiagramView, new { style = "width:700px; height:500px" })

 

Dimo
Telerik team
 answered on 27 Jun 2016
2 answers
415 views

Hello,

here is another case where I get dates picked corretly but when posted to the server the date is one day behind the picked date.

I have placed a single grid in a razor view. The first field (TestItem) of the grid  is populated with a custom dropdown-editor and the 2nd field (TestDate) with a custom dateEditor. The grid itself uses api-controller CRUD actions.

<div class="full-height full-width">
    <div id="sample-grid" class="full-height"></div>
</div>
 
@section scripts {
    <script type="text/javascript">
 
    function ItemDropDownEditor(container, options) {
        $('<input required data-text-field="System" data-value-field="Code" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: gridDataSource(actions.sample.getTestItems, 50)
            });
    }
 
    function TestdateEditor(container, options) {
        $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                .appendTo(container)
                .kendoDatePicker({});
    }
 
    $(function () {
        // Client side kendo data source passed to kendo grid. Uses AllSamplesController for CRUD operations.
        var sampleGridDataSource = new kendo.data.DataSource({
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number", editable: false },
                        TestItem: { defaultValue: { Code: "001", System: "none"} },
                        TestDate: { type: "datetime" },
                    }
                }
            },
            transport: {
                read: {
                    url: actions.common.rootUrl + "api/Allsamples/?anlagenId=" + amplify.store("SelectedItemId"),
                    type: "Get"
                },
                create: {
                    url: actions.common.rootUrl + "api/Allsamples/?anlagenId=" + amplify.store("SelectedItemId"),
                    type: "PUT",
                    contentType: 'application/json;charset=utf-8'
                },
                update: {
                    url: actions.common.rootUrl + "api/Allsamples/?anlagenId=" + amplify.store("SelectedItemId"),
                    type: "PUT",
                    contentType: 'application/json;charset=utf-8'
                },
                destroy: {
                    url: actions.common.rootUrl + "api/Allsamples",
                    type: "DELETE",
                    contentType: 'application/json;charset=utf-8'
                },
                parameterMap: function(data, operation) {
                    if (operation != "read") {
                        return kendo.stringify(data.models);
                    }
                }
            },
            requestEnd: function(e) {
                if (e.type == "create") {
                    this.read();
                }
            },
            change: function(e) {
                //if (e.action == "itemchange" || e.action == "add" || e.action == "remove")
                if (e.action == "itemchange")
                {
                    window.sampleViewModel.setIsDirty(true);
                }
            }
        });
 
        var sampleGrid = $("#sample-grid").kendoGrid({
            dataSource: sampleGridDataSource,
            scrollable: true,
            navigatable: true,
            sortable: true,
            columnMenu: true,
            selectable: "row",
            editable: {
                confirmation: "Delete the selected record?",
            },
            pageable: {
                pageSizes: [10, 20, 50],
                refresh: true,
            },
            filterable: true,
            resizable: true,
            height: 500,
            columns: [
                {
                    field: "TestItem",
                    title: "TestItem",
                    width: "120px",
                    editor: ItemDropDownEditor,
                    template: "#=Items.System#",
                },
                 {
                    field: "TestDate",
                    title: "TestDate",
                    width: "100px",
                    type: "date",
                    format: "{0:dd.MM.yyyy}",
                    editor: TestdateEditor,
                    filterable: {
                        ui: "datepicker"
                    }
                },
            ]
        }).data().kendoGrid;
 
        sampleGridDataSource.bind('dataBound', function(e) {
            this.element.find('tbody tr:first').addClass('k-state-selected');
        });
 
 
        var jsonModel = @Html.Raw(Json.Encode(Model));
 
        var sampleViewModel = new sampleViewModel(jsonModel, sampleGrid);
 
        kendo.bind($("body"), sampleViewModel);
 
    });
    </script>
}

 

Does anybody have an idea what causes the offset of one day?

 

Best regards

Manu

Manu
Top achievements
Rank 1
 answered on 27 Jun 2016
1 answer
126 views

Hello,

I'm looking to add a embedded link column to a kendo grid for a networked file or folder.  (ex:123Fake.txt has an embedded hyperlink of  \\Server1\Folder1\123Fake.txt )

The server that will run the site is in the same network as Server1 so I don't see security as a problem.  After a day of trying to setup a example and getting nowhere I need a hand with how to do this properly.  If it isn't possible then confirmation it's not possible will work too.

 

thanks

Ianko
Telerik team
 answered on 27 Jun 2016
4 answers
545 views
I wanted to know if there is a way to leverage the
directory browser used as part of the editor widget as a stand-alone feature to
use as a file manager through the UI. I’d like to use it to access a directory
(and series of subfolders) as part of an application that I’m building for
administrative access to files uploaded by users to be used as templates for a
service.
Dimo
Telerik team
 answered on 27 Jun 2016
1 answer
119 views

Hello!

Could you please provide a sample project similar to this one, but with a foreign key column? I was trying to implement this on my own, but wasn't successful.

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/how-to/grid-bind-to-datatable

 

Best regards,

Kaan

Viktor Tachev
Telerik team
 answered on 27 Jun 2016
1 answer
237 views

Hi!

I have an editor template (DATETIMEEDIT.cshtml) for date times, which I use in a Grid and also in an ordinary form:

@model DateTime?
@(Html.Kendo().DateTimePickerFor(m => m)
.TimeFormat("HH:mm")
.HtmlAttributes(new { style = "width:100%;" })
)

 

The editor is bound to the Grid in this way:

var c = columns.Bound(fieldName);
c.EditorTemplateName("DATETIMEEDIT");
c.Format("{0:dd.MM.yyyy HH:mm}");

 

And this is how the editor is integrated into the HTML form:

@Html.EditorFor(v => dateTime, "DATETIMEEDIT", fieldName)

 

When I update the date and time, the Grid sends it back to the server as "3/21/2016 5:35:00 PM", and the form as "21.03.2016 17:35".

However, I need a reliable DateTime exchange format between the server and the client. "dd.MM.yyyy HH:mm" (24 hour) would be ok, but any other consistant solution would be alright too because if the server receives an unpredictable format, then I can't convert it into a C# DateTime object. Maybe there is another preferrable way to handle date times between the client and server? I don't even know why the Grid uses the American format as default because I work on a German workstation here.

 

Best,

Kaan

 

 

Viktor Tachev
Telerik team
 answered on 27 Jun 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?