From the client-side (JavaScript land) can I get access to the data displayed in the grid? Without having to dissect the grid's HTML.

For example:
If a dataset (JSON, ViewModel, ViewBag or etc) is bound to the grid. After grid events (sorting, grouping, filtering) can I get access the the refined data?

All our data is returned from LINQ queries and bound to the grid. With our current provider. Whenever a user modifies the displayed data (sorting, grouping, filtering) we have to interpret those actions and build SQL to reflect all the changes done to the data. :( A messy and potentially weak point in our system I'd very much like to get rid of.

<script type="text/javascript">
<!--
$(document).ready(function () {
$('#btnGridview').click(function () {

var grid = $("#Grid").data("kendoGrid");
grid.dataSource.read();
grid.refresh();
HideProgressDialog();

});
});
//-->
</script>

@using (Html.BeginForm("IndexAjax", "Vendor"))
{

<button class="green" type="button" id="btnGridview" name="btnGridview">
<span>Gridview</span>
</button>
}

i want that this below code will run only when  i click on gridview button.

i want to add   this  action on  javascript .Read(read => read.Action("IndexAjax", "Vendor").Data("PassSearchParameter")).

because i want to load this grid only after button click. i do  not want to initialize this grid for the first time.

@(Html.Kendo().Grid<Vendor>()
.Name("Grid")

.Columns(columns =>
{
columns.Bound(c => c.DisplayId).Title("<input type='checkbox' name='chkAllVendorId' id='chkAllVendorId' />").Width("10px").Sortable(false).Groupable(false).Filterable(false).ClientTemplate("<input type='checkbox' name='chkVendorId' value='#= VendorID #' id='#= VendorID #' />");
columns.Bound(c => c.DisplayId).Title("Display ID").Width("5%").Sortable(true).Groupable(false).Filterable(false).ClientTemplate("<a name='lnkOverview' id='lnkOverview_#= VendorID #' href='/VMS/Vendor/Dashboard?vendorId=#= VendorID #' target='_blank' title='Overview'>#= DisplayId #</a>");
columns.Bound(c => c.Name).Title("Vendor Name").Width("20%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.IndustryName).Title("Industry Category").Width("20%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.City).Title("City").Width("10%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.StateName).Title("State").Width("10%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.CountryName).Title("Country").Width("10%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.EmailAddress).Title("Vendor Email Address").Width("20%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.VendorStatusCategoryName).Title("Vendor Status Category").Width("10%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(p => p.FancyBoxLink).ClientTemplate("<a name='lnkViewer' id='lnkViewer_#= VendorID #' rev='/VMS/Vendor/DetailsAjax/#= VendorID #' class='popups' href='#= FancyBoxLink #' title='Details'><img alt='Details' src='/content/images/details.jpg' /></a>&nbsp;<a name='lnkEditor' id='lnkEditor_#= VendorID #' rev='/VMS/Vendor/EditorAjax/#= VendorID #' class='popups' href='#= FancyBoxLink #' title='Edit'><img alt='Edit' src='/content/images/edit.png' /></a>&nbsp;<a name='lnkDelete' id='lnkDelete_#= VendorID #' href='/VMS/Vendor/DeleteAjax/#= VendorID #' title='Delete'><img alt='Delete' src='/content/images/delete.png' /></a>&nbsp;<a name='lnkVerify' id='lnkVerify_#= VendorID #' rev='/VMS/Vendor/VerificationAjax/#= VendorID #' class='popups' href='#= FancyBoxLink #' title='Verify'><img alt='Verify' src='/content/images/#= IsVerified #.png' /></a>").Width("10%").HtmlAttributes(new { @class = "grid-actions-content" }).HeaderTemplate("<center>Actions</center>").HeaderHtmlAttributes(new { @class = "grid-actions-content" });

})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("IndexAjax", "Vendor").Data("PassSearchParameter"))
.PageSize(50)

)
.Pageable()
.Sortable()
)

Folks
I have been working thru some issues converting from telerik treeview with checkboxes to KendoUI treeview with check boxes.
Firstly, you need to be on the latest version of KendoUI. For Trial customers that is , 2012.2.913.340 or later. For paying customers you will need 2012.3.1114 of later.
Secondly, I am being guided by a Telerik expert, John, and he has point me to this site :
 http://demos.kendoui.com/web/treeview/remote-data.html
Now you will need to decide what is the best way to populate the treeview. That link gives you some different ways.
I am using the "Binding to remote data" option. So my html looks like this
and my Controller method looks like this
You will need to populate your own list. Mine is quite big(6000+ categories) and comes from a self-joined table that is at least 10 levels deep.
Therefore I wish to populate the Parent when drawing the treeview and only those child nodes when I expand the parent node. It does one level at a time.
The lines between nodes didn't just appear and there is no treeview methods to turn them on. You need to use CSS for that. Here is what I am using

The other aspect is the checkbox. It is easy to display the check box, just add the CheckBoxs(true) and they will appear.
But there is no event handler for the checkbox click event. The Select event won't work, it is fired when the list item of the treeview is selected, not when the checkbox is checked.
To overcome this I use the DataBound event handler, which fires after the call to the controller method that populates the nodes.
You create a javascript function and use its name in the DataBound event handler.
In that function you bind the click event to each of the checkboxes. I have used jQuery's .on() function
Here is an example:
The value can be got from the checkbox element, but the name in the list is in a span that is a sibling of the parent of the checkbox element.
I am also only allowing one checkbox to be checked at a time, but is just a customised condition. You can do what you want.
I hope that this helps.
BTW, this is geared for client side operation and the only Web server side activity is the populating of treeview nodes .

Regards

Greg

Folks
I have posted previously showing how to load the treeview one layer at a time in this post(my post)

treeview and checkboxes: a Solution

http://www.kendoui.com/forums/mvc/treeview/treeview-and-checkboxes-a-solution.aspx

This is another solution that loads all items and allows MORE than 1 treeview on a HTML form and separates out the different check boxes lists when you post back the form. I have 3 treeviews on the one HTML Form
As with the first post you need to have the latest version( refer to that post).
I am basing this on the ASP.NET MVC example on this site:
http://demos.kendoui.com/web/treeview/checkboxes.html

My html looks like this:
The treeview control has logic placed in it to parse the list of annaulSalesRanges. I am using a int: cnt variable to get the different list items on each iteration.
There are 2 other things worth note:
1. this line: treeview.Add().Text("Annual Sales").Id("-1")
2  the last line           @Html.Hidden("LastYearSalesCheckedStates");
for the first line there is a -1 as the Id. I will use this in a Javascript to hide the top most checkbox in the tree. In Kendo there isn't a Checkable function as there was in Telerik. (see second last part of javascript)
The hidden field will hold the checked and unchecked states. I will populate this with javascript and use it in the post back Controller method.

The java script looks like this:
The first thing to note is the javascript object: LastYearSalesCheckedState, this holds one checkbox id and check state.
The javascript array: LastYearSalesCheckedStates holds an array of LastYearSalesCheckedState.
They are populated:

1. When the checkbox is clicked
2. When the view is initially rendered, if there are any checked Checkboxes being sent from Controller(see last part of javascript)

The LastYearSalesCheckedStates  array is JSON stringified and assigned to the hidden field.
There is a separate submit button for each treeview, which posts the whole form. It changes the form's action prior to posting so that a different action on the controller can manage each of the treeviews

Here is an abridged version of my controller Action

The first commented out signature is the old telerik signature, where the [name of the control]_checkNodes was the array holding the checked items.
The second commented out signature is the new Kendo signature where checkNodes holds ALL checked and only checked items. It doesn't seperate the 2 or more treeviews as did the telerik treeviews. It puts them all checked checkbos together regardless of which control  they belong to. So it is only good when there is 1 treeview being posted back.
And that is the reason for having the JSON stringify array for each treeview control being posted back in separate hidden fields. It is in Request.Form["LastYearSalesCheckedStates"]
The LastYearSalesCheckedState class must be the same structure as the javascript object: LastYearSalesCheckedState
The generic CommonTools.DeSerializeJsonObject method is a helper that de-serializes the Json string into a LastYearSalesCheckedState  List:

I hope this is clear to follow
If not post  question

regards

Greg

I'm feeling pretty stupid.

I have a page that contains a Kendo()Window

The window contains a Kendo().Grid(model)

I have populated the Grid with the data I want and have even made it selectable
Now I want to be able to load and populate a page based on the row selected.
Basically I want to return the 'ID' column and have the controller populate the view based on the 'ID'

BUT I AM LOST...

Can somebody please help

folks
My company has paid for a 3 license copy of KendoUI
I am posting here and not under the company registered user name as no one monitors that email

I am using

2012.2.710 release (because I can't upgrade

I am getting an error when the treeview is rendered.
There error is(see attachment for screen shot):

Unhandled exception at line 8, column 374994 in http://localhost:3407/Scripts/KendoUI/kendo.web.min.js

0x800a138f - Microsoft JScript runtime error: 'f[...].uid' is null or not an object

Browser is IE8. Must use this version : 1.4 billion(and counting) Chinese can't be wrong!!

Here is the Treeview code:

Below is my grid.  I set my filter and ordering, click the Details, click back to the Index view and the filter and ordering are lost.  

<h2>Load Summary</h2>
@(Html.Kendo().Grid<MyProject.Models.Invoice>()
    .Name("grid")
    .HtmlAttributes(new { style = "width: 100%" } )
    .Columns(columns => 
        {
            columns.Template(@<text>@Html.ActionLink("Details", "Invoice", "Details", new { id = @item.InvoiceID })</text>)
                .ClientTemplate("<a href='/Invoice/Details/#= InvoiceID#'>Details</a>").Width("5%");
            columns.Bound(p => p.InvoiceNumber).Width("5%").Title("Load No.");
            columns.Bound(p => p.BookDate).Format("{0:d}").Width("5%");
        })
    .DataSource(datasource => datasource
        .Ajax()
        .Read(read => read.Action("GetLoads", "Invoice"))
        .Model(m => m.Id(model => model.InvoiceID))
        )
    .Pageable()
    .Sortable()
    .Filterable()
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Single))
)

Here are my controller actions:
        public ActionResult Index()
        {
            IEnumerable<Invoice> invoices = _db.Invoices.Where(p => p.SalesmanID == _salesmanId);
            return View(invoices.ToList());
        }


        //
        // GET: /Invoice/Details/5


        public ActionResult Details(int id = 0)
        {
            Invoice invoice = _db.Invoices.Find(id);
            if (invoice == null)
            {
                return HttpNotFound();
            }
            _routeValues = this.GridRouteValues();
            InvoiceViewModel invoiceViewModel = Mapper.Map<Invoice, InvoiceViewModel>(invoice);
            return View(invoiceViewModel);
        }


        [HttpPost]
        public ActionResult Details(string btnSubmit)
        {
            
            return RedirectToAction("Index", _routeValues);
        }

How can I code this to keep my Filtering and Ordering on my grid?
Thanks

Hi,

I have a grid that has 2 columns, something like the following:

Country India USA

GDP ($ trn) 1.85 15.09

Inflation (%) 7.9 2.0

Countries are selectable from dropdown lists, whereas the statistics pertaining to them are shown in read-only textboxes.

Now on top of the grid, I have a button titled 'Add', on clicking which a new templated column needs to get added to the grid. In the new column, I should be able to select a country from the dropdown list and then enter values for its GDP and inflation rate (textboxes for GDP and inflation in the new column are editable, unlike the ones for existing columns, which are read-only.)

Would the gridbuilder class be useful here? I was just taking a casual look at its documentation, don't know if it could help me.

Please advise on how this could be done.

In my project this code


generates following html


Could not read  "disconnections" data because datasource property (dataSource:{transport:{read:{url:"/Event/_Disconnections" ... etc. ) is not generated. Why? Please help.

Hi Guys,

I've been looking high and low for example on showing how to implement drag and drop with the Kendo grid in MVC3 and Razor. Could anyone help me out here?

William