Kendo Grid - Lazy Load On Popup Edit

12 posts, 0 answers
  1. Omar
    Omar avatar
    9 posts
    Member since:
    Aug 2013

    Posted 21 Aug 2013 Link to this post

    I am using Kendo UI ASP.NET MVC Grid (Razor) in Ajax mode with a popup editor.

    As an example say: Customers have orders.

    User of the application go to a grid that displays all customers. User is allowed to add/edit/delete customers (and their orders).
    But when the user clicks on edit and the popup editor comes up that is when I want to load orders. I do not want to load orders eagerly since a customer may have many orders and the user may never edit any customer at all.

    Seems like this should be a simple thing to do. I have looked through all forums/questions. I have not been able to find such an example. Can someone help me with this?

    Thanks a bunch!
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 23 Aug 2013 Link to this post

    Hello Omar,

    How to customize the popup editor is covered in this code library article:

    http://www.kendoui.com/code-library/mvc/grid/custom-popup-editor.aspx

    Once you put a Grid inside the custom editor template you can configure it for ajax binding. 

    I assume that you will also need to set the AutoBind option of the master Grid to false and use the edit event to perform read by sending the master ID that is currently being edited so you can return the appropriate records.

    To get the master ID that you will need to pass to the read method of the dataSource you can go like this:
    var masterId = $('#masterGridName').data().kendoGrid.editable.options.model.CustomerID


    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Omar
    Omar avatar
    9 posts
    Member since:
    Aug 2013

    Posted 23 Aug 2013 Link to this post

    Hello Petur

    I have to also place a multi-select, a checkbox-list and a drop-down list in the popup edit. Are those also configurable so that they can load the data when the popup edit is displayed?

    I want to load the selectedvalues and the full list of values when the popup edit is show.

    Thanks

  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 27 Aug 2013 Link to this post

    Hello again Omar,

    You are should be able to put whatever you need inside of the Popup editor. However some fine tuning might be required to make it function properly. 

    Also regarding MultiSelect you can check the following code library:

    http://www.kendoui.com/code-library/mvc/grid/using-multiselect-in-grid.aspx


    Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Omar
    Omar avatar
    9 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    Hello

    I do not see a checkboxlist control in the asp.net mvc tools suite? Can you please point me in the right direction?

    Thanks
  6. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 28 Aug 2013 Link to this post

    We don't offer such type of widget, Omar. However, you can consider one of the options listed below:

    http://mvccontrolstoolkit.codeplex.com/wikipage?title=CheckBox%20list%20for%20selecting%20elements

    http://stackoverflow.com/questions/5285088/checkboxlist-in-mvc3

    Regards,
    Sebastian
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Omar
    Omar avatar
    9 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    I am trying the second link: http://stackoverflow.com/questions/5285088/checkboxlist-in-mvc3

    When I check one box in the checkboxlist all of them get checked. I have looked at the source and found out that:
    All the check-boxes in the checkboxlist are getting rendered with the following
    data-bind="checked: ModelArrayName">

    I 'think' that it may be because of grid popup edit. 

    Any ideas how I can remove the data-bind?

    Thanks
  8. Omar
    Omar avatar
    9 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    In addition, the following data annotations are not working as expected:

            [DataType(DataType.Password)]
            [Display(Name = "Confirm password")]
            [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
            public string ConfirmPassword { get; set; }

            [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
            [DataType(DataType.Password)]
            [Display(Name = "Password")]
            public string Password { get; set; }

            [StringLength(500, ErrorMessage = "Image path cannot be more than 500 characters.")]
            [Display(Name = "Image path")]
            [DataType(DataType.ImageUrl)]
            [RegularExpression(@"^http(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$", ErrorMessage = "Image path format is incorrect.")]
            public string ImagePath { get; set; }

    Currently for Add/Edit both, I am getting a minimum password length should be 6. Also both for Add and Edit I get "Image path format is incorrect" even when there is nothing typed in that field

    In addition to the above
    On Edit - I do not want the password to be required. On New I want password to be required.

    Thanks
  9. Omar
    Omar avatar
    9 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    Attached is a sample project that shows that 
    http://stackoverflow.com/questions/5285088/checkboxlist-in-mvc3
    works when the grid edit is not used. But when grid popup edit is used it does not work.

    (Note due to file size restriction, I am attaching just the web project)

    What do I have to change to allow for this to work in the popup edit?

    Thanks
  10. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 30 Aug 2013 Link to this post

    Hello Omar,

    The Grid depends on the MVVM bindings to update the model. And the checkbox binding requires a little bit more special formatting.

    Here is an example:

    http://demos.kendoui.com/web/mvvm/elements.html


    To demonstrate how to apply this approach with the MVC wrappers I attached a sample project.

    I hope this helps.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Omar
    Omar avatar
    9 posts
    Member since:
    Aug 2013

    Posted 30 Aug 2013 Link to this post

    Thank you Petur. How do I get the data annotations to work as expected in the Ajax popup edit?:

            [DataType(DataType.Password)]
            [Display(Name = "Confirm password")]
            [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
            public string ConfirmPassword { get; set; }

            [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
            [DataType(DataType.Password)]
            [Display(Name = "Password")]
            public string Password { get; set; }

            [StringLength(500, ErrorMessage = "Image path cannot be more than 500 characters.")]
            [Display(Name = "Image path")]
            [DataType(DataType.ImageUrl)]
            [RegularExpression(@"^http(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$", ErrorMessage = "Image path format is incorrect.")]
            public string ImagePath { get; set; }

    Currently for Add/Edit both, I am getting a minimum password length should be 6. Also both for Add and Edit I get "Image path format is incorrect" even when there is nothing typed in that field

    In addition to the above
    On Edit - I do not want the password to be required. On New I want password to be required.

    Thanks
  12. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 03 Sep 2013 Link to this post

    Hello again,

    Please open separate tickets for the distinct question not related to the initial one related to that thread.

    Thank you for the understanding.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top