This is a migrated thread and some comments may be shown as answers.

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

4 Answers 262 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 26 Sep 2012, 09:38 PM
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>

4 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 28 Sep 2012, 07:58 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alex
Top achievements
Rank 1
answered on 28 Sep 2012, 01:02 PM
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);
        }

0
Alex
Top achievements
Rank 1
answered on 28 Sep 2012, 01:03 PM
I've also tried changing ServerOperation from true to false, but I get the same results.
0
Accepted
Rosen
Telerik team
answered on 29 Sep 2012, 10:19 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Alex
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Alex
Top achievements
Rank 1
Share this question
or