Grid Popup Template loads on Page Initialization instead of on Edit/Add/Delete Click

[Alex]

Does anyone know how to stop a popup template from loading when the page does?  I really want to utilize my Edit, Add, and Delete ActionResults.  When I add .AutoBind(false) to my Grid, I get an error stating: "Cannot set AutoBind if widget is populated during initialization".  I REALLY don't want the widget to be populated during initialization.

Here's my grid on my Index.cshtml page:

@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>

[Rosen]

Hi Alex,

The error is raised due to the fact that you have populated the Grid widget initially, by passing the Model to the Grid's definition. In this case the grid will be always populated, thus setting the autoBind options in not supported. Removing the Model assignment for the Grid's declaration should resolve the error in question.

@(Html.Kendo().Grid<PosPayAndBankRec.Models.AccountListItem>(/*Model*/)
    .Name("Grid")
    /*.....*/
)

All the best,
Rosen
the Telerik team

[Alex]

When I change it to that columns in the code resolves but the grid doesn't populate:

@(Html.Kendo().Grid<PosPayAndBankRec.Models.AccountListItem>()
    .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());
        //columns.ForeignKey(p => p.AccountID, (IEnumerable<ORTAccount>)Model.Accounts, "AccountID", "AccountName");
    })
    .ClientDetailTemplateId("AccountDetails")
    .Pageable()
            .Editable(c => c.Mode(GridEditMode.PopUp).Enabled(true).DisplayDeleteConfirmation(true).Window(window => window.Title("Account")).TemplateName("AccountPopup").AdditionalViewData(new {Sources = Model.Sources, Banks=Model.Banks}))
    .Sortable()
    .Selectable()
    .Scrollable()
    .Filterable()   
    .DataSource(dataSource => dataSource   
        .Ajax()
        .Read(read => read.Action("Index", "Account"))
        .Sort(sort => sort.Add(p => p.BankName))
        .ServerOperation(true)
        .Model(model => model.Id(p => p.AccountID))
        .Update(update => update.Action("Edit", "Account"))
        .Create(create => create.Action("Create", "Account"))
        .Destroy(destroy => destroy.Action("Delete", "Account"))
     )
    
)


My Model:

using System;
using System.Collections.Generic;
using PosPayAndBankRec.Domain.Models;

namespace PosPayAndBankRec.Models
{
    public class AccountListItem
    {
        public int AccountID { get; set; }
        public int BankID { get; set; }
        public int SourceID { get; set; }
        public string SourceName { get; set; }
        public string BankName { get; set; }
        public string BankAccountName { get; set; }
        public string AccountName { get; set; }
        public string AccountNumber { get; set; }
        public string AccountFolderName { get; set; }
        public string RamQuestBankNumber { get; set; }
        public string RamQuestDatabaseName { get; set; }
        public string RamQuestBankNumberStacked { get; set; }
        public string AccountNotes { get; set; }      
        //public ORTAccount Account { get; set; }
    }

    public class AccountListViewModel
    {
        public List<ORTSource> Sources { get; set; }
        public List<ORTBank> Banks { get; set; }
        public IEnumerable<AccountListItem> Accounts { get; set; }
    }
}

The Index of my AccountController.cs

public ActionResult Index()
        {
            var ortaccounts = from account in db.ORTAccounts
                              join source in db.ORTSources on account.SourceID equals source.SourceID
                              join bank in db.ORTBanks on account.BankID equals bank.BankID
                              select new AccountListItem()
                                         {
                                             AccountID = account.AccountID,
                                             BankID = account.BankID,
                                             SourceID = account.SourceID,
                                             AccountName = account.AccountName,
                                             AccountNumber = account.AccountNumber,
                                             AccountFolderName = account.AccountFolderName,
                                             BankAccountName = account.BankAccountName,
                                             BankName = bank.BankName,
                                             RamQuestBankNumber = account.RamQuestBankNumber,
                                             SourceName = source.SourceName,
                                             RamQuestDatabaseName = account.RamQuestDatabaseName,
                                             RamQuestBankNumberStacked = account.RamQuestBankNumberStacked,
                                             AccountNotes = account.AccountNotes
                                         };

            var sources = db.ORTSources.ToList();
            var banks = db.ORTBanks.ToList();

            var viewData = new AccountListViewModel()
                               {

                                   Accounts = ortaccounts.ToList(),
                                   Sources = sources,
                                   Banks = banks
                               };

            return View(viewData);
        }

[Alex]

I've also tried changing ServerOperation from true to false, but I get the same results.

[Rosen]

Hi Alex, 

Looking at the code you have pasted, it seems that the Controller is not configured correctly for AJAX binding. Please refer to this help article on how to implement AJAX binding. Also you may check this article on AJAX editing.

All the best,
Rosen
the Telerik team