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>