We are currently evaluating the various different ways of binding our Backend code to the Kendo UI Grid control.

We have a Ajax enabled Controller and View which successfully uses a EditorTemplate to display a dropdown thus :


    @(Html.Kendo().Grid(Model)
                      .Name("EmployeesGrid")
                      .Columns(columns =>
                                   {
                                       columns.Bound(e => e.PersonFirstName).Width(230).Title("First Name");
                                       columns.Bound(e => e.PersonLastName).Width(230).Title("Last Name");
                                       columns.Bound(e => e.DOB).Width(120).Title("D.O.B");
                                       columns.Bound(e => e.Gender).Width(100).Title("Gender").EditorTemplateName("GenderDropDown");
                                       columns.Bound(e => e.SSN).Width(230).Title("SSN");
                                       columns.Command(command =>
                                                           {
                                                               if (ClaimsAuthorize.CheckAccess(Constants.Actions.Delete, Resources.Employee))
                                                               {
                                                                   command.Destroy();
                                                               }
                                                               if (ClaimsAuthorize.CheckAccess(Constants.Actions.Update, Resources.Employee))
                                                               {
                                                                   command.Edit();
                                                                   command.Custom("ViewDetails").Click("EmployeeDetails");
                                                               }
                                                           }).Width(260).Title("Commands");
                                   })
                      .Editable(editable => editable.Mode(GridEditMode.InLine))
                      .DataSource(datasource => datasource
                                                    .Ajax()
                                                    .ServerOperation(false)
                                                    .Model(model => model.Id(e => e.Id))
                                                    .Events(events => events.Error("error_handler"))
                                                    .Create(create => create.Action("CreateEmployee", "EmployeeAjax"))
                                                    .Read(read => read.Action("ReadEmployees", "EmployeeAjax"))
                                                    .Update(update => update.Action("EditEmployee", "EmployeeAjax"))
                                                    .Destroy(delete => delete.Action("DeleteEmployee", "EmployeeAjax"))
                      )
                      .ToolBar(tb =>
                                   {
                                       if (ClaimsAuthorize.CheckAccess(Constants.Actions.Create, Resources.Employee))
                                       {
                                           tb.Create();
                                       }
                                   })
                           .Pageable()
                      .Sortable()
                      .Scrollable()
                      .Filterable()
                      .Resizable(c => c.Columns(true))
                      .Reorderable(c => c.Columns(true))
                      .ColumnMenu()
                      .Groupable())


And the GendorDropDown partial view looks like:


    @(Html.Kendo().DropDownListFor(m => m)
      .Name("Gender")
      .DataTextField("Text")
      .DataValueField("Value")
      .BindTo(new List<SelectListItem>
                  {
                      new SelectListItem {Text = "Male", Value = "M"},
                      new SelectListItem {Text = "Female", Value = "F"}
                  }))


However if I try to setup a Server Bound View using the same template it fails to render the dropdown at all. The column appears but with a value but this disappears completely when attempting to edit the line.


The code for the failing view is below:


    @(Html.Kendo().Grid(Model)
                      .Name("EmployeesGrid")
                      .Columns(columns =>
                                   {
                                       columns.Bound(e => e.PersonFirstName).Width(230).Title("First Name");
                                       columns.Bound(e => e.PersonLastName).Width(230).Title("Last Name");
                                       columns.Bound(e => e.DOB).Width(120).Title("D.O.B");
                                       columns.Bound(e => e.Gender).Width(100).Title("Gender").EditorTemplateName("GenderDropDown");
                                       //columns.ForeignKey(e => e.Gender, new List<SelectListItem>
                                       //                                      {
                                       //                                          new SelectListItem {Text = "Male", Value = "M"},
                                       //                                          new SelectListItem {Text = "Female", Value = "F"}
                                       //                                      }, "Value", "Text").Width(100).Title("Gender");
                                       columns.Bound(e => e.SSN).Width(230).Title("SSN");
                                       columns.Command(command =>
                                                           {
                                                               if (ClaimsAuthorize.CheckAccess(Constants.Actions.Delete, Resources.Employee))
                                                               {
                                                                   command.Destroy();
                                                               }
                                                               if (ClaimsAuthorize.CheckAccess(Constants.Actions.Update, Resources.Employee))
                                                               {
                                                                   command.Edit();
                                                                   command.Custom("ViewDetails").Action("Details", "Employee").Text("Details");
                                                               }
                                                           }).Width(260).Title("Commands");
                                   })
                      .Editable(editable => editable.Mode(GridEditMode.InCell))
                      .DataSource(datasource => datasource
                      .Server()
                      
                              .Model(model => { model.Id(e => e.Id);
                                                  model.Field(e => e.DOB).DefaultValue(null);
                              })
                      .Create(create => create.Action("Create","Employee"))
                      .Read(read => read.Action("Index","Employee"))
                      .Update(update => update.Action("Edit","Employee"))
                      .Destroy(delete => delete.Action("Delete","Employee"))
                      )
                      .ToolBar(tb =>
                                   {
                                       if (ClaimsAuthorize.CheckAccess(Constants.Actions.Create, Resources.Employee))
                                       {
                                           tb.Create();
                                       }
                                   })
                      .Pageable()
                      .Sortable()
                      .Scrollable()
                      .Filterable()
                      .Resizable(c => c.Columns(true))
                      .Reorderable(c => c.Columns(true))
                      .ColumnMenu()
                      .Groupable())


It unclear to me reading the documentation to see if this is even supported or whether the partial view for the template needs to look different. Any help with this would be greatly appreciated and sorry for the masses of cut and paste code.

Hello again,
In the local examples for kendo ui with mvc there is no example with popup editing,and online is only in html/jquery.
is there a example you can send me for mvc,because as i saw,in the grid for Editable parameter there is a value for Mode,Popup and i would like to know how can i use it.

Thank you

i got it from here http://www.kendoui.com/forums/mvc/grid/how-to-set-grid-s-edit-popup-position.aspx
Thanks

Hello,

I was wondering how strict the 30 day trial period is for MVC?  Is it in anyway enforced by the included DLL to prevent use after 30 days?

I only ask, as I set it up in my dev environment earlier this week, got it working in one of my projects, but now I won't have time to work on any of my projects until January.

As I won't be using it over the Christmas period, it seems I won't get to actually trial this product if it prevents execution after 30 days.  (30 days seems a bit odd for a development library to be honest anyway.. couldn't you just limit it to only work on localhost, and not via any other domain / remote client ip?).


Thanks,
Shannon.

i am new to kendo ui, i have a requirement with grid, i want to display grid like attached image. 
is it possible with kendo grid? if this is possible, please provide some example code.
please see the attachment.

Is it possilbe to embed a List View into a Kendo Grid column via a client template?  
If it's possible how to you bind the List view to the Permmisions list? (Permissions being an IEnumberable<PermissionModel>) 

@(Html.Kendo().Grid<RoleModel>()
    .Name("RoleGrid")
    .Columns(x =>
                 {
                     x.Bound(p => p.Name).Width(150);
                     x.Bound(p => p.Description).Width(350);
                     x.Bound(p => p.Permissions).ClientTemplate("test");                   
                     
                     x.Command(command =>
                                   {
                                       command.Edit();
                                       command.Destroy();
                                   });
                 }))


<script type="text/x-kendo-template" id="test" >
    @(Html.Kendo().ListView<PermissionModel>().Name("listView")
                                                                                     .AutoBind(true)
                                                                                     .ToClientTemplate()
                                                                                     )
</script>

Hello ,

I have a kendoGrid in form with different clientTemplate like this :

 

my problems is on the columns "heures", i need to send a Decimal value to the controller.
my models "Activite" have correct data type for the columns "heures"
[DisplayName("Heures")]
[UIHint("Decimal")]
[DisplayFormat(DataFormatString = "{n2}")]
public Decimal heures { get; set; }

my input value is good in the html
(exemple : <input type="hidden" data-role="numerictextbox" data-step="0.01" data-decimals="2" data-format="n2" value="6.66" name="Activites[1].heures">)

"<input type='hidden' name='Activites[#= index(data)#].heures' value='#= heures #' data-format='n2' data-decimals='2' data-step='0.01' data-role='numerictextbox' />"

 

But in my controller the activite.heures is always at 0 -_-'
all others values are set correctly except heures 

[HttpPost]
public PartialViewResult Edition(Activite activite)
{
List<Activite> edited = new List<Activite>();
List<Activite> deleted = new List<Activite>();
...

someone have any idea ?

 

 

 

I have a grid set up inside a Kendo Window. If I click on a link, I open the window, and call grid.datasource.refresh from javascript. The first time I do this, it works perfectly. Once I close the window, if I try to reopen it and reload the grid with other data, the grid never refreshes. The weird part is that this only happens with IE 9. Using the latest versions of IE, Chrome and Firefox all work. Any ideas?

Grid MVC Code:

@(Html.Kendo().Grid<Person>()
	    .Name("grid")
	    .Columns(columns =>
	                {
	                    columns.Bound(x => x.FirstName).Title("First Name");
	                    columns.Bound(x => x.LastName).Title("Last Name");
	                    columns.Bound(x => x.EmailAddress).Title("Email Address");
	                    columns.Bound(x => x.PhoneNumber).Title("Phone Number");
	                })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("LoadGrid", "Dashboard")
                .Data("my.view.parms") // the name of the JavaScript function which will return the additional data
            )
        )
    )

JS:

var show = function () {
        reloadGrid("#grid");
        showWindow("#window", "Lead Report");
    };

var reloadGrid = function(gridElement) {
        var grid = $(gridElement).data("kendoGrid");
        grid.dataSource.read();
    };

var showWindow = function(element, title, width, actions) {
        var window = $(element);
 
        window.show();
 
        if (!window.data("kendoWindow")) {
            window.kendoWindow({
                width: width || "1400px",
                title: title,
                actions: actions || ["Close"],
                modal: true
            });
        }
 
        $(element).data("kendoWindow").center().open();
    };

Hello,

I have a menu that I would like to use content in such as the "Stores" menu option in the example found here.  Basically I want to add HTML markup to a parent menu item.  Is this possible?

Thank you,
David A.

Hi,

I need your help to declare kendogrid which contains a complex field:Specifically ,i have a relation 1-to-1 between table RapportView and table Delegue.I hope to put the "ID"and "Gamme" of table delegue in the same row as rows of RapportView .
My data has type as json like this:

[{ "Cycle":"2008",
   "DateDebut":"\/Date(1202684400000+0100)\/",
   "DateFin":"\/Date(1203202800000+0100)\/",
   "Delegue":{"Gamme":"BU 1A","ID":13,"Matricule":"033","Nom":"S","Prenom":"Sa","Role":null}
 },
{
  "Cycle":"2008",
 "DateDebut":"\/Date(1203289200000+0100)\/", 
 "DateFin":"\/Date(1203807600000+0100)\/",
 "Delegue":{"Gamme":"BU 1A","ID":13,"Matricule":"033","Nom":"S","Prenom":"Sa","Role":null}
}]

i hope that my problem is clear.Thanks for yr help.