I am new to kendoUI and facing a few issues
1. not able to get the grid reference. (for changing the grid properties)
var grd = $("#grid").data("kendoGrid"); // Not working. grd is shown as undefined.
2. DataBound event is not recognized.
Please let me know what i am I missing here.
Please find my code below
<div class="k-content">
@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(company => company.Id).Hidden();
columns.Bound(company => company.CompanyName).Sortable(true).Width(120);
columns.Bound(company => company.Email).Sortable(true).Width(150);
columns.Bound(company => company.CompanyAddressAddress1).Width(120);
columns.Bound(company => company.CompanyAddressAddress2).Width(120);
columns.Bound(company => company.CompanyAddressCity);
columns.Bound(company => company.CompanyAddressStateAbbreviation).Width(80);
columns.Bound(company => company.CompanyAddressZip).Width(100);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(180);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("CompanyCreate")
.Window(window => window.Title("Company Profile").Name("CompanyEdit"))
)
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Events(
events =>
{
//events.Change("");
events.Error("error_handler");
events.DataBound("reload_grid");//gives error
}
)
.Model(model => model.Id(company => company.Id))
.Create(update => update.Action("CompanyCreate", "Company", new { act = "Create" }))
.Update(update => update.Action("CompanyUpdate", "Company", new { act = "Update" }))
.Destroy(update => update.Action("CompanyDestroy", "Company"))
.Read(read => read.Action("CompanyRead", "Company"))
)
)
<script type="text/javascript">
// get a reference to the grid
var grd = $("#grid").data("kendoGrid"); // Not working. grd is shown as undefined.
$(".k-grid-add").on("click", function (e) {
var insertMode = e.model.isNew(); //gives error
var window = e.container.data("kendoWindow");//gives error
e.container.kendoWindow("title", "Add new record");//gives error.
});
function reload_grid(e) {
//alert("reload");
}
</script>.


<div>${content}</div>
<div data-role="view" id="offers" data-layout="general-home" data-title="Offers" data-show="filterOffers"> <ul id="pull-to-refresh-offers"></ul> </div> <script id="productsTemplate" type="text/x-kendo-template"> <div class="content_offers"> <span class="title">#= NAME #</span> </div> </script>function filterOffers(e) { var scroller = e.view.scroller; scroller.reset(); categoryID = parseInt(e.view.params.CategoryID); //console.log(categoryID); var getOffers = new kendo.data.DataSource({ transport: { read: { url: "http://www.myurl.com", dataType: "jsonp", beforeSend: function(req) { $("#pull-to-refresh-offers").hide(); app.showLoading(); }, data: { action: "getOffers", CategoryID: categoryID } } }, change: function() { app.showLoading(); setTimeout(function() { app.hideLoading(); $("#pull-to-refresh-offers").show(); }, 200); }, schema: { data: "res" } }); $("#pull-to-refresh-offers").kendoMobileListView({ dataSource: getOffers, pullToRefresh: true, template: $("#productsTemplate").text() }); }@model IEnumerable<PosPayAndBankRec.Models.AccountListItem>
@{
ViewBag.Title = "Account List";
}
<div id="grid"></div>
@(Html.Kendo().Grid(Model)
.Name("Grid")
.ToolBar(p => p.Create())
.Columns(columns =>
{
columns.Bound(p => p.SourceName).Groupable(false).Title("Source");
columns.Bound(p => p.BankName).Title("Bank");
columns.Bound(p => p.AccountName).Title("Account");
columns.Bound(p => p.AccountNumber).Title("Acct #");
columns.Bound(p => p.AccountFolderName).Title("Folder");
columns.Bound(p => p.RamQuestBankNumber).Title("Bank #");
columns.Bound(p => p.AccountID).Hidden(true);
columns.Command(p => p.Edit());
columns.Command(p => p.Destroy());
})
.Pageable()
.Editable(c => c.Mode(GridEditMode.PopUp).Enabled(true).DisplayDeleteConfirmation(true).Window(window => window.Title("Account")).TemplateName("AccountPopup"))
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add(p => p.BankName))
.ServerOperation(false)
.Model(model => model.Id(p => p.AccountID))
//.Model(d => d.Id("AccountID"))
.Update(update => update.Action("Edit", "Account"))
.Create(create => create.Action("Create", "Account"))
.Destroy(destroy => destroy.Action("Delete", "Account"))
)
)
Here's my AccountPopup.cshtml:
@using System.Collections
@model PosPayAndBankRec.Models.AccountListItem
@{
ViewBag.Title = "Account";
SelectList sources = new SelectList("");
SelectList banks = new SelectList("");
if (Model.Sources != null)
{
sources = new SelectList(Model.Sources, "SourceID", "SourceName");
banks = new SelectList(Model.Banks, "BankID", "BankName");
}
}
<table id="table">
<tr>
<td>
Source
</td>
<td>
@Html.DropDownListFor(m => m.SourceID, sources)
</td>
</tr>
<tr>
<td>
Bank
</td>
<td>
@Html.DropDownListFor(m => m.BankID, banks)
</td>
</tr>
</table>
