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.

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). 

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.

 

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:

 

 

 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?

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()

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.

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

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.

Hello,

I have a problem. I have three Kendo components that have the same code, but only one of them is clickable.

Here is the code : 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.Collections.Generic.List<System.Collections.Generic.List<IntranetMVC.Models.Vehicule>>>" %>

<script src="<%= Url.Content("~/Scripts/Entrees_Sorties/VehiculesEnAttente.js") %>" type="text/javascript"></script>
<!-- Description : Vue partielle affichant la grille des vehicules attendus sur le site -->
<br />
<div class="tabKendo" style="text-align:center">
    <!-- GRILLES DE DONNES -->
    <table style="font-size:80%; border-collapse : collapse; border-spacing : 2px; ">
        <tr>
            <td>
                <h3>Hier</h3>
            </td>
             <td>
                <h3>Aujourd'hui</h3>
            </td>
             <td>
               <h3>Demain</h3>
            </td>
        </tr>
        <tr>
            <td>
                <!-- ----------- GRILLE POUR LES VEHICULES D'HIER ---------->
            <% Html.Kendo()
                    .Grid<IntranetMVC.Models.Vehicule>()
                    .Name("Gd_Hier")
                    .BindTo(Model[0])
                    .Events(e => e
                      .Change("OnVehiculeArrive_va"))
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.sHeurePrevue).Width(50).Title("Heure");                        
                        columns.Bound(c => c.NomTransporteurPrevu)
                               .Width(100)
                               .ClientTemplate("#= data.NomTransporteur.substring(0,14) #")
                               .Title("Transporteur");
                    })
                    .HtmlAttributes(new { style = "height: 464px; width: 180px; margin:5px; font-size:130%" })
                    .Sortable()
                    .Selectable(selectable => selectable
                                            .Mode(GridSelectionMode.Single))
                    .DataSource(dataSource => dataSource
                                                        .Ajax()
                                                        .ServerOperation(false)
                                                         .Sort(sort => sort.Add("sHeurePrevue").Ascending()))                                                         
                    .Render();
                                                        
            %>
            </td>
            <td>

                <!-- ----------- GRILLE POUR LES VEHICULES DE TODAY ---------->
            <% Html.Kendo()
                    .Grid<IntranetMVC.Models.Vehicule>()
                    .Name("Gd_Today")
                    .BindTo(Model[1])
                    .Events(e => e
                      .Change("OnVehiculeArrive_va"))
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.sHeurePrevue).Width(50).Title("Heure");
                        columns.Bound(c => c.NomTransporteurPrevu)
                               .Width(100)
                               .ClientTemplate("#= data.NomTransporteur.substring(0,14) #")
                               .Title("Transporteur");                        
                    })
                    .HtmlAttributes(new { style = "height: 464px; width: 180px; margin:5px; font-size:130%" })
                    .Sortable()
                    .Selectable(selectable => selectable
                                            .Mode(GridSelectionMode.Single))
                    .DataSource(dataSource => dataSource
                                                        .Ajax()
                                                        .ServerOperation(false)
                                                        .Sort(sort => sort.Add("sHeurePrevue").Ascending()))
                   .Render();                                                        
            %>
            </td>
            <td>
                <!-- ----------- GRILLE POUR LES VEHICULES DE DEMAIN ---------->
            <% Html.Kendo()
                    .Grid<IntranetMVC.Models.Vehicule>()
                    .Name("Gd_Demain")
                    .BindTo(Model[2])
                    .Events(e => e
                      .Change("OnVehiculeArrive_va"))
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.sHeurePrevue).Width(50).Title("Heure");                       
                        columns.Bound(c => c.NomTransporteurPrevu)
                               .ClientTemplate("#= data.NomTransporteur.substring(0,14) #")
                               .Width(100)
                               .Title("Transporteur");
                    })
                    .HtmlAttributes(new { style = "height: 464px; width: 180px; margin:5px; font-size:130%" })
                    .Sortable()
                    .Selectable(selectable => selectable
                                            .Mode(GridSelectionMode.Single))
                    .DataSource(dataSource => dataSource
                                                        .Ajax()
                                                        .ServerOperation(false)
                                                        .Sort(sort => sort.Add("sHeurePrevue").Ascending()))
                    .Render();
            %>
            </td>
        </tr>
    </table>
</div>

 

I don't have any idea why, but only the first component is clickable (the one under "hier" on the screenshot I joined). 

 

 

Hi,

I'm trying to create a dropdown into a gridview, and I have tried lots op things.
the thing I'm stuck with now is this error

"The call is ambiguous between the following methods or properties: 'Kendo.Mvc.UI.Fluent.DropDownListBuilder.BindTo(System.Collections.Generic.IEnumerable<Kendo.Mvc.UI.DropDownListItem>)' and 'Kendo.Mvc.UI.Fluent.DropDownListBuilder.BindTo(System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem>)'"

in the Bindto I have a list of items which I load from the viewbag.

But I can't get pass this error.
do U need to unreference something?
thank you.