Kendo Grid Custom Save Changes

[Nandan]

Hi,
I am using Kendo Grid for Add,Update and Delete functionality. While populating the grid I am giving a list of Data to the grid.  

@model OSI.DNAweb.Web.UI.Areas.Administrator.ViewModels.Business.BusinessUserAccountModel
@(Html.Kendo.Grid<Accounts>()
.Name("Grid")
    .Columns(columns =>
                 {
                     columns.Bound(p => p.AccountNumber).Title("Account Number");
                     columns.Bound(p => p.CreditCardNumber).Title("Credit Card Nbr");
                     columns.Bound(p => p.EnrollTypes).ClientTemplate("#=EnrollTypes.EnrollTypeName#").Title("Type").Width(200);
                     columns.Bound(p => p.DisplayName).Title("Nickname").Width(200);
                     columns.Bound(p => p.AsofDate).Title("As Of Date").Format("{0:d}").Width(50);
                     columns.Command(command => command.Custom("Delete").Click("showDetails")).Width(15);
                 })
                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Save();
                })
                     .Editable(editable =>
                     {
                         editable.Mode(GridEditMode.InCell);
                         editable.DisplayDeleteConfirmation(false);
                     }
                  )
                 .Pageable(page => page.Enabled(false))
                 .DataSource(dataSource => dataSource
                          .Ajax()
                          .Batch(true)
                          .Events(events => events.Error("error_handler"))
                          .Model(model =>
                                  {
                                      model.Id(p => p.CompanyIdent);
                                      model.Field(p => p.CreditCardNumber).Editable(false);
                                      model.Field(p => p.EnrollTypes).DefaultValue(new EnrollTypes() { EnrollType = "", EnrollTypeName = "Select" });
                                  })
                          .Create("CreateAccount", "Business")
                          .ServerOperation(false)
                          .Read(read => read.Action("GetAccounts", "Business"))
                          .Update("UpdateAccount", "Business")
                          .Destroy("DeleteAccount", "Business")
                          )
      )

While Adding,Updating and Deleting it is sending a list of Accounts Class to the respective ActionResult in the controller with the changes. But In my case I want to use BusinessUserAccountModel and pass it to the controller so I can also have some additional properties mentioned in BusinessUserAccountModel class along with Accounts Collection.Please see below the Classes structure:

    [Serializable]
    public class Accounts
    {
        #region Properties
        public int CompanyIdent { get; set; }
        [Required]
        [DNAwebCustomValidator(DNAWebValidationDataTypesEnum.AlphaNumeric)]
        public string AccountNumber { get; set; }
        public string CreditCardNumber { get; set; }
        [Required]
        [DNAwebCustomValidator(DNAWebValidationDataTypesEnum.AcctNickName)]
        public string DisplayName { get; set; }
        [DNAwebCustomValidator(DNAWebValidationDataTypesEnum.Date)]
        public string AsofDate { get; set; }
        [UIHint("AccountTypes"), Required]
        public EnrollTypes EnrollTypes { get; set; }
        #endregion
    } 

    public class BusinessUserAccountModel : BusinessUserBaseModel
    {
        public IEnumerable<Accounts> Accounts { get; set; }
        public BusinessUserAccountModel(){}
        public BusinessUserAccountModel(BusinessData businessData,IEnumerable<Accounts> accts) : base(businessData, BusinessTab.Accounts)
        {
            Accounts = accts;
        }
    }
As you see above BusinessUserAccountModel is further inheriting BusinessUserBaseModel. If somehow in my grid CRUD operations if i able to pass BusinessUserAccountModel class along with the Accounts Collection that will solve my problem.

Just for more clarification in my page I have other controls in my page other than grid, so whenever I do CRUD operation in the grid those controls validation should also get fired. Hope you got cleared with my problem.     

Thanks,
Nandan

 

[Nandan]

I am still waiting for this, Please reply ASAP.!!!!

[Daniel]

Hello Nandan,

If I understand you correctly, you wish to pass some additional data from the BusinessUserAccountModel with the Grid requests. If that is the case, you can send them as route values like described in this documentation topic.

Regards,
Daniel
the Telerik team

[Nandan]

Hi,
Yes I can use AdditionalData property achieve this which looks all manual, and doing that using javascript is little awkward. Here I am attaching one image file which can give you better idea that how we are using grid in our application.

As you can see in the image we have a grid which has the Accounts and we have another form on top, which will authorize whenever we click on Save changes button, since this authorization form is not part of the grid so whenever we click on the Save Changes button this will not validate this form.

We want that whenevr user clicks on Save Changes button it should validate the UserId and password and also should send those values to the Controller allong with the Accounts object. Yes we can use AdditionalData property to send UserID and Password, but how come we can fire validation on those UserID and Password controls. This page just has UserID and Password outside the grid in some other pages we can also have a complete form as well along with the grid in the bottom, so sending each controls value by AdditionalData technique will be really so cumbersome, instead we must send an object to the controller.

As you see in my previous details in this thread we are Using Accounts Class to fill the grid, and while doing that it is sending to the controller just the Accounts object, but we also want the grid should sent the values in our controller of BusinessUserAccountModel class which contains the authorization form and this class should compose the Accounts object, So that we can have both the values of Authorization Form and Accounts class as well.

Hope you understood our problems completely, If the above things is not achievable by Kendo grid, can we have a custom toolbar of Authorization form in grid toolbar section, I think which will allow us to post the UserID and password values to the controller. I tried this at my end but when I try to add a Template in the toolbar or I use Custom toolbar option, Kendo removes the Add New Item, Save changes and cancel changes button in my grid.

Hope I get some best answer now.

Regards,
Nandan S. Aswal


 

[Daniel]

Hello again Nandan,

I am still not sure if I understand correctly the exact scenario so I will try to explain both cases:

1. The user submits the form data to the server, the BusinessUserAccountModel is populated, the validation is performed and if it passes, the View with the Grid is rendered. In this case you can pass the model to the View and add it to the requests route values:
   

   .Create("CreateAccount", "Business", ViewBag.BusinessUserAccountModel)
   .Update("UpdateAccount", "Business", ViewBag.BusinessUserAccountModel)
   .Destroy("DeleteAccount", "Business", ViewBag.BusinessUserAccountModel)

   No JavaScript is required.
2. The form is on the same page as the Grid and it needs to be validated on the client. In this case, JavaScript is needed because the values are not known on the server. If the validation can be performed entirely on the client, you could use the SaveChanges event to check if the form is valid and prevent the requests to save the data with the event argument preventDefault method.
   

   function saveChanges(e) {
       if (!IsValid($("#myForm"))) {
           e.preventDefault();
       }
   }

   I am not sure what validation are you using. For the jQuery validation, you can use the $("form").valid() method and for the Kendo Validator you can use the validate method.
   If a request is needed to determine if the values are valid, you should either use a synchronous call to the server in the SaveChanges event or custom button which makes an asynchronous call and then saves the values with the saveChanges method. If a Template is used you can still add the Grid buttons by using the SaveButton and CreateButton methods:
   

   .ToolBar(toolbar => toolbar.Template(@<text>
       @item.CreateButton()
       @item.SaveButton()
   </text>))

   
   As for passing the data with the requests, you should find the values with JavaScript and return them as result of the Data function. This can be automated for any form by finding all inputs and creating an object from the input names and values:
   

   function additionalData(e) {
       var data = {};
       $("form").find("input").each(function () {
           data[this.name] = this.value;
       });
   
       return data;
   }

 
Kind regards,
Daniel
the Telerik team