Telerik Forums
UI for ASP.NET MVC Forum
8 answers
1.1K+ views
I can't find any detailed documentation on client-side events so I will just post my issues as they come up. I have several issues with the grid events.
  1. In the Telerik grid, there was an OnComplete event. What is the Kendo grid equivalent?
  2. In the Edit client event:
    1. How do you determine the mode (add or edit)? In the telerik grid it was simply e.mode.
    2. How do you determine if the cancel click event on the edit form came from the edit or insert mode? In the Telerik grid I could do this:    
    $(e.form).find(".t-grid-cancel").click(function () {
 
    if (e.mode == "insert") {
       //do insert cancel cleanup code
    }
 
});

 
                3. What is the Kendo equivalent of this:                    

$(e.form).find(".t-grid").data("tGrid").ajaxRequest({ InventoryItemId: key });

 

    3. In the Save client event, what would be the equivalent of this code for Kendo?

e.values.inventoryItemId = key;

I think that is enough to start with..

Thanks in advance for any help!

suman
Top achievements
Rank 1
 answered on 02 Aug 2013
1 answer
289 views
I have an editor on a razor page:

@(Html.Kendo().EditorFor(model => model.Message.MessageText)
            .Name("Message.MessageText")
            .HtmlAttributes(new { style = "height:550px" })
            .Tools(tools => tools
                .Clear()
                .Bold()
                .Italic()
                .Underline()
                .Strikethrough()
                .FontColor()
                .BackColor()
                .InsertOrderedList()
                .InsertUnorderedList()
                .Indent()
                .Outdent()
                .CreateLink()
                .Unlink()
                )
            )
I have updated to the latest version of Kendo. In the release notes, it states as a new feature, "Ability to show the editor toolbar on focus". How can I do this?

Thanks,
Nick
Dimo
Telerik team
 answered on 02 Aug 2013
1 answer
710 views
I'm having a problem adding a child record in my hierarchical grid.  It won't pass over the HeaderId from the parent in the grid.

Here's the controller action:

@(Html.Kendo().Grid<BillHeader>()
 
    .Name("BillHeaders")
    .Columns(columns =>
    {
        columns.Bound(h => h.BillHeaderId);
        columns.Bound(h => h.Category);
        columns.Bound(h => h.Description);
        columns.Bound(h => h.Amount);
    })
    .Pageable()
    .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Row))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(6)
        .Events(events => events.Error("error_handler"))
        .Read(read => read.Action("BillHeaders_Read", "Bill"))
    )
    .Events(events => events.DataBound("dataBound"))
    .ClientDetailTemplateId("BillDetails")
 
      )
 
<script id="BillDetails" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<BillDetail>()
          .Name("BillDetails_#=BillHeaderId#")
          .Columns(columns =>
          {
              columns.Bound(d => d.BillHeaderId).Width(50);
              columns.Bound(d => d.BillDetailId).Width(70);
              columns.Bound(d => d.Category).Width(70);
              columns.Bound(d => d.Description).Width(150);
              columns.Bound(d => d.Amount).Width(80);
              columns.Command(command =>
              {
                  command.Edit();
                  command.Destroy();
              }).Width(75);
          })
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(10)
              .Model(model =>
              {
                  model.Id(d => d.BillDetailId);
                  model.Field(d => d.BillDetailId).Editable(false);
              })
            .Events(events => events.Error("error_handler"))
            .Read(read => read.Action("BillDetails_Read", "Bill", new { billHeaderId = "#=BillHeaderId#" }))
            .Update(update => update.Action("BillDetail_Update", "Bill"))
            .Create(create => create.Action("BillDetail_Create", "Bill", new { billHeaderId = "#=BillHeaderId#" }))
            .Destroy(destroy => destroy.Action("BillDetail_Destroy", "Bill")))
           
          .Pageable()
          .ToolBar(tools => tools.Create())
          .ToClientTemplate()
          )
</script>

And here's the view.

[AcceptVerbs(HttpVerbs.Post)]
       public ActionResult BillDetail_Create(BillDetail billDetail, int billHeaderId)
       {
           if (billHeaderId == 0)
           {
               ModelState.AddModelError("billHeaderID", "add bill header first");
           }
           if (billDetail != null && ModelState.IsValid)
           {
               var target = new BillDetail
               {
                   Category = billDetail.Category,
                   Description = billDetail.Description,
                   Amount = billDetail.Amount,
                   BillHeaderId = billHeaderId,
                   BillDetailId = SessionBillDetails.Max(d => d.BillDetailId) + 1
               };
 
               //Get next Id in sequence
 
               billDetail.BillDetailId = target.BillDetailId;
 
               SessionBillDetails.Add(target);
           }
 
           return Json(new[] { billDetail }.ToDataSourceResult(new DataSourceRequest(), ModelState));
       }

Can anyone spot an issue, or am I trying to do something that isn't possible?
Thanks.


edited: to add attachment example.
David
Top achievements
Rank 1
 answered on 02 Aug 2013
1 answer
1.3K+ views
I have built an MVC Kendo Helper Grid that needs to display something other than the first page from the DataSource. I set the AutoBind to false, and ServerOperation to true. 

I then have some javascript code which calls the page() function with the number 2, however during this call the controller still receives a  1. What am I doing wrong, or is there another way to set the initial page? Here is the code:

                @(Html.Kendo().Grid<SF_SatAppsMVC4.Models.MD_GetUpcomingMTCEventsResult>().Name("gridUpcomingMTC")
                    .HtmlAttributes(new { @class = "clickableGrid" })
                    .AutoBind(false)
                    .DataSource(datasource => datasource
                    .Ajax()
                    .ServerOperation(true)
                    .PageSize(5)
                    .Read(read => read.Action("GetUpcomingEvents", "ControllerCenter", new { locationID = @ViewBag.locationID })))
                    .Pageable()
                    .Columns(cols =>
                    {
                        cols.Bound(p => p.eventDate).Format("{0:dd-MMM}").Title("Date");
                        cols.Bound(p => p.Presenter);
                     }))

    
<script>
    $(function () {
        debugger;
        $('#gridUpcomingMTC').data("kendoGrid").dataSource.page(2);
    })
</script>
Dimiter Madjarov
Telerik team
 answered on 02 Aug 2013
1 answer
176 views
I see columnResizeHandleWidth in the online javascript documentation, but I can't seem to find it in the MVC framework. I have 2013.2.716 installed.
Dimo
Telerik team
 answered on 02 Aug 2013
2 answers
260 views
The scheduler implementation of the datasource differs from the usage in most of the other Kendo UI widgets.  It doesn't seem to have a data property, which can be used to pass parameters to the controller , to enable custom filtering to be done on the server.

I would like to display two sets of data on one scheduler, and control what is displayed from a drop-down list. This is easy to accomplish with a grid e.g.:-
.DataSource(dataSource=>dataSource
        .Ajax()
        .PageSize(20)
        .Model(m=>
            {
                m.Id(p => p.LogID);
            })
             
         
        .Read(read=>read.Action("GetCRISList","NonDALoads")
        .Data("srchLoad")
        )
        )
        .Pageable(p=>p.Refresh(true))
         .Sortable()
        .Filterable()
 
 
 
  <script type="text/javascript">
 
        var srch = 28;
 
        function selectionChange() {
 
            var dropdownlist = $("#loadDDL").data("kendoDropDownList");
 
            var dataItem = dropdownlist.dataItem();
 
            srch = dataItem.LoadID;
 
            //refresh Grid
            //$("#Grid").data("kendoGrid").dataSource.read();
 
            $('#Grid').data().kendoGrid.dataSource.page(1);
 
        }
 
    function srchLoad() {
        return {
 
 
            ID: srch
        };
    }
 
        </script>

However, I don't seem able to do this with the scheduler.  All I can see is a filter property, but since the data is coming from two different tables, handling the it this way is undesirable.

Currently I have two scheduler widgets in a tab control, but this causes some display issues, and is a bit clunky.

Thanks
AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 02 Aug 2013
1 answer
144 views
Hello,
I'm almost at loading data from the api controller. I've got a controller that returns Json from a IEnumerable<Utenti> (POCO object)

I got this exception

Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1502: The best overloaded method match for 'Kendo.Mvc.UI.Fluent.WidgetFactory.Grid(System.Data.DataTable)' has some invalid arguments

Source Error:

Line 7: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
Line 8:
Line 9: <% Html.Kendo().Grid(Model)
Line 10: .Name("Grid")
Line 11: .AutoBind(true)


my aspx is

  <% Html.Kendo().Grid(Model) //
    .Name("Grid")
    .AutoBind(true)
    //.Columns(columns =>
    //{
    //    columns.Bound(x => x.IDUtente);
    //    columns.Bound(x => x.Nominativo);
    //    columns.Bound(x => x.Societa);
    //    columns.Bound(x => x.Filiale);
    //    columns.Bound(x => x.Ruolo);

    //    //columns.Bound(p => p.).Groupable(false);
    //    //columns.Bound(p => p.ProductName);
    //    //columns.Bound(p => p.UnitPrice);
    //    //columns.Bound(p => p.UnitsInStock);
    //})
        .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read =>
            {
                read.Action("GetListaUtenti", "Administration");
            })
        ).Render();
    %>

My controller is

 [HttpPost]
         public ActionResult GetListaUtenti([DataSourceRequest] DataSourceRequest request)
        {
         //   if (!System.Web.HttpContext.Current.User.Identity.IsAuthenticated) throw new SecurityExeption();

            DataAccessAdministration da = new DataAccessAdministration(Global.IDApplication, IDIstituto);

            int idUser = 185560;
            var res = da.GetListaUtenti(idUser);
            return Json(res);
        }

And the Utente item is of that type

 [DataContract]
    public class Utente
    {
        [DataMember]
        public int IDIstituto { get; set; }

        [DataMember]
        public int IDDipendente { get; set; }

        [DataMember]
        public string IDUtente { get; set; }

        [DataMember]
        public string Nominativo { get; set; }

        [DataMember]
        public string Filiale { get; set; }

        [DataMember]
        public string Societa { get; set; }

        [DataMember]
        public string Ruolo { get; set; }

        [DataMember]
        public string Profilo { get; set; }

        [DataMember]
        public string Funzioni { get; set; }

        [DataMember]
        public string Stato { get; set; }

        [DataMember]
        public int IDStato { get; set; }

        [DataMember]
        public int IDFunzione { get; set; }

        [DataMember]
        public int IDProfilo { get; set; }

        [DataMember]
        public Guid? SFGuid { get; set; }
    }

What should I put in the aspx in order to get data loaded?
Thanks

Dimo
Telerik team
 answered on 01 Aug 2013
1 answer
265 views
Hello,

I currently have my resources being retrieved from an action on my controller, however I want to be able to refresh the resources according to a filter (too many rooms to display all at once)

Using the code below I am able to update the datasource, but I can't find a way to refresh the scheduler itself to display the new resources.

Is there a way to do this without doing a full page post?
$('#BookingGrid').data().kendoScheduler.resources[0].dataSource.read()
Ken
Top achievements
Rank 1
 answered on 01 Aug 2013
3 answers
399 views
Hi,

In my chart, I have the chart axis labels and chart datapoint labels as DateTime objects.  I've been browsing around for a solution to this for quite some time now but I was unable to find a solution to this problem.  My DateTime values from the MVC application are of Kind Utc.  I'd like the kendo UI chart to automatically convert it to the user's browser's timezone.  It currently is showing the chart in UTC.

I tried this hoping it would work for Chart as well, but the rendering didn't display the updated Date values:
http://www.kendoui.com/code-library/mvc/grid/using-utc-time-on-both-client-and-server-sides.aspx

Other users have mentioned that their Chart automatically converted the DateTime but I'm not seeing that behavior:
http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/kendo-grid-automatically-converting-timezone.aspx
http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/chart/chart-is-converting-my-dates.aspx

I am using version '2013.1.514'

My definition of the chart is: (The bolded properties are DateTime objects of Kind Utc)
@(Html.Kendo().Chart(Model.DataPoints)
    .Name("chart")
    .Title("Unique User, Page View, and Session Counts")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .ChartArea(chartArea => chartArea
        .Background("transparent")
    )
    .Series(series =>
    {
        series.Line(model => model.UniqueUsers).Name("Unique Users");
        series.Line(model => model.Sessions).Name("Sessions");
        series.Line(model => model.PageViews).Name("Page Views");
    })
    .CategoryAxis(axis => axis
        .Date()
        .BaseUnit(axisBaseUnit)
        .Min(Model.View.Min)
        .Max(Model.View.Max)

        .Categories(model => model.DateTimeBucket)
        .MajorGridLines(lines => lines.Visible(true))
        .Labels(lbls => lbls
            .DateFormats(df => df.Hours(Model.View.AxisDateLabelFormat))
            .DateFormats(df => df.Days(Model.View.AxisDateLabelFormat))
            .DateFormats(df => df.Weeks(Model.View.AxisDateLabelFormat))
            .DateFormats(df => df.Months(Model.View.AxisDateLabelFormat))
            .DateFormats(df => df.Years(Model.View.AxisDateLabelFormat)))
    )
    .ValueAxis(axis => axis
        .Numeric().Labels(labels => labels.Format("{0:N0}"))
        .Line(line => line.Visible(false))
        .AxisCrossingValue(-10)
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0:N0}")
    )
)


Thanks,
Petur Subev
Telerik team
 answered on 01 Aug 2013
1 answer
264 views
After beating my head against a wall,  I have found a documentation issue with the new scheduler.

Without knowing what the RecurrenceRule field was for, I was populating this with display information for the user to view (through a template).
The Scheduler would render properly, however no "events" would display. There is no documentation for the ISchedulerEvent interface, only a snippet on the "Getting Started" page, which doesn't describe what each field does, or expects.

I created a new solution, and added the scheduler, created an event and found that the RecurrenceRule is not a user definable field, and has query-like syntax:

RecurrenceRule:FREQ=MONTHLY;BYMONTHDAY=30

Although the product is still in beta, it still needs to be documented, also will this ever be settable/ definable by the user?

also- why not throw an error if the field is not populated correctly/ does not compile? Rather than not showing the events altogether.
Vladimir Iliev
Telerik team
 answered on 01 Aug 2013
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
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
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?