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

I'm trying to get my chart title to be dynamic based on data in my chart.  However, since changing my ViewModel, I'm not getting any data in the chart to show up.  Here's my code so far.
ViewModel:

public class TargetZeroDetail
    {
        public String Title { get; set; }
        public List<TargetZeroDetails> Details { get; set; }
    }
 
    public class TargetZeroDetails
    {
        public DateTime DetailDate { get; set; }
        public String ShortDetailDate
        {
            get
            {
                return String.Format("{0:M/dd}", DetailDate);
            }
        }
        public Decimal Score { get; set; }
    }
 

 Controller:

public ActionResult Index()
{
    return View();
}
     
public ActionResult GetChartData([DataSourceRequest] DataSourceRequest request, DateTime passedDate)
{
    TargetZeroDetail data = Utility.GetTargetZeroData(passedDate);
    return Json(data, JsonRequestBehavior.AllowGet);
}

View: 

 

@model Utilities.TargetZeroDetail
 
<head>
    <link href="~/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2015.3.1111/kendo.material.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2015.3.1111/kendo.blueopal.min.css" rel="stylesheet" />
    <script src="~/Scripts/kendo/2015.3.1111/jquery.min.js"></script>
    <script src="~/Scripts/kendo/2015.3.1111/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo/2015.3.1111/kendo.aspnetmvc.min.js"></script>
</head>
<body>
    @{
        DateTime dateToPass = Convert.ToDateTime(Request.QueryString["date"]);
        if (dateToPass == DateTime.MinValue)
        {
            dateToPass = new DateTime(DateTime.Now.Date.Year, DateTime.Now.Month, 1);
        }
    }
    <table>
        <tr>
            <td valign="top">
                @(Html.Kendo().Button()
                    .Name("prevButton")
                    .Content("Previous Month")
                    .Icon("expand-w")
                    .Events(ev => ev.Click("onPrevClick"))
                )
            </td>
            <td>
                <div id="example">
                    <div id="chart">
                        @(Html.Kendo().Chart(Model.Details)
                            .Name("targetZeroChart")
                            .DataSource(dataSource => dataSource
                                .Read(read => read.Action("GetChartData", "Home", new { passedDate = dateToPass }))
                            )
                            .ChartArea(ca => ca.Height(690).Width(690))
                            .Title(Model.Title)
                            .Legend(false)
                            .SeriesDefaults(series => series
                                .RadarLine()
                                .Width(0)
                                .Markers(markers => markers
                                    .Visible(true)
                                    .Background("blue")
                                    .Border(border => border
                                        .Width(2)
                                        .Color("blue")
                                    )
                                )
                                .Tooltip(tooltip => tooltip
                                    .Visible(true)
                                    .Background("white")
                                )
                            )
                            .Series(series => series
                                .RadarLine(d => d.Score)
                            )
                            .CategoryAxis(axis => axis
                                .Categories(m => m.ShortDetailDate)
                            )
                            .ValueAxis(axis => axis.Numeric()
                                .Labels(l => l.Visible(false))
                                .Line(l => l.Visible(false))
                                .PlotBands(pb =>
                                {
                                    pb.Add().Color("green").From(0).To(1).Opacity(0.5);
                                    pb.Add().Color("yellow").From(1).To(2).Opacity(0.5);
                                    pb.Add().Color("gold").From(2).To(3).Opacity(0.5);
                                    pb.Add().Color("orange").From(3).To(4).Opacity(0.5);
                                    pb.Add().Color("red").From(4).To(10).Opacity(0.5);
                                })
                            )
                        )
                    </div>
                </div>
            </td>
            <td valign="top">
                @(Html.Kendo().Button()
                    .Name("nextButton")
                    .Content("Next Month")
                    .Icon("expand")
                    .Events(ev => ev.Click("onNextClick"))
                    .HtmlAttributes(new
                    {
                        @class = "right-icon"
                    })
                )
            </td>
        </tr>
    </table>
    <style>
        .right-icon .km-button .km-icon {
            float: right;
            margin-left: 0.3em;
        }
    </style>
    <script>
        function onPrevClick(e) {
            var newAddress = getPathFromUrl(window.location.href);
            if (newAddress.indexOf("Home") < 0) {
                newAddress += "Home/Index";
            }
            newAddress += "?date=@dateToPass.AddMonths(-1).Date.ToShortDateString()";
            window.location.replace(newAddress);
        }
 
        function onNextClick(e) {
            var newAddress = getPathFromUrl(window.location.href);
            if (newAddress.indexOf("Home") < 0) {
                newAddress += "Home/Index";
            }
            newAddress += "?date=@dateToPass.AddMonths(1).Date.ToShortDateString()";
            window.location.replace(newAddress);
        }
 
        function getPathFromUrl(url) {
            return url.split(/[?#]/)[0];
        }
 
        $("#chart").css("width", "700px").css("height", "700px")
                    .data("kendoChart");
    </script>
</body>

I'm assuming that since my initial call to the controller simply returns an empty View, that's why this is happening.  However if I were to make the call to get data to return to my view initially, it still doesn't show up.

What am I missing here?

T. Tsonev
Telerik team
 answered on 19 Feb 2016
3 answers
333 views
Hi 

I Am Using Telerik reporting DLL for Export PDF .

But When I export data With Unicode Character Not Support in PDF.

for E.X => Original String  ==>  PѐrustamismэnoЁcoToPat 520
                    In  PDF               ==>  P􀀀rustamismэnoЁcoToPat 520

 

unicode Character not supported.


please help us

Thanks in advance

Stef
Telerik team
 answered on 18 Feb 2016
1 answer
285 views

I am at a disadvantage because not only am I new to Kendo UI, but I am new to MVC as well.

Using the Save method inside Kendo UI Grid, I ALSO need to access a selected value from a Kendo Drop Down List.

For the life of me, I cannot figure out how to access the value.

Can someone assist? 

Here is some code:

Drop Down List:

@(Html.Kendo().DropDownListFor(m => m.SelectedPrinter)
.Name("Printers")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select printer...")
.DataTextField("Name")
.DataValueField("ID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadePrinters", "Home")
.Data("filterProducts");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("Locations")
)

Grid:

.DataSource(dataSource => dataSource.Ajax()
.Model(
model =>
{
model.Field(f => f.UserName).Editable(false);
model.Field(f => f.FirstName).Editable(false);
model.Field(f => f.LastName).Editable(false);
model.Field(f => f.PrincipalCreationDate).Editable(false);
model.Id(p => p.UserName);
}
)
.Read("Editing_Read", "Home")
.Update("Editing_Update", "Home")
.ServerOperation(false)
.Batch(true)

Controller:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<User> usr, UsersViewModel uvm, string SelectedPrinter)
{

// Check if model is valid
// Get User from UserID
// Build Trigger File
// Send to Bartender Trigger Directory
if (usr != null && ModelState.IsValid)
{
foreach (var product in usr)
{
// productService.Update(product);
}
}
return Json(usr.ToDataSourceResult(request, ModelState));
}

Any Help is appreciated.

Danail Vasilev
Telerik team
 answered on 18 Feb 2016
1 answer
89 views
Hi, I know this is maybe a strange question but I'd like to inquire about the behavior when sorting on a column where all values are the same.  I would expect that nothing changes, however that is not the case,  rows seem to sort randomly.  What sort is being applied in this case?  The interesting thing is I have two columns like that, and they both get sorted in the exact same order, so there is some logic I just can't tell what it is.  The behavior should be that if column values are all the same no sort is applied (this is how the silver light grid which I'm migrating from works). 
Angel Petrov
Telerik team
 answered on 18 Feb 2016
1 answer
216 views

Hi Team,

 

I am using Kendo MVC Grid control with model binding, and in jquery document.ready function i am updating the grid height manually according to page height.

Below is my code

<div id="div-shipmentsgrid-wrapper" style="width:100%; height:800px;">
            @(Html.Kendo().Grid(Model) // Bind the grid to the Model property of the view
            .Name("grdshipmentssummary")
            .Columns(columns =>
            {
                columns.Bound(p => p.PROJECTCODE).Title("Sl").Width(55);
                columns.Bound(p => p.PRODUCTCODE).Title("Product Code").Width(150);
                columns.Bound(p => p.CUSTOMERCODE).Title("Customer").Width(200);
                columns.Bound(p => p.PROJECTCODE).Title("Project Code").Width(150);
                columns.Bound(p => p.SHIPDESCR).Title("Shipping Description").Width(250);
                columns.Bound(p => p.PERCENTAGECOMP).Title("% Comp").Width(100);
                columns.Bound(p => p.STATUSDESCR).Title("Status").Width(100);
                columns.Bound(p => p.COMMITTED).Title("Commit").Format("{0:yyyy-MM-dd}").Width(120);
            })
                .Pageable()
            .Sortable()
                .Filterable(filter => filter.Extra(false))
            .Resizable(resize => resize.Columns(true)).Filterable(filter => filter.Extra(false))
            .Resizable(resize => resize.Columns(true))
                .Scrollable()
            .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single)
            .Type(GridSelectionType.Row))
                .Events(events => events.Change("onShipmentSummarygridRowChange").DataBound("onDataBound").DataBinding("onDataBinding"))
            .DataSource(dataSource => dataSource
                .Server()
                .Model(model => model.Id(p => p.ID))
            .PageSize((int)ViewBag.PageSize)
                )
            )
            @*<div id="grdshipmentssummary"></div>*@
        </div>

<script type="text/javascript">
    $(document).ready(function () {

       var exHeight = 185;//navbar footer and spaces
        $("#div-shipmentsgrid-wrapper").css("height", parseInt($(window).height().toString().replace("px", "")) - exHeight);
        $("#div-shipmentsgrid-wrapper div.k-grid-content").css("height", parseInt($("#div-shipmentsgrid-wrapper").css("height").toString().replace("px", "")) - 60);

    });

</script>

 Above code is working fine and setting grid height correctly.

But as i am using model binding, page is taking time to load and grid as well. Meanwhile between pageload and document.ready grid is loading with half height of the page. My question is, is there any grid preload event where i can find the div.k-grid-content.

 

Plamen
Telerik team
 answered on 18 Feb 2016
2 answers
189 views

Hi

 I'm attempting to wire up a Kendo grid to a web api.  I found two great examples on the site: here and here.

 Basically says configure the data source like this:

 

.DataSource(dataSource => dataSource
            .WebApi()
            .Model(model =>
            {
                model.Id(product => product.ProductID); // Specify the property which is the unique identifier of the model
                model.Field(product => product.ProductID).Editable(false); // Make the ProductID property not editable
            })
            .Create(create => create.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Products" }))) // Action invoked when the user saves a new data item
            .Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Products" }))) // Action invoked when the grid needs data
            .Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Products", id = "{0}" })))  // Action invoked when the user saves an updated data item
            .Destroy(destroy => destroy.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Products", id = "{0}" }))) // Action invoked when the user removes a data item
      )

 

 I'm using version 2016.1.112 and .WebApi() isn't available.  Any idea how the hook the data source to a web api without it?

Caleb Sandfort
Top achievements
Rank 1
 answered on 17 Feb 2016
1 answer
104 views

Hi,

     I am Evaluating telerik Kendo Grid for MVC.

I have dynamic Datatable which I would like to bind to the grid.I can able to bind the grid but unable to do paging,filtering etc.

Once I go to next page,the grid collapase to empty with page numbers set to 0.

 

     @(Html.Kendo().Grid<System.Data.DataTable>().Name("Grid")
            .DataSource(d => d.Ajax().PageSize(2)
             .Read(r => r.Action("ReadData", "Home"))
                )

        .Columns(col =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                col.Bound(column.ColumnName);
            }

        }).Sortable()
        .Filterable()
        .Pageable()

Dimiter Madjarov
Telerik team
 answered on 17 Feb 2016
3 answers
160 views

Hello,

 

I have a Scheduler Resources and i must show in cascade showing with 4 column

Example

|Name|Type|Status|Active|Days|

|A       | T     | T       | 1      | Days|

|B       | T     | K       | 0      | Days|

 

but i cant find how to do this. All examples show included resources not connected others.

Vladimir Iliev
Telerik team
 answered on 17 Feb 2016
8 answers
594 views
I am always getting values (fields) of IEnumerable object as NULL.
I have Grid  code like
this (UI)
@(Html.Kendo().Grid<ATS.RoleManager.Models.TasksAndPaths.EscalationRolePath>()
                                        .Name("GridTaskAndPaths")   
.Columns(columns => {
columns.Bound(p => p.TaskEscalationRolePathId);
columns.Bound(p => p.PathDescription).EditorTemplateName("EscalationRolePathsDropDownList");
                                        })   
                                       //.ToolBar(toolBar => toolBar.Save())
                                        .Editable(editable
=> editable.Mode(GridEditMode.InCell))
.Events(ev => ev.Save(@"function(e){
setTimeout(function(){            $('#GridTaskAndPaths').data('kendoGrid').dataSource.sync()
}                                   
)}"))                  
.Scrollable()           
.Pageable()           
.DataSource(dataSource => dataSource      
.Ajax() 
.Batch(true)                  
.ServerOperation(false)    
.Events(events => events.Error("error_handler"))
                                            .Model(model => {
model.Id(p => p.TaskEscalationRolePathId);
})                                    
.Read(read => read.Action("HierarchyBinding_Employees", "TasksAndPaths"))
.Update(update => update.Action("EditingCustom_Update", "TasksAndPaths"))    
                                        )
                                    )
  <script>
                            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>
--------------------------------------------------------------------------------------
Partial View
Views\Shared\EditorTemplates\EscalationRolePathsDropDownList.cshtml
 
@using Kendo.Mvc.UI;
 
@(Html.Kendo().DropDownList()
    .Name("PathDescription")  //Important, must match the column's name
    .OptionLabel("Select path")
    .DataValueField("TaskEscalationRolePathId")
    .DataTextField("PathDescription")
    .BindTo((System.Collections.IEnumerable)ViewBag.EscalationPathName )
    )  
---------------------------------------------------------------------------------------
Controller Code
[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingCustom_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<EscalationRolePath> escalationRolePath)
        {
//Here is the issue , object escalationRolePath is not null but values (fields ) are NULL

}
 public JsonResult HierarchyBinding_AllRoles(string TaskEscalationRolePathId, [DataSourceRequest] DataSourceRequest request)
        {
            try
            {
                return new JsonResult { Data = GetListOfEmployeesAndRolesOnEscalationPath(TaskEscalationRolePathId).ToDataSourceResult(request), MaxJsonLength = Int32.MaxValue, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }
            catch (Exception ex)
            {
                ExceptionLogger.LogUIException(ex);
                return null;
            }
        }

Please suggest me solution for this .

Majid
Vladimir Iliev
Telerik team
 answered on 17 Feb 2016
1 answer
656 views

I have follow Kendo UI for ASP.NET MVC Local binding example to create my pivot view. 

At my pivot grid, the rows is group by a date, however, the date display on the row header is  a long date format. How to format a date in a row header column to a short date?

 At the following code, I am able to use the template to format  a date field to a short the format, but not on the row header column. please see the picture  for the detail.

@model IEnumerable<TelerikMVCStudy.Domain.Dailyforecast_view>
 
@{
    ViewBag.Title = "Index";
}
 
<h2>Pivot</h2>
@(Html.Kendo().PivotConfigurator()
    .Name("configurator")
    .HtmlAttributes( new { @class = "hidden-on-narrow"})
    .Height(570)
)
 
@(Html.Kendo().PivotGrid<TelerikMVCStudy.Domain.Dailyforecast_view>()
    .Name("pivotgrid")
    .HtmlAttributes(new { @class = "hidden-on-narrow" })
    .Configurator("#configurator")
    .Height(579)
    .BindTo(Model)
    .DataCellTemplateId("dataCellTemplate")
    .ColumnHeaderTemplateId("headerTemplate")
    .RowHeaderTemplateId("rowHeaderTemplate")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Schema(schema => schema
            .Model(m => m.Field("Utility", typeof(string)).From("Utility"))
            .Cube(cube => cube
                .Dimensions(dimensions =>
                {
                    dimensions.Add(model => model.Portfolio).Caption("Portfolio");
                    dimensions.Add(model => model.Utility).Caption("All Utility");
                    dimensions.Add(model => model.CalendarDate.ToShortDateString()).Caption("CalendarDate");
                })
                .Measures(measures =>
                {
                    measures.Add("sum").Format("{0:N4}").Field(model => model.MMBtu).AggregateName("sum");
                    measures.Add("max").Field(model => model.CalendarDate).AggregateName("max");
                })
        )
        )
        .Columns(columns =>
        {
            columns.Add("Utility").Expand(true);
        })
        .Rows(rows => rows.Add("CalendarDate").Expand(true))
        .Measures(measures => measures.Values("sum"))
        .Events(e => e.Error("onError"))
         
    )
)
<script>
    function onError(e) {
        alert("error: " + kendo.stringify(e.errors[0]));
    }
</script>
<script id="dataCellTemplate" type="text/x-kendo-tmpl">
    # var columnMember = columnTuple ? columnTuple.members[0] : { children: [] }; #
    # var rowMember = rowTuple ? rowTuple.members[0] : { children: [] }; #
    # var value = (dataItem.value instanceof Date) ? kendo.toString(dataItem.value,"d") : kendo.toString(kendo.parseFloat(dataItem.value) ||"N/A", "N4"); #
 
    # if (columnMember.children.length || rowMember.children.length) { #
        <em  style="color: red">#: value # (total)</em>
    # } else { #
        #: value #
    # } #
</script>
 
<script id="headerTemplate" type="text/x-kendo-tmpl">
    # if (!member.children.length) { #
        <em>#: member.caption #</em>
    # } else { #
        #: member.caption #
    # } #
</script>
<script id="rowHeaderTemplate" type="text/x-kendo-tmpl">
    # if (!member.children.length) { #
         <em>#: member.caption #</em>
    # } else { #
         #: member.caption #
    # } #
</script>
 
<style>
    #pivotgrid
    {
        display: inline-block;
        vertical-align: top;
        width: 70%;
    }
 
    #configurator
    {
        display: inline-block;
        vertical-align: top;       
    }
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>

Georgi Krustev
Telerik team
 answered on 17 Feb 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
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
DateTimePicker
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
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?