Popup Grid Different Templates on Edit/Create

22 posts, 1 answers
  1. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 17 Jun 2014 Link to this post

    Hi,

    1) Can we have a different template for Create a record and Edit a record in Grid ? If it can achieved ; Can you point me to some example.

    2) Based on Record in a grid can we have different template of popup's on Edit of each record? if it can be achieved; Can you point me to some example.


    Thanks,
    Chatrapathi Chennam
  2. CS
    CS avatar
    87 posts
    Member since:
    Apr 2014

    Posted 18 Jun 2014 in reply to Chatra Link to this post

    I had the very same problem. I solved this by calling the same method for both cases "create" and "update" and filled it with the logic that decides weather to do a create or update.
  3. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 18 Jun 2014 Link to this post

    Hi Stefan thanks for the reply.

    The logic to implement when a Create or Update Action is taken place can be achieved based on the condition  "e.model.isNew()" in edit function " edit: function (e) { } " .But I am looking at how to Show or Configure a different template on UI for Create or Update Actions.

    editable: {
                    mode: "popup",
                    template: kendo.template($("#popup_editor").html())
                },

    Based on your reply If I understand correctly you are calling same template(popup_editor) for Create and Update but setting the condition in the template for Create or Update ?  If so can you provide the snippet of this.

    Thanks,
    Chatrapathi Chennam













  4. CS
    CS avatar
    87 posts
    Member since:
    Apr 2014

    Posted 18 Jun 2014 in reply to Chatra Link to this post

    I use it for regular grid editing I'm not sure if it works similar in a popup. I tried to boil it down and delete everything as far as possible just to give you a hint on how I did it. Formatting options don't seem to work currently.

    var updateSalesOrderDetail = function ( data, options ) {};

    var createSalesOrderDetail = function ( data, options ) {};

    var createAndUpdate = function ( options ) {
        if ( value.hasOwnProperty( "salesorderdetailid" ) ) {
            return updateSalesOrderDetail( value, options );
        } else if ( !value.hasOwnProperty( "salesorderdetailid_value" ) ) {
            return createSalesOrderDetail( value, options );
        } else {
            return options.success( [] );
        }
    };

    var dataSource = new kendo.data.DataSource( {
        batch: true,
        pageSize: 4,
        autoSync: false,
        transport: {
            create: createAndUpdate,
            read: function ( options ) {},
            update: createAndUpdate
        },
        schema: {
            model: {
                id: "AllProducts",
                fields: {
                    productid_name: {
                        type: "string",
                        nullable: false,
                        editable: false
                    }
                }
            },
            total: function ( data ) {
                return data.length;
            },
            type: "json"
        }
    } );
  5. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 18 Jun 2014 Link to this post

    Hi Stefan,

    Thanks for the reply.

    But the One I am looking for is more of a different templates on View perspective, but not about the  logic to handle the model for edit/create operations.


    Thanks,
    Chatrapathi Chennam
  6. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 23 Jun 2014 Link to this post

    Hi Chatra,

    In case you need to have two different editor templates for editing and creating records than you can use the following syntax to achieve the desired behavior:

    $("#grid").kendoGrid({
      editable: {
        mode:"popup",
        template: $("#template").html()
      }

    <script type="text/x-kendo-template" id="template">   
        #if(data.isNew()) {#
            #var createTemp = kendo.template($("\#createTemplate").html());#
            #=createTemp(data)#
        #} else {#
            #var editTemp = kendo.template($("\#editTemplate").html());#
            #=editTemp(data)#
        #}#
    </script>

    Create template:
    <script type="text/x-kendo-template" id="createTemplate">   
        <input id="categories" style="margin-left:10px">
    </script>

    Edit template:
    <script type="text/x-kendo-template" id="editTemplate">   
        <input id="products" style="margin-left:10px">
    </script>

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Phil
    Phil avatar
    13 posts
    Member since:
    Mar 2014

    Posted 04 Jan 2017 Link to this post

    Has this been made cleaner in more recent versions of the tools? Having to add ugly hacks such as this, defeats the purpose of having a simple, clean programming interface. It wouldn't be difficult to directly add syntax to the Grid control that differentiates between an Edit event and a Create event, for the templates.
  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2033 posts

    Posted 09 Jan 2017 Link to this post

    Hello Phil,

    I am afraid that there is no cleaner way of achieving this functionality. Anyway the edit event is fired after the popup template is used and fields are bound to the model. As my colleague pointed out the isNew method of the data item can be used to determine whether a new model is created or existing model is updated. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. SAI NAVEEN KUMAR
    SAI NAVEEN KUMAR avatar
    1 posts
    Member since:
    Jun 2017

    Posted 25 Jul 2017 in reply to Vladimir Iliev Link to this post

    Hi,

    with the above syntax i am facing some issue, as when i click on edit button for first time it is showing the create Template, then i press ESC and tried again then its showing the edit template, what i have noticed is at first for both conditions its calling create template only later its is working fine.

  10. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2033 posts

    Posted 26 Jul 2017 Link to this post

    Hello,

    We would need a sample dojo example to review the implementation and see what happens. 

    Regards,
    Boyan Dimitrov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Matthew
    Matthew avatar
    8 posts
    Member since:
    Oct 2018

    Posted 07 Nov 2018 in reply to Vladimir Iliev Link to this post

    Is there an equivalent to setting the template to the html of an element using the MVC control?
  12. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2033 posts

    Posted 09 Nov 2018 Link to this post

    Hello,

    I would suggest to use a custom popup template example as a base and modify the custom popup editor template as shown in the forum discussion. Both create and update templates can be defined on the page with Kendo UI Grid for ASP.NET MVC. 



    Regards,
    Boyan Dimitrov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. Steve
    Steve avatar
    17 posts
    Member since:
    Oct 2014

    Posted 10 Nov 2018 in reply to Boyan Dimitrov Link to this post

    Could you try replying this time to the question in context of the original question - namely, a COMPLETE UNABRIDGED EXAMPLE of custom editors, one for ADD and one for EDIT.
  14. Matthew
    Matthew avatar
    8 posts
    Member since:
    Oct 2018

    Posted 11 Nov 2018 Link to this post

    I'm sorry, but I don't see in your provided example where the template is discriminated based on an update vs edit command.
    Is there an available example of an MVC Grid control that shows how to present Form-A for "insert" and Form-B for "Edit"?
  15. Steve
    Steve avatar
    17 posts
    Member since:
    Oct 2014

    Posted 11 Nov 2018 in reply to Matthew Link to this post

    Don't hold your breath Matthew... they are very good at IGNORING questions or worse, giving incomplete or not relevant information only to be backed up by their sales people constantly emailing you about giving them more money.
  16. Georgi
    Admin
    Georgi avatar
    481 posts

    Posted 13 Nov 2018 Link to this post

    Hi Matthew,

    A similar approach to the one provided by my colleague Vladimir is applicable for the Wrappers. In order to use a Kendo Template as a template for the popup editor, it is necessary to modify the options of the grid on the client and specify the id of the template within the document ready event handler.

    e.g.

    // specify  editor name
            $(function () {
                var grid = $('#grid').data('kendoGrid');
                var options = grid.options;
                options.autoBind = true;
                options.toolbar = [{ name: "create" }]
                options.editable.template = $("#template-edit").html()
                grid.setOptions(options);
        })
     
    // template
     
    <script type="text/x-kendo-template" id="template-edit">
        #if(data.isNew()) {#
        #var createTemp = kendo.template($("\#createTemplate").html());#
        #=createTemp(data)#
        #} else {#
        #var editTemp = kendo.template($("\#editTemplate").html());#
        #=editTemp(data)#
        #}#
    </script>
     
    <script type="text/x-kendo-template" id="createTemplate">
        @Html.Partial("CreateTemplate")
    </script>
     
    <script type="text/x-kendo-template" id="editTemplate">
        @Html.Partial("EditTemplate")
    </script>

    For your convenience I am attaching a small sample which demonstrates the above approach. Please examine it and let me know if it helps.


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  17. Steve
    Steve avatar
    17 posts
    Member since:
    Oct 2014

    Posted 16 Nov 2018 in reply to Georgi Link to this post

    This is annoying... can someone on THAT end answer a question in Razor format instead of always in JavaScript....
  18. Georgi
    Admin
    Georgi avatar
    481 posts

    Posted 20 Nov 2018 Link to this post

    Hi Steve,

    Could you please examine the sample from my previous message once again?

    You will notice that actually a Razor views are used for the templates which are rendered within Kendo Templates.

    Have in mind that the grid is a client side component. The server wrappers provide a strongly typed configuration to facilitate the developers. Nevertheless, they evaluate to a script which initializes a jQuery Kendo Grid. In other words, you do not have the actual widget available on the server and it is not possible to determine whether the user is editing or creating server side.


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  19. Steve
    Steve avatar
    17 posts
    Member since:
    Oct 2014

    Posted 20 Nov 2018 in reply to Georgi Link to this post

    Thanks... I got your point... sadly you missed mine.   That's ok... we're moving on.
  20. Matthew
    Matthew avatar
    8 posts
    Member since:
    Oct 2018

    Posted 26 Nov 2018 in reply to Georgi Link to this post

    Thank you for your reply and it certainly allows me to discriminate separate forms per create vs edit. However, how should one proceed if each form requires a different model?
  21. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2033 posts

    Posted 28 Nov 2018 Link to this post

    Hello,

    In general the templates (both edit and create templates in this case) should use same model - the one that the Kendo UI Grid for ASP.NET MVC is bound to. The Kendo UI Grid for ASP.NET MVC and respectively the Kendo UI DataSource (the component that performs data operations) expects and pass a model with the structure of the model used for binding the Kendo UI Grid for ASP.NET MVC. 

    Regards,
    Boyan Dimitrov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  22. Josh
    Josh avatar
    1 posts
    Member since:
    Feb 2019

    Posted 1 day and 7 hours ago in reply to Georgi Link to this post

    This example is fairly close to what I would like to do. I am wondering if it is possible to change text I have circled in red. When creating or adding new records it saying edit and update makes no sense. Can you please provide a solution for how to accomplish this task.
Back to Top