none
Adding Gridview in Javascript client object model + custom list + New form.aspx customization RRS feed

  • Question

  • Hi,

    I have a custom list, in which I would like to have a gridview to be shown in Newform.aspx and using the Javascript client object model.

    I am trying to showcase 3 fields in a tabular format: The fields are

    E-mail address (single line of text) , Feedback (dropdown), comments ( multiline textbox) and "Add" and "Delete" button.

    Is it possible to use grid data in Newform.aspx? If yes, how to achieve it.

    Thanks


    • Edited by Venkatzeus Tuesday, April 18, 2017 11:32 AM
    Tuesday, April 18, 2017 11:02 AM

All replies

  • Hi,

    You can utilize Client Side Rendering (JSLink) to completely customize the view of NewForm.aspx.  For this , you need to utilize OnPreRender/OnPostRender events of JSLink to Show/Hide the fields and need to override the NewForm view of fields.

    Some code schema, which you can utilize:

        JSLinkSecurity.Functions.GetAllData = function () {
    
            //--Get all required data and store into global object to bind DDL
        }
    
        JSLinkSecurity.Functions.GetInitialHTMLForAddScreen = function () {
            var result = '';
    
            //--Add button on top
            result += '<a id="lnkAdd" href="#" style="float:left;;" class="add_field_button"  title="Add More Fields" ><img src="' + JSLinkSecurity.IMG_LIB_PATH + 'add_small.png" /></a>';
    
            //--Add all html by creating dynamic email text box, feedback DDL and comments multiline
    
            //Call function to bind the default control with metadata
            var chkControl = setInterval(function () {
                if ($('#divCustomView').length != 0) {
                    //---Add initial html 
                    $('#divCustomView').append(result);
    
                    clearInterval(chkControl);
                }
            }, 300);
            return result;
        }
    
        JSLinkSecurity.Functions.RenderingAddMode = function (ctx) {
            if (ctx != null && ctx.CurrentItem != null ) {
                //--If custom form
                var result = '';
                //--Add the DIV object which will be used to add HTML at later point
                result = '<div id="divCustomView"></div>'
                //--Get all data first
                JSLinkSecurity.Functions.GetAllData();
                JSLinkSecurity.Functions.GetInitialHTMLForAddScreen();
                return result;
            }
        }
    
        JSLinkSecurity.Functions.HiddenFiledTemplate = function (ctx) {
            var result = "";
    
            if (ctx != null && ctx.CurrentItem != null) {
                //--If custom form
                result = "<span class='csrHiddenField'></span>";
            }
            
            return result;
        }
    
        JSLinkSecurity.Functions.HiddenFiledOnPostRender = function (ctx) {
            if (ctx != null) {
    
                //Hide fields
                if ($('.csrHiddenField').length != 0) {
                    $('.csrHiddenField').closest("tr").hide();
                }
    
                //--If custom form then only change the save click
                if (ctx != null ) {
                    if ($("input[id$=SaveItem]").length != 0) {
                        var button = $("input[id$=SaveItem]");
                        button.attr("onclick", "");
                        button.attr("onclick", "JSLinkSecurity.Functions.SaveData()");
                    }
                }
            }
        }
    
        JSLinkSecurity.Templates.OnPostRender = JSLinkSecurity.Functions.HiddenFiledOnPostRender;
        JSLinkSecurity.Templates.Fields = {
            'Email': {
                'NewForm': JSLinkSecurity.Functions.RenderingAddMode
            },
            'Feedback': {
                'NewForm': JSLinkSecurity.Functions.HiddenFiledTemplate
            },
            'Comments': {
                'NewForm': JSLinkSecurity.Functions.HiddenFiledTemplate
            }
        }

    In the above code, we are trying to hide Feedback/Comments field and adding custom new form view using Email field.

    Reference:

    https://social.technet.microsoft.com/wiki/contents/articles/37684.sharepoint-2013-jslink-client-side-rendering.aspx

    https://social.technet.microsoft.com/wiki/contents/articles/37745.sharepoint-2013-jslink-client-side-rendering-onprerender-event.aspx

    https://social.technet.microsoft.com/wiki/contents/articles/37746.sharepoint-2013-jslink-client-side-rendering-onpostrender-event.aspx


    Thanks, Amit Kumar, LinkedIn Profile ** My Blog
    Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

    Tuesday, April 18, 2017 12:46 PM
  • Hi,

    In SharePoint On-premise, I suggest you create a visual web part and customize the gridview to meet your requirement, then add the visual web part into the newform.aspx page.

    If you don't want to use visual web part, we can also customize the gridview using HTML table+DIV+CSS, then add the HTML code into a content editor web part into the newform.aspx page.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, April 19, 2017 8:35 AM
    Moderator