How to modify the GRID 'Edit' button and save: functionality? in Kendo UI for jQuery

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

Grid

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

robert asked on 06 Aug 2018, 02:00 PM

linkbutton.zip

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>

5 Answers, 1 is accepted

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>

</script>

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>

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

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>

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