Telerik Forums
UI for ASP.NET MVC Forum
1 answer
677 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
157 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
225 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
122 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
249 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
368 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
243 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
2 answers
226 views
Hi,
I seem to be having an issue with client side events and lazy loading.
I have a tv on my layout view as follows:

@Html.Kendo().TreeView().Name("MainMenu").DataSource(dataSource => dataSource
.Read(read => read.Action("Index", "MainMenu"))).DataTextField("MenuText").DataUrlField("Url")

I have code on the server that correctly returns the parts of the tv as necessary.
All is well. My tree displays. When I click on  a parent node a server call is made and the children are show.
Great.

Now the trouble.
I add the following javascript  and when I click on a node I get the alert just fine. However, once, I click ok, I get an error in kendo.all.min.js. Attached is a screenshot of the error.

Thanks ... Ed


function _LayoutOnLoad()
{
    $(function ()
    {
        $("#MainMenu").kendoTreeView({
            select: OnMainMenuSelect
        })
    });
}
function OnMainMenuSelect(e)
{
    alert("Selecting: " + e.node.textContent);
}
Randy Hompesch
Top achievements
Rank 1
 answered on 01 Aug 2013
1 answer
272 views
I have an OData datasource of UserGroups, called with /api/UserGroups?$expand=USERS.  In Fiddler, I see 1..* users in each user group.

I would like to know how to display this in a data grid as a part of a details view per group.  I would like to accomplish this with data set, rather than making a secondary call to something like /api/Users?$filter....  as the data is all there in the primary data set.


Here is my main data set - I was initially working with the detailInit() to make a secondary call, but as I mentioned, this isn't necessary:

$(function () {
    var dataSource = new kendo.data.HierarchicalDataSource({
        type: "odata",
        transport: {
            read: {
                // See http://www.odata.org/documentation/odata-v2-documentation/uri-conventions/ for OData URI conventions
                // OData: ~/api/Users?$inlinecount=allpages&top=2
                // OData: ~/api/Users?$inlinecount=allpages - includes odata.count
                // OData: inline filtering: ~/api/Users?$filter=USERNAME eq 'asgro'
                // to include hierarchical data, use the OData /api/UserGroups?$expand=USER
                // To reduce the payload sice, the query ~/api/UserGroups will only include the USERGROUP entities, and not any navigation property content
                 
 
                url: "/api/UserGroups?$expand=USERS",
                dataType: "json"                                // the default result type is JSONP, but WebAPI does not support JSONP
            },
            parameterMap: function (options, type) {
                // this is optional - if we need to remove any parameters (due to partial OData support in WebAPI
                var parameterMap = kendo.data.transports.odata.parameterMap(options);
 
                //delete parameterMap.$inlinecount;               // remove inlinecount parameter
                //delete parameterMap.$format;                    // remove format parameter
 
                return parameterMap;
            }
        },
        schema: {
            data: function (data) {
                return data.value;
            }
            ,
            total: function (data) {
                console.log("count: " + data["odata.count"]);
                return data["odata.count"];
            },
            model: {
                fields: {
                    ID: { type: "string" },
                    NETWORKID: { type: "string" },
                    GROUPNAME: { type: "string" },
                    DESCRIPTION: { type: "string" },
                    DATECREATED: { type: "date" },
                    DATEMODIFIED: { type: "date" },
                    //ROLESSTRING: { type: "string" },
                    SUBSCRIPTIONSTRING: { type: "string" }
                }
            }
        },
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        detailTemplate: kendo.template($("#template").html()),
        detailInit: function(e) {
            console.log('detailInit');
            // detailInit,
        },
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        }
    });

The template is as follows:

<body>
    <div>
        User Groups:
        <div id="grid"></div>       
         
        <script type="text/x-kendo-template" id="template">
            <div class="tabstrip">
                <ul>
                    <li class="k-state-active">
                        Users
                    </li>
                </ul>
                <div>
                    <div class='user-details'>
                        <ul>
                            <li><label>User Name:</label>#= USERS.USERNAME #</li>
                            <li><label>First Name:</label>#= USERS.FIRSTNAME #</li>
                            <li><label>Last Name:</label>#= USERS.LASTNAME #</li>
                        </ul>
                    </div>
                </div>
            </div>
        </script>
         
 
    </div>
</body>

I used USERS.USERNAME as when $expand=USERS, the USERS collection is included.

Thanks.


Petur Subev
Telerik team
 answered on 01 Aug 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
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
Iron
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?