Today we wanted to add several custom buttons (schedule activity and complete unscheduled activity buttons) in an editable grid. At first we thought about doing the usual convert to custom smart part, however that would have made simpler customizations down the road a little more difficult. So we decided to just take advantage of the custom format function and try to inject the custom buttons that we wanted.
First, we added just a regular editable field and bound it to an arbitrary field in the data set. See screenshot below.
Then, it was just a matter of injecting into this custom format function property. The code below is what I used for the schedule activity buttons.
null, format: function (rowIndex, item) {
if (item != null) {
return dojo.string.substitute('<img title="Schedule Meeting" onclick="scheduleActivity('Meeting', '${0}', '${1}');" src="images/icons/Schedule_Meeting_16x16.gif" class="schedulebtn"> ' +
'<img title="Schedule Phone Call" onclick="scheduleActivity('PhoneCall', '${0}', '${1}');" src="images/icons/Schedule_Call_16x16.gif" class="schedulebtn"> ' +
'<img title="Schedule To-Do" onclick="scheduleActivity('ToDo', '${0}', '${1}');" src="images/icons/Schedule_To_Do_16x16.gif" class="schedulebtn">',
[item['Account']['$key'], item['Account']['AccountName']]);
}
else
return '';
}
Note: We don’t actually want to use the “Custom Format Function” property. This gets mapped to the “formatter” property of the field, and that doesn’t give us what we actually need. So we simply set the “formatter” property to null, then inject our custom “format” property. The “format” function has access to the entire row we’re looking at rather than just the single bound field.