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

Just want to share this in case anyone else runs into it.  When a Kendo UI grid is bound to a SignalR datasource and Batch = true for that datasource, the server will begin responding with the following during create/update/destroy method calls:

{"I":"1","E":"There was an error invoking Hub method 'tranimporterrorshub.update'."}

 

This is because the automatically generated JSON is in an incorrect format to bind to your hub methods.  

Example hub method: 

public class ExampleHub : Hub
{
    public DataSourceResult Read(DataSourceRequest request)
    {
        // read operations here
    }
 
    public async Task Update(IEnumerable<ExampleViewModel> rows)
    {
        foreach (var row in rows)
        {
            // Update operations here
        }
    }
 
    public async Task Destroy(IEnumerable<ExampleViewModel> rows)
    {
        foreach (var row in rows)
        {
            // Delete operations here
        }
    }
}

 

When the JSON for create/update/destroy is generated, it is something like this:

data:{"H":"exampleshub","M":"update","A":[{"models":[{"Id":1,"Example":"Test"},{"Id":3,"Example":"Test2"}]}],"I":2}

 

If you look closely, the "A" property in the JSON starts with a "[", which indicates an array, even though there is NOT an array of models.  ASP.NET MVC SignalR does not support a call with the "data" being an array (must be an object or basic type) and the following exception is thrown:

Exception: Exception thrown: 'Newtonsoft.Json.JsonSerializationException' in Newtonsoft.Json.dll ("Cannot deserialize the current JSON object (e.g. {"name":"value"}) into type 'System.Collections.Generic.IEnumerable`1[ExampleViewModel]' because the type requires a JSON array (e.g. [1,2,3]) to deserialize correctly.
To fix this error either change the JSON to a JSON array (e.g. [1,2,3]) or change the deserialized type so that it is a normal .NET type (e.g. not a primitive type like integer, not a collection type like an array or List<T>) that can be deserialized from a JSON object. JsonObjectAttribute can also be added to the type to force it to deserialize from a JSON object.
Path 'models', line 1, position 10.").

 

I found a fix for this.  Simply add this function and wire it up to the parameterMap property for your DataSource:

function datasourceParameterMap(data, type) {
    if (type !== 'read' && data.models) {
        return data.models;
    } else {
        return data;
    }
}

 

Hope this helps someone else so that they don't have to figure it out the hard way.

Keith
Top achievements
Rank 1
 answered on 26 Jun 2017
3 answers
251 views

Hello,

I'm using the scheduler in timeline month view (albeit with a custom view to just show 7 days) and I want to freeze the top row.

Here is my grid:

@(Html.Kendo().Scheduler<TEAMSV2.Models.WeekViewSchedulerDTO>()
    .Name(Section + TabName + SubTabName)
    .Date(new DateTime(ChosenDate.Year, ChosenDate.Month, ChosenDate.Day))
    .StartTime(new DateTime(ChosenDate.Year, ChosenDate.Month, ChosenDate.Day, 00, 00, 00))
    .EndTime(new DateTime(ChosenDate.Year, ChosenDate.Month, ChosenDate.Day, 23, 59, 59))
    .Timezone("Etc/UTC")
    .MajorTick(1440)
    .Height(500)
    .Views(v =>
    {
        v.CustomView("MyCustomTimelistView");
    })
    .Group(group => group.Resources("Employees").Orientation(SchedulerGroupOrientation.Vertical))
    .Resources(r =>
    {
        r.Add(m => m.Employees)
            .Title("Employees")
            .Name("Employees")
            .Multiple(true)
            .DataTextField("Text")
            .DataValueField("Value")
            //.DataColorField("Color")
            .DataSource(d => d
                .Read(rd =>
                {
                    rd.Action("GetWeekViewResources", "TeamsV2").Type(HttpVerbs.Post);
                })
            );
    })
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.EventId);
            m.Field(f => f.Title).DefaultValue("No title");
        })
        .Read("GetWeekViewSchedulerData", "TeamsV2")
    )
    .Events(e => e
        .DataBinding(Section + TabName + SubTabName + "SchedulerDatabinding")
        .DataBound(Section + TabName + SubTabName + "SchedulerDatabound")
    )
)

 

And here is the custom view:

<script>
    var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
        options: {
            name: "MyCustomTimelistView",
            title: "Timeline Month",
            selectedDateFormat: "{0:D} - {1:D}",
            selectedShortDateFormat: "{0:d} - {1:d}",
            majorTick: 720,
            numberOfDays: 7,
            dateHeaderTemplate: "<div class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd MMM yyyy')#</div>"
        },
        name: "MyCustomTimelistView",
        calculateDateRange: function () {
            //create the required number of days
 
            var start = this.options.date,
                //  start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                idx, length,
                dates = [];
 
            for (idx = 0, length = this.options.numberOfDays; idx < length; idx++) {
                dates.push(start);
                start = kendo.date.nextDay(start);
            }
            this._render(dates);
        },
        previousDate: function () {
            var date = new Date(this.startDate());
 
            date.setDate(date.getDate() - this.options.numberOfDays);
 
            return date
        }
    });
</script>

 

The "Resources" for this scheduler are a list of employees but the top one is hard-coded as "Unassigned" for when an event is not assigned to an employee.  I need this row of unassigned events to always be visible when the rest of the employees are scrolled (as the scheduler is set to 500px).

Any ideas?

Thanks,

Mark.

Ivan Danchev
Telerik team
 answered on 26 Jun 2017
2 answers
542 views

I have a chart, which uses the group function, in order to display a dynamic number of series. Unfortunately, in order for this to work properly, each series must contain a record for each category (in this case, month). If not, columns are displayed in the incorrect category, and the chart has missing x-axis labels.

However, I also want each column to have a label showing the value, but the chart also shows labels for the 0 value items.

How can I remove these zero labels (or show dynamic series without adding the values in, in the first place!)?

 

The chart definition is:-

@(Html.Kendo().Chart<WLI_Payments.Models.SummaryChartItem3>()
   .Name("SummaryDirectorateChartThree")
     
    .Title(ti => ti.Text("Requests by Month and Type").Font("11px Arial"))
   .Theme("bootstrap")
   .Legend(l => l.Visible(true).Position(ChartLegendPosition.Bottom))
   .ChartArea(c => c.Background("transparent").Height(250))
   .DataSource(ds => ds.Read(read => read.Action("GetRequestTypeData", "Dashboard"))
   .Group(g => g.Add(v => v.RequestTypeDescription))
   .Sort(s =>
   {
       s.Add("Year").Ascending();
 
   }
 
 
   )
   )
       .Series(series =>
       {
           series.Column(model => model.YIntValue).Name("#=group.value#").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial"));
       })
       .CategoryAxis(axis => axis
           .Categories(model => model.Month)
           .Labels(labels => labels.Rotation(-45).Font("10px Arial"))
           .MajorGridLines(lines => lines.Visible(false))
 
 
       )
       .ValueAxis(axis => axis.Numeric()
 
          .Labels(labels => labels.Font("10px Arial"))
 
 
 
      )
       .Tooltip(tooltip => tooltip
           .Visible(true)
        
        .Background("White")
          .Template("#=tooltipTemplate3(dataItem)#")
       )
 
            .Pannable(p => p.Lock(ChartAxisLock.Y))
 
       .Zoomable(zoomable => zoomable
           .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
           .Selection(selection => selection.Lock(ChartAxisLock.Y))
       )
 
 
 
           )

Thanks

AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 23 Jun 2017
2 answers
948 views

Trying without success to alter the width of the button rendered in a grid using client template -

columns.Template(c => { }).ClientTemplate("<a class='k-button k-button-icontext k-grid-ManageCompany' href='" + Url.Action("ManageCompanies") + "/#= CompanyId #'" + ">#= Name #</a>").HtmlAttributes(new { @class = "customGridRowStyle", title = "Edit Company Profile" }).Width(50); //.Filterable(filterable => filterable.UI("nameFilter"));

 

When rendered, the code is as follows -

<td class="customGridRowStyle" title="Edit Company Profile" role="gridcell"><a class="k-button k-button-icontext k-grid-ManageCompany" href="/Portal/Search/ManageCompanies/344"><span class="k-icon k-i-edit"></span></a></td>

 

Min-width seems to be defined as :

k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 64px;
}

I've tried seeting the style within the page itself as -

.k-button .k-button-icontext .k-grid-ManageCompany {
            min-width: 30px;
            width: 30px;
        }

 

But it seems to have no effect.

Ive also tried adding the style to the HtmlAttributes with no success either.

Any help appreciated.

Terry.
.

Terry
Top achievements
Rank 1
 answered on 23 Jun 2017
7 answers
845 views

I have a main page "JLO" that accepts user input using a kendo text box.  User then clicks a button that is handled by a jquery script that opens the partial page.  I am stuck on passing the param [textbox value] to the partial page and rendering the grid.

this is my basic code.

main view

<div id="userinput" class="row">
    <ul class="userrentry">
        <li>
            @Html.Label("User ID")
            @Html.Kendo().TextBox().Name("searchuserid")
        </li>
        <li>
            @Html.Kendo().Button().Name("findUser").Content("Search for Sessions").HtmlAttributes(new { @class = "k-button" })
        </li>
    </ul>
</div>
<div id="sessionsfound" class="row grid-centered" style="display:none">
</div>
<div id="success" class="row grid-centered" style="display:none">
</div>
<script type="text/javascript">
 
    $('#findUser').click(function () {
      
        var userid = $('#searchuserid').val();
        $("#userinput").css("display", "none");
        $('#sessionsfound').css("display", "block");
        //alert(userid)
        $("#sessionsfound").load('@Url.Action("getSessionsView", "Home", new {userid = userid })');
    })
 
</script>

 

Partial view for Grid

@model string
<div>
    @(Html.Kendo().Grid<Jlo4MVC.Models.SessiondataDTO>()
       .Name("VSM_Grid")
      .AutoBind(false)
      .DataSource(data => data
      .Ajax()
      .Model(model =>
        {
          model.Id(m => m.id);
         })
           .Read(read => read.Action("sessions_read", "Home", new { userid = Model }))
          .Data("readuser")
           )
 
           .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
        .Columns(c =>
            {
                c.Bound(i => i.id).Title("ID").Width(10);
                c.Bound(i => i.farmName).Title("Farm").Width(25);
                c.Bound(i => i.domainName).Title("Domain").Width(25);
                c.Bound(i => i.applicationName).Title("App Name").Width(75);
                c.Bound(i => i.serverName).Title("Server").Width(25);
                c.Bound(i => i.sessionID).Title("Session ID").Width(10);
            })
    ))
 
 
</div>
 
<div class="kbutton-centered">
    @Html.Kendo().Button().Name("endselected").Content("End Sessions").HtmlAttributes(new { @class = "k-button" })
</div>
 
<script type="text/javascript">
    debugger;
    var userID = @Model ;
    var grid = $("#VSM_Grid").data("kendoGrid");
    grid.dataSource.read();
 
    function readuser() {
        debugger
        return {
 
            userid: userID
        };
    }
 
</script>
Georgi
Telerik team
 answered on 23 Jun 2017
1 answer
129 views

I’m using the telerik mvc grid with a filterrow as in this demo http://demos.telerik.com/aspnet-mvc/grid/filter-row

My column is defined like below, using a contains suggestion operator

columns.Bound(p => p.ArticleNumber).Filterable(ftb => ftb.Cell(cell => cell.SuggestionOperator(FilterType.Contains)));

The problem that sometimes occurs is when a user enter a search value, the first item is automaticcaly selected in the dropdown. (see screenhot)
This causes the problem, if the user hits enter, he will search on 101250xxxx where his intention was to search on values containing 10125.
How can it be avoided that the first item is automatically selected?

Viktor Tachev
Telerik team
 answered on 23 Jun 2017
1 answer
375 views

Looking to implement a combination of functionality while using the Grid in InLine mode. Thus far searches have not brought up directly applicable examples or details on the event lifecycles for the grid.

Is there anywhere that shows an event lifecycle for the Grid?

Looking to know what events are available to work with (Grid/javascript/JQuery all valid) for controlling what happens when a row enters into EditMode AND if a new row is Added (Which therefore is automatically opened into edit mode but no datasource command has fired yet.

The functionality looking to implement:

  1. Setting which cell in the row focus is set to when the row opens up int InLine edit mode
  2. Selecting all contents of cell clicked that is in the row in edit mode
  3. When a new row is added (Automatically opened); set the following column dropdown values to some defaults. This is so it is visually already selected for the user and they can still change it if need be.

Columns:

c.ForeignKey(vm => vm.LocationNumber, (System.Collections.IEnumerable)ViewData["LocationsList"], "LocationNumber", "Drop_Text").HtmlAttributes(new { onchange = "triggerDropChange(this);" }).Width(200).Hidden(Model.Locations_ColumnInitHidden); //Display UIHint in Dropdown through LocationsList ClientTemplate with just the LocationNumber value behind
                                                                                                                                                                                                                                                                //c.ForeignKey(vm => vm.State, (System.Collections.IEnumerable)ViewData["StateList"], "Value", "Text").Width(120);
c.Bound(vm => vm.State).HtmlAttributes(new { @class = "locationLinkedState" }).Width(80);

 

The Datasource Create command already can set a default value if left blank; though that would not matter to a user till they sent the row through by clicking on the row Update command. So the aim in 3. is to have the default already selected for the user.

 

Any information on the available event lifecycles and the implementation of the mentioned functionality will be greatly appreciated.

Konstantin Dikov
Telerik team
 answered on 22 Jun 2017
3 answers
3.1K+ views

How can I reset a Kendo Upload control based upon a button click event?

 

Dimiter Madjarov
Telerik team
 answered on 22 Jun 2017
1 answer
7.6K+ views
Hi, I want to set a default filter value for a column on the grid but only if the application is not already persisting state.  My question is how do I set a filter programmatically in this scenario?  There is a Boolean column called "Enabled" that I am trying to default to TRUE when no pervious grid state can be found on client.

var localStorageKey = "UserAdministrationUserGridOptions";
 
$(function () {
    // pull client grid state and apply to grid (filters, current page, sorts, etc).
    setGridOptions();
});
 
function setGridOptions() {
    var options = localStorage[localStorageKey];
 
    if (options) {
        $("#UserAdministrationUserGrid").data("kendoGrid").setOptions(JSON.parse(options));
    }
    else
    {
    // set initial enabled filter to true
   // HOW DO I DO THIS IN JAVASCRIPT
    // server: .Filter(f => f.Add(m=> m.Enabled).IsEqualTo(true))
    }
}
Sam
Top achievements
Rank 1
 answered on 21 Jun 2017
6 answers
436 views

hello,

Recently I updated my Kendo version from 2014 to 2017 r2

I try to implemented the pdf export on my Scheduler but when I click on export I got a blank pdf file.

I have a view with style and script: 

<style>
    /*
        Use the DejaVu Sans font for display and embedding in the PDF file.
        The standard PDF fonts have no support for Unicode characters.
    */
    .k-scheduler {
        font-family: "DejaVu Sans", "Arial", sans-serif;
    }
 
    /* Hide toolbar, navigation and footer during export */
    .k-pdf-export .k-scheduler-toolbar,
    .k-pdf-export .k-scheduler-navigation .k-nav-today,
    .k-pdf-export .k-scheduler-navigation .k-nav-prev,
    .k-pdf-export .k-scheduler-navigation .k-nav-next,
    .k-pdf-export .k-scheduler-footer {
        display: none;
    }
</style>
 
<script src="@Url.Content("~/Scripts/pako.min.js")"></script>
 
<h1 class="titrePlanning">Planning Electro</h1>
@Html.Partial("ControlPanel")
<div class="wrapper">
    <div id="divScheduler">
        @(Html.Kendo().Scheduler<Ubaldi.Logisttique.PlanningRDV.Web.Controllers.EventViewModel>()
        .Name("scheduler")
        .DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/MM')#</span>")
        .Selectable(false)
        .Timezone("Etc/UTC")
        .Width(1200)
         .Pdf(pdf => pdf
            .FileName("Export_PlanningRDV.pdf")
            .ProxyURL(Url.Action("Pdf_Export_Save", "Scheduler"))
    )
    .Toolbar(t => t.Pdf())

 

- I also imported Deja Vus font in \Content\fonts\DejaVu

In my contoller:

public ActionResult Pdf_Export_Save(string contentType, string base64, string fileName)
{
    var fileContents = Convert.FromBase64String(base64);
 
    return File(fileContents, contentType, fileName);
}

 

I try with and without ProxyUrl and I'm getting the same issue.Do I miss something ?

Dimitar
Telerik team
 answered on 21 Jun 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?