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

[robert]

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>

[Eyup]

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

[robert]

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>

[Eyup]

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

[robert]

<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>

[robert]

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>