I've got a complex ViewModel:
Ex:

public ExampleViewModel {
public string name {get;set;}
public string description {get;set;}
public List<ExampleViewModelSubItem> Items {get;set;}
// multiple other collections and properties.
}

So I have no problems getting a KendoUI DataSource reading from an MVC route

public JsonObject GetExample() {
return Json(getExample(), AllowJSONGet);
}

What I'm having issues with is how I should go about structuring the data source / pages.

If I had a simple ViewModel it would be easy, load the collection into a grid... Done.

But when I'm faced with a complex ViewModel (Object Graph) it's not quite so simple.

What I had in mind was to create a datasource that queries for the whole object and posts to the whole object.

And then widgets (grids for the lists) bound to each property of the Model.

IE the datasource for a grid might be: model.ObjectList or model.ObjectList.2ndObjectList

In regular MVC.net without the client side components it would be fairly simple.

Using Kendo controls makes it seemingly more complex.

My current plan of attack is to load the entire object graph as JSON into the page, handle client side, and hopefully post it back to the server.

Any suggestions for doing so would be great.

It looks like Kendo really wants to have an write method on the datasource that wants to pump the object back to the server immediatly, which is a problem when it's a grid and we don't want to submit the object until the user is done with their changes.

Thanks much.

I'm starting to use the Kendo UI complete for ASP.NET MVC 4. 
I already created the database and the models that I need, but now I want to be able to handle (Index, Create, Delete, Details and Edit) the entities inside the content of each Tab. But I don't know how can I do this inside de tabstrip. (I started with the Internet Application template which has already a HomeController)

My code until now is:

/Views/Home/Index

@{
    ViewBag.Title = "Home Page";
}

@(Html.Kendo().TabStrip()
                .Name("tabstrip")
                .Items(items =>
                {
                    items.Add().Text("Students").Selected(true).LoadContentFrom("Index","Student"); //Add item with text "Students"
                    items.Add().Text("Teachers"); //Add item with text "Professores"
                    items.Add().Text("Schools"); //Add item with text "Escolas"
                })
)

/Controllers/StudentController

 public class StudentController : Controller
    {
        private MiniSIGEdb db = new MiniSIGEdb();

        //
        // GET: /Student/

        public ActionResult Index()
        {
            var students = db.Students.Include(s => s.Person).Include(s => s.School);
            return PartialView(students.ToList());
        }

        //
        // GET: /Student/Create

        public ActionResult Create()
        {
            ViewBag.Person_id = new SelectList(db.People, "id", "FirstName");
            ViewBag.School_id = new SelectList(db.Schools, "id", "City");
            return PartialView();
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }

/Views/Student/Index

@model IEnumerable<MiniSIGEweb.Models.Student>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Course)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Person.FirstName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.School.City)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Course)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Person.FirstName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.School.City)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.id }) |
            @Html.ActionLink("Details", "Details", new { id=item.id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.id })
        </td>
    </tr>
}

</table>

Until now I'm able to show de Index view (as partialview), but when I click in "Create New", the Create view is not rendered inside the tabstrip? How can I do this? 

Thanks in advance!

Hi,

As our project will require mixing currencies from various countries, I tried to use the "culture" configuration
when creating a NumericTextBox, such as follow:
I loaded the fr-BE culture JS file in my page.

The problem is when I try to type "10.42". (Belgian decimal character is a comma).
When I press the . on the numeric keypad, it adds both a dot and a comma, so it gives: "10.,42".

Whether I keep going like this, or I remove either the dot or the comma, it will automatically change to 1042.

Using kendo.culture("fr-BE") fixes the problem, but the question is, should I use kendo.culture() before creating each widget that uses a different culture ?
Or is that a bug ?

Thanks

How does one go about only showing the command buttons on hover in an mvc grid?

How would I either go about embeding a dropdownlist inside of another dropdownlist. Or is there a way to provide grouping inside of a dropdowns i.e:

Tobacco
     Prevention
     Education
     Media
Aclcholhol
     Prevention
     Education
     Intervention
.......
  .....
  ....

How do I open a ModalView using javascript? I have a button which opens the ModalView, but when I run this code:

   app.navigate("modalview-login");

It opens the view in a non-modal way and its missing most of the styling that it has as a modal. I also get the same result using this code:

   $("#modalview-login").open();

Any help is greatly appreciated. Thanks.
Jason

How do I hide the column menu when the column is hidden from its column menu?

for example if I have 
Col 1 | Col 2 | Col3
and I hide Col 3 from Col3's column menu, I would like to hide its column menu at the same time as well.

My understanding is that the column menus are kendo menu but how do I select the correct menu given the column's field/title from the columnHide event? or is there a better way to do it?

Thanks!

Hi,

I am using Modalview, in that i am using switch, when i change the switch status yet to no modalview is closing.


plese see the below code and find the attachment.


<div data-role="view" id="modalview-camera" data-title="HTML5 Camera" data-layout="mobile-tabstrip">
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#tabstrip-settings" data-icon="contacts">Profile</a>
        </div>
    </div>

           <div data-role="content">
      <a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>

 <div data-role="modalview" id="modalview-login" style="width: 95%; height: 270px;">
    <div data-role="header">
        <div data-role="navbar">
            <span>Login</span>
            <a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>

        </div>
    </div>
    <div data-role="content">
    <input data-role="switch" id="email-switch" checked="checked" />
    </div>

</div>
           </div>
 

</div>

I have grid with in-cell editing enabled for several columns. But I want to disable editing for some rows depending in row data. Is there any possibility to do this easy?
currently I'm doing a hack like this in edit event,

  

I'm trying to implement the endless scroll.  When I just get all my data, all works.  When I put in the endlessScroll and scrollThreshold for the list view, parameterMap, pageSize, and serverPaging for the data source, I only get the first page of 10.  I get the url request: /api/company?take=10&skip=0&page=1&pageSize=10 for the first page and that works. But when I want more data appended to the bottom of the list by dragging the list up so I see the 10th record on the bottom, another request is not made.  What am I missing for Kendo to make that next request for the next page?

  var companyDataTransport = new kendo.data.RemoteTransport({
      read: {
          url: base_url + "/company",
          dataType: "json",
          type: "GET"
      },
  });

  var dsCompany = new kendo.data.DataSource({
      pageSize: 10,
      serverPaging: true,
      schema: {
        type: "json",
        model: Company
       },
   transport: companyDataTransport,
   parameterMap: function (options) {
       var parameters = {
           max: options.pageSize,
           page: options.page
       }
       return parameters;
   },

  });

  function mobileServicersDataBind() {
   $("#servicerView").kendoMobileListView({
    dataSource: dsCompany,
    template: kendo.template($('#servicerOnOffTemplate').html()),
    endlessScroll: true,
    scrollThreshold: 30
   });
  };