How to modify the GRID 'Edit' button and save: functionality?

6 posts, 0 answers
  1. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 06 Aug 2018 Link to this post

    I'm wondering how to modify the following 'edit' and save: statements/functionality to just show a "Link" title on the button and only have to select the "Link" button once to bring up a hyperlinked page? attached is some more code detail with snap shots, thanks!
     

           { 'command'  : ['edit'], 'title': ' ', 'width': '180px' }

           data-bind="source: reportDs , events: { save: onSave}"

     
    <script type="text/x-kendo-template" id="report-template">
        <h1 style="text-align:center;font-size:24px;color:darkmagenta;">Personnel Security Activity Report</h1>
      
            
        <div class="report-container">
            <div style="margin:5px;">
                <div id="gridAppUsers" data-role="grid"
                     data-columns="[
     
                                    {
                                        'title'    : 'Report',
                                        'field'    : 'reportLabel'     
                                                      
                                    },
                                    {
     
                                        'title'    : 'Report Link',
                                        'field'    : 'reportLink'
     
                                    },
                                    { 'command'  : ['edit'], 'title': ' ', 'width': '180px' }
                                   ]"
                     data-editable="inline"
                     data-sortable="true"
                     data-scrollable="true"
                     data-selectable="single, row"
                     data-bind="source: reportDs , events: { save: onSave}"
                     >
     
                </div>
            </div>
        </div>
  2. Eyup
    Admin
    Eyup avatar
    4046 posts

    Posted 07 Aug 2018 Link to this post

    Hello Robert,

    You can achieve this requirement by using a custom command button:
    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.command#columns.command.click

    I've modified this dojo sample to make it similar to your specific scenario:
    https://dojo.telerik.com/ejeKoMeF/2

    I hope this will prove helpful.

    Regards,
    Eyup
    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.
  3. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 08 Aug 2018 in reply to Eyup Link to this post

    Hi Eyup, I tried about 30 permutations of syntax format for the example, but I think the problem is that this program is using a template format which doesn't sound like the regular Telerik approach and that's why its so hard to get this working. So I guess for now I will just have to go with the standard Edit, Update button as that is working and get back to this later as I've already spent 2 weeks trying to get this to work, so will get back later on this, thanks Eyup!
     
    initViews: function (iCurrentUser) {
                    var that = this;
     
                    view = new kendo.View('report-template', { model: that.get('activityReport') });
                    that.set('reportView', view);
     
                    that.router.route("/report", function () {
                        var nav = that.get('navViewModel');
                        if (nav.isNeedChanged(3) === true) {
                            that.mainLayout.showIn(that.get('content'), that.get('reportView'), "swap");
    <script type="text/x-kendo-template" id="report-template">
        <h1 style="text-align:center;font-size:24px;color:darkmagenta;">Personnel Security Activity Report</h1>
     
     
        <div class="report-container">
            <div style="margin:5px;">
                <div id="gridAppUsers" data-role="grid"
                     data-columns="[
     
                                    {
     
                                        'title'    : 'Report',
                                        'field'    : 'reportLabel'
     
                                    },
                                    {
     
                                        'title'    : 'Report Link',
                                        'field'    : 'reportLink'
     
                                    },
                                     
     
                                    {
                                       'command'    : { 'click'  : 'function(e) { e.preventDefault(); var tr = $(e.target).closest('tr'); var data = this.dataItem(tr); console.log('hello'); }'  }
                                    }
                      
     
                                   ]"
                     data-editable="inline"
                     data-sortable="true"
                     data-scrollable="true"
                     data-selectable="single, row"
                     data-bind="source: reportDs , events: { save: onSave}">
     
                </div>
            </div>
        </div>
     
     
    </script>
  4. Eyup
    Admin
    Eyup avatar
    4046 posts

    Posted 10 Aug 2018 Link to this post

    Hi Robert,

    Sure, feel free to modify the dojo sample depending on your specific configuration and get back to us when you are ready.

    Regards,
    Eyup
    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.
  5. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 10 Aug 2018 in reply to Eyup Link to this post

    <script type="text/x-kendo-template" id="report-template">
        <h1 style="text-align:center;font-size:24px;color:darkmagenta;">Personnel Security Activity Report</h1>
     
     
        <div class="report-container">
            <div style="margin:5px;">
                <div id="gridAppUsers" data-role="grid"
                     data-columns="[
     
                                    {
     
                                        'title'    : 'Report',
                                        'field'    : 'reportLabel'
     
                                    },
                                    {
     
                                        'title'    : 'Report Link',
                                        'field'    : 'reportLink',
                                        'template' :  kendo.template($('#run-report-template').html())
                                    }
                                  ]"
                     data-editable="inline"
                     data-sortable="true"
                     data-scrollable="true"
                     data-selectable="single, row"
                     data-bind="source: reportDs , events: { save: onSave }">
     
                </div>
            </div>
        </div>
     
    </script>
     
    <script type="text/x-kendo-template" id="run-report-template">
        <div style="margin-left:20px;">
            <a href="#=reportLink#" target="_blank"><span>Run Report</span></a>
        </div>
    </script>
  6. robert
    robert avatar
    25 posts
    Member since:
    May 2009

    Posted 10 Aug 2018 in reply to Eyup Link to this post

    Hi Eyup, because we're using a Kedo.view template, i think we were unable to get the syntax formatted, so we used the kendo.template to call a sub template and now its working, thanks for the help on this!
    <script type="text/x-kendo-template" id="report-template">
        <h1 style="text-align:center;font-size:24px;color:darkmagenta;">Personnel Security Activity Report</h1>
     
     
        <div class="report-container">
            <div style="margin:5px;">
                <div id="gridAppUsers" data-role="grid"
                     data-columns="[
     
                                    {
     
                                        'title'    : 'Report',
                                        'field'    : 'reportLabel'
     
                                    },
                                    {
     
                                        'title'    : 'Report Link',
                                        'field'    : 'reportLink',
                                        'template' :  kendo.template($('#run-report-template').html())
                                    }
                                  ]"
                     data-editable="inline"
                     data-sortable="true"
                     data-scrollable="true"
                     data-selectable="single, row"
                     data-bind="source: reportDs , events: { save: onSave }">
     
                </div>
            </div>
        </div>
     
    </script>
     
    <script type="text/x-kendo-template" id="run-report-template">
        <div style="margin-left:20px;">
            <a href="#=reportLink#" target="_blank"><span>Run Report</span></a>
        </div>
    </script>
Back to Top