This is a migrated thread and some comments may be shown as answers.

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

5 Answers 325 Views
This is a migrated thread and some comments may be shown as answers.
robert
Top achievements
Rank 1
robert asked on 06 Aug 2018, 02:00 PM
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>

5 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 07 Aug 2018, 11:34 PM
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.
0
robert
Top achievements
Rank 1
answered on 08 Aug 2018, 12:29 PM
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>
0
Eyup
Telerik team
answered on 10 Aug 2018, 07:23 AM
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.
0
robert
Top achievements
Rank 1
answered on 10 Aug 2018, 11:34 AM
<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>
0
robert
Top achievements
Rank 1
answered on 10 Aug 2018, 11:39 AM
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>
Tags
Grid
Asked by
robert
Top achievements
Rank 1
Answers by
Eyup
Telerik team
robert
Top achievements
Rank 1
Share this question
or