Kendo Grid Advanced Scenarios
Kendo Grid Examples Advanced:
1) Add Footer Templates for the grid. Manipulate them to show as custom table cells.
2) Add Client Templates for the columns.
3) Adding row numbers for the Grid rows.
4) Adding custom comments functionality for Edit mode and Read mode.
5) Conditionally add Edit and Add buttons for the Grid and formatting these buttons.
6) Custom Delete functionality for the Grid in Inline Grid Edit mode.
7) Add kendo conditional logic to the client template columns.
8) Adding DropdownLists for Kendo Editor Templates.
9) Date and Currency formatting for the Kendo Grid columns.
10) Using data source events for errors and sync.
11) Using DataBound and DataBind events for Aggregates manipulation and edit mode manipulations.
JavaScript:
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
var stepCounter = 1;
var totalReceivedForTrial = 0;
function onTrialStepsGridDataBinding(e)
{
totalReceivedForTrial = 0;
for (var i = 0; i < e.sender.dataSource._data.length; i++)
{
if (e.sender.dataSource._data[i].PaymentAmountReceived >= e.sender.dataSource._data[i].Payment)
totalReceivedForTrial += e.sender.dataSource._data[i].Payment;
else
totalReceivedForTrial += e.sender.dataSource._data[i].PaymentAmountReceived;
}
}
function onTrialStepsGridDataBound(e) {
stepCounter = 1;
$('#'+e.sender.element[0].id+ ' .k-footer-template').find('td').each(function () {
if ($(this).text().length > 1) {
if($(this).text().indexOf('Total Recevied For Trial') > -1)
$(this).attr("colspan", "5");
else
$(this).attr("colspan", "2");
$(this).attr("style", "background: #88b760; color:white !important;");
}
else
$(this).remove();
});
$('.btnCreateStep').parent().attr('style', 'background-color:white !important')
renderDeleteButton(e.sender.element[0].id);
}
function renderDeleteButton(gridId)
{
var grid = $('#'+gridId).data('kendoGrid');
$('#'+gridId+ ' tbody tr .k-grid-Delete').each(function (index) {debugger;
var currentDataItem = grid.dataItems()[index];
if(currentDataItem.SourceLID == null)
$(this).remove();
else
{
this.innerHTML = "<span class='k-icon k-delete' title='Delete Step'></span>";
$(this).attr("data-stepid",currentDataItem.ModificationStepId);
}
})
}
function onTrialStepsGridRequestEnd(e)
{
if (e.response != null && (e.response.Errors == null || (e.response.Errors != null && !(Object.keys(e.response.Errors).length > 0))))
if (e.type == 'update' || e.type == 'create')
this.read();
}
function OnTrialStepsGridEdit(e) {
if (e.model.isNew() == false) {
$('#PaymentTypeLID').data('kendoDropDownList').enable(false);
$('#PaymentAmountTypeLID').data('kendoDropDownList').enable(false);
}
if (e.model.isNew()) {
$('#step0CommentsImg').attr('src', '../../Content/Images/comment.png');
$('#step0CommentsImg').attr('onclick', 'AddTrialStepComments(' + modificationStepId + ',"' + e.sender.element[0].id + '")');
$('#step0CommentsImg').attr('title', 'Add Comments');
}
e.container.find(".k-grid-cancel").bind("click", function () {
stepCounter = 1;
$('#' + e.sender.element[0].id + '').data("kendoGrid").dataSource.read();
$('#' + e.sender.element[0].id + '').data("kendoGrid").refresh();
})
if (e.model.PaymentTypeLID == 0) {
$("#Payment").data("kendoNumericTextBox").enable(false)
}
var modificationStepId = e.model.ModificationStepId;
$('#step' + modificationStepId + 'CommentsImg').attr('src', '../../Content/Images/comment.png');
$('#step' + modificationStepId + 'CommentsImg').attr('onclick', 'AddTrialStepComments(' + modificationStepId + ',"' + e.sender.element[0].id + '")');
$('#step' + modificationStepId + 'CommentsImg').attr('title', 'Add Comments');
//e.container.find(".k-grid-update").bind("click", function () {
//});
$($("#PaymentAmountReceived").data("kendoNumericTextBox").element[0]).bind("change",function(e){
var paymentDue = $("#Payment").data("kendoNumericTextBox").element[0].value;
var paymentReceived = e.target.value;
var ddl = $('#PaymentAmountTypeLID').data('kendoDropDownList');
if(paymentDue > paymentReceived)
ddl.select(1);
else if(paymentDue < paymentReceived)
ddl.select(3);
else
ddl.select(2);
ddl.trigger("change");
});
}
function onTrialStepsGridError(args, termId) {
if (args.errors) {
var grid = $("#trialStepsGrid" + termId).data("kendoGrid");
grid.one("dataBinding", function (e) {
e.preventDefault();
$.each(args.errors, function (propertyName) {
alert(this.errors);
});
});
}
}
function deleteStep(e,termId,modId)
{
var stepId=$(e.currentTarget).data("stepid");
$('.deleteTrialStepDialog .ui-dialog-content').dialog("destroy").remove();
var htmlText = '<span class="editor-label">Add Comments:</span><br/><textarea cols="20" maxlength="500" id="step' + stepId + 'DeleteComments" name="EnterComments" rows="2"></textarea> <div><span id="validationMessageDelComments"></span></div></div>';
$('<div></div>').appendTo('body')
.html(htmlText)
.dialog({
modal: true,
dialogClass: 'deleteTrialStepDialog',
title: 'Enter Comments',
width: 'auto',
resizable: false,
autoOpen: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
closeOnEscape: false,
buttons: {
Ok: function () {
var comments = $.trim($('#step'+stepId+'DeleteComments').val());
if (comments.length) {
$.ajax({
type: "POST",
url: "/Finalize/DeleteTrialStep",
data: JSON.stringify({ 'stepId': stepId, 'comments': comments, 'termId' : termId, 'id' : modId }),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (e) {
if (e[0].Code == 200) {
var gridId = e[0].Message;
$('#'+gridId).data("kendoGrid").dataSource.read();
$('#'+gridId).data("kendoGrid").refresh();
}
else {
alert(e[0].Message);
}
},
error: function (result) {
alert("Unable to delete the step. Please try again later");
}
});
$(this).dialog("close");
}
else {
$('#validationMessageDelComments').addClass('error');
$('#validationMessageDelComments').html('Comments are required..');
}
},
Cancel: function () {
$(this).dialog("close");
}
},
});
}
function AddTrialStepComments(stepId,gridId)
{
$('.editTrialStepDialog .ui-dialog-content').dialog("destroy").remove();
var htmlText = '<br/><div><select style="width:99%" onchange="onddlStepCommentsChange(' + stepId + ')" id="ddlstep' + stepId + 'Comments">' +
'<option selected="selected" value="">Select Comments</option>' +
'<option value="Disaster Impact">Disaster Impact</option>' +
'<option value="BK/Litigation Exception">BK/Litigation Exception</option>' +
'<option value="Management/investor Exception">Management/investor Exception</option>' +
'<option value="Other">Other</option></select>';
htmlText += '<br/><textarea cols="20" style="display:none" id="step' + stepId + 'Comments" name="EnterComments" rows="2"></textarea> <div><span id="validationMessageComments"></span></div></div>';
//htmlText += '<script>$("#ddlstep' + stepId + 'Comments").kendoDropDownList(); <\/script>';
$('<div></div>').appendTo('body')
.html(htmlText)
.dialog({
modal: true,
dialogClass: 'editTrialStepDialog',
title: 'Enter Comments',
width: '360px',
resizable: false,
autoOpen: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
$("#ddlstep" + stepId + "Comments").kendoDropDownList();
},
closeOnEscape: false,
buttons: {
Ok: function () {
if ($.trim($('#step'+stepId+'Comments').val()).length) {
$(this).dialog("close");
}
else {
$('#validationMessageComments').addClass('error');
$('#validationMessageComments').html('Comments are required..');
}
},
Cancel: function () {
//$('#'+gridId).data("kendoGrid").cancelChanges();
$(this).dialog("close");
}
},
});
}
function ShowTrialStepComments(stepId)
{
$('#dialogStepHistory').data('param_1', stepId).dialog('open');
}
$(function () {
var modId = '@Model.ModificationId';
$('.commentsTrialStepDialog .ui-dialog-content').dialog("destroy").remove();
$('#dialogStepHistory').dialog({
autoOpen: false,
width: 'auto',
resizable: false,
title: 'Comments History',
modal: true,
dialogClass: 'commentsTrialStepDialog',
open: function (event, ui) {
$(this).html('<img style="margin-top:15%; margin-left:50%" id="commentsHistoryLoading" src="../../Content/images/load.gif" alt="Loading.."/>');
$.ajax({
type: "GET",
cache: false,
url: "/Finalize/ShowTrialStepComments?modificationId=" + modId + "&stepId=" + $(this).data('param_1'),
success: function (result) {
$('#dialogStepHistory').html(result);
},
error: function (result) {
$('#dialogStepHistory').html('<div class="error">Failed to Retrieve ( ' + result.statusText + ')</div>');
}
});
},
buttons: {
"Add": function (e) {
var stepId = $(this).data('param_1');
$('#step' + stepId + 'CommentsAdditional').dialog('open');
},
"Close": function () {
$(this).dialog("close");
}
}
});
})
function renderNumber(data) {
return stepCounter++;
}
function trialStepCount(data)
{
return data.PaymentSteps.length;
}
function trialEndDate(data)
{
var dates = [];
var retVal = "";
if (data.PaymentSteps.length > 0) {
for (var i = 0; i < data.PaymentSteps.length; i++) {
if (data.PaymentSteps[i].PaymentDue != null)
dates.push(kendo.parseDate(data.PaymentSteps[i].PaymentDue, "d"));
}
if(dates.length>0)
retVal = kendo.toString(kendo.date.lastDayOfMonth(new Date(Math.max.apply(null, dates))), "d");
}
return retVal;
}
function renderPaymentType(PaymentTypeLID,PaymentType) {
if (PaymentTypeLID == 1)
return "<span title='"+PaymentType+"' class='paymentBadge downPayment'>DP</span>";
return "<span title='" + PaymentType + "' class='paymentBadge planPayment'>TP</span>";
}
function renderPaymentAmountType(data,PaymentAmountType){
if(PaymentAmountType == "Short"){
var shortAmount = 0;
if(data.Payment != null){
if(data.PaymentAmountReceived != null)
shortAmount = data.Payment - data.PaymentAmountReceived;
else
shortAmount = data.Payment;
}
return PaymentAmountType + "<span style='color:red'> ("+round(shortAmount,12)+") </span>";
}
return PaymentAmountType;
}
function setFooter(data, footerText) {
var retVal = '';
if (footerText == 'CompletedDate') {
if (data.PaymentAmountReceived.sum < data.Payment.sum)
retVal = 'Completed Date:     ';
else {
retVal = "Completed Date:     " + kendo.toString(kendo.parseDate(data.PaymentRecieved.max, "d"), "d");
}
}
else if (footerText == 'TotalReceviedForTrial') {
var totalForTrial = kendo.parseFloat(totalReceivedForTrial);
if (totalForTrial < data.Payment.sum)
retVal = 'Total Recevied For Trial:      ' + kendo.toString(totalForTrial, "C") + ' (Short)';
else if(totalForTrial > data.Payment.sum)
retVal = 'Total Recevied For Trial:      ' + kendo.toString(totalForTrial, "C") + ' (Over)';
else
retVal = 'Total Recevied For Trial:      ' + kendo.toString(totalForTrial, "C") + ' (Exact)';
}
return retVal;
}
function commentsParam(e) {
return {
comments: $.trim($('#step' + e.ModificationStepId + 'Comments').val())
};
}
function onddlStepCommentsChange(stepId) {
$("#step" + stepId + "Comments").attr('style', 'width:99% !important; min-width: 200px;margin-top:20px; height:30px;');
if ($("#ddlstep" + stepId + "Comments").val() == 'Other')
$("#step" + stepId + "Comments").val('');
else
$("#step" + stepId + "Comments").val($("#ddlstep" + stepId + "Comments").val());
}
$(document).ready(function () {
$('.LockTrialSummary').on('click', function (e) {
var oThis = $(this);
$.ajax({
type: 'POST',
url: '/Finalize/LockTrialSummary/' + oThis.data('modid') + '?modTermId=' + oThis.data('modtermid'),
beforeSend: function () {
$('.LockTrialSummary').attr('disabled', 'disabled');
oThis.val('Locking Trial Summary');
},
success: function (e) {
oThis.val('Lock Trial Summary');
$('.LockTrialSummary').removeAttr('disabled');
if (e[0].Code == 200) {
$('#CalculateStepsMessageArea').html('Please wait for the page to reload...');
window.location.href = e[0].Message;
}
else {
$('#CalculateStepsMessageArea').html('<span class=error>' + e[0].Message + '</span>');
}
}
});
});
})
function trialPlanStatusToggleButton(data) {
var value = "";
var canEditTrialsteps = '@(ModificationSummary.CanEditTrialSteps(UserSessionVariables.LoggedInUser.Roles)?1 :0)';
var statusTypeIsterminal = '@(ViewBag.StatusTypeIsTerminal ? 1 : 0)';
var trialDocMailed = '@ViewBag.TrialDocMailed';
//Service Transfer import
if (
statusTypeIsterminal == '0'
&&
'@Convert.ToInt32(ViewBag.ModificationSourceLID)' == '@Convert.ToInt32(PNMAC.PennySaver.Domain.Enums.ModificationCreatedType.Servicing_Transfer)'
&&
data.MovrDecisionID != null
&&
data.MovrDecisionSourceLID != null
&&
data.MovrDecisionSourceLID == '@Convert.ToInt32(PNMAC.PennySaver.Domain.Enums.MovRDecisionSource.ImportNoDecision)'
)
{
if (data.TrialStatusLID == '@Convert.ToInt32(PNMAC.PIT.Domain.Models.PlanStatus.SetUp)'
||
data.TrialStatusLID == '@Convert.ToInt32(PNMAC.PIT.Domain.Models.PlanStatus.Inactive)'
) {
value = " <button type='button' class='activate_trial_plan' trialtermid="+ data.ModificationTermId + " onclick='UpdateTrialTermActiveStatus(this,1)' "+ (canEditTrialsteps == '0' ? " disabled " : "") + ">Activate</button>";
value +=" <img style='display:none' id='workingIconMultiTermTrialPlan' src='../../Content/images/load.gif' alt='Working...' />"
}
else if( data.TrialStatusLID == '@Convert.ToInt32(PNMAC.PIT.Domain.Models.PlanStatus.Active)')
{
value = " <button type='button' class='deactivate_trial_plan' trialtermid="+ data.ModificationTermId + " onclick='UpdateTrialTermActiveStatus(this,1)' "+ (canEditTrialsteps == '0' ? " disabled " : "") + ">De-Activate</button>";
value +=" <img style='display:none' id='workingIconMultiTermTrialPlan' src='../../Content/images/load.gif' alt='Working...' />"
}
}
//Mod decision is MovR decision and trial plan has been setup/inactive
else if (
statusTypeIsterminal == '0'
&&
data.MovrDecisionID != null
&&
data.MovrDecisionSourceLID != null
&&
(
data.MovrDecisionSourceLID == '@Convert.ToInt32(PNMAC.PennySaver.Domain.Enums.MovRDecisionSource.MovR1)'
||
data.MovrDecisionSourceLID == '@Convert.ToInt32(PNMAC.PennySaver.Domain.Enums.MovRDecisionSource.MovR2)'
||
data.MovrDecisionSourceLID == '@Convert.ToInt32(PNMAC.PennySaver.Domain.Enums.MovRDecisionSource.MovR3)'
)
&&
trialDocMailed != null && trialDocMailed != 'null' && trialDocMailed != ''
)
{
if (data.TrialStatusLID == '@Convert.ToInt32(PNMAC.PIT.Domain.Models.PlanStatus.SetUp)'
||
data.TrialStatusLID == '@Convert.ToInt32(PNMAC.PIT.Domain.Models.PlanStatus.Inactive)'
)
{
value = " <button type='button' class='activate_trial_plan' trialtermid="+ data.ModificationTermId + " onclick='UpdateTrialTermActiveStatus(this,0)'"+ (canEditTrialsteps == '0' ? " disabled " : "") + ">Activate</button>";
value +=" <img style='display:none' id='workingIconMultiTermTrialPlan' src='../../Content/images/load.gif' alt='Working...' />"
}
}
return value;
}
function UpdateTrialTermActiveStatus(elem,toggle)
{
var trialTermId = $(elem).attr('trialtermid');
var deactivate_trial_plan = $(elem).hasClass('deactivate_trial_plan');
var activate_trial_plan = $(elem).hasClass('activate_trial_plan');
var trialPlanStatus = deactivate_trial_plan == true ? 4 : (activate_trial_plan == true ? 2 : -1);
if(trialTermId != 'undefined' && trialTermId!= null)
{
$('#workingIconMultiTermTrialPlan').show();
$.ajax(
{
type: "POST",
url: "/Finalize/UpdateTrialPlanActiveStatus",
data: JSON.stringify({ 'id': @Model.ModificationId, 'modificationTermId': trialTermId,'trialStatusLID': trialPlanStatus }),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log('trial plan status updated');
//$('.msgSaveDA').text('Saved successfully.');
if($(elem).hasClass('deactivate_trial_plan'))
{
if(toggle ==1)
{
$(elem).removeClass('deactivate_trial_plan');
$(elem).addClass('activate_trial_plan');
$(elem).text('Activate');
}
else
{
$(elem).hide();
}
}
else
{
if(toggle ==1)
{
$(elem).removeClass('activate_trial_plan');
$(elem).addClass('deactivate_trial_plan');
$(elem).text('De-Activate');
}
else
{
$(elem).hide();
}
}
$('#workingIconMultiTermTrialPlan').show();
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('error');
ShowErrorMsgInUI(errorThrown);
$('#workingIconMultiTermTrialPlan').hide();
},
complete: function(){
$('#workingIconMultiTermTrialPlan').hide();
}
});
}
}
</script>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
CSHTML:
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@if (trialSummary.PaymentSteps.Count > 0)
{
@(Html.Kendo().Grid<TrialStep>().Name("trialStepsGrid" + trialSummary.ModificationTermId).HtmlAttributes(new { @class = "trialStepsGrid" })
.Columns(columns =>
{
columns.Template(t => { }).ClientTemplate("#= renderNumber(data) #").Title("Payment#").Width(40);
columns.Bound(p => p.PaymentDue).Format("{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}")
.Title("Payment Due Date").Width(40).ClientFooterTemplate("#= setFooter(data,'CompletedDate')#");
columns.Bound(p => p.Payment).Format("{0:C}").Title("Amount").Width(100)
.ClientFooterTemplate("Total Expected: #= kendo.toString(sum,'C') #").EditorTemplateName("DecimalSimple");
columns.Bound(p => p.PaymentDeadline).Format("{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}")
.Title("Payment Must Be Received By").Width(40);
columns.Bound(p => p.PaymentRecieved).Format("{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}")
.Title("Received Date").Width(100);
columns.Bound(p => p.PaymentAmountReceived).Format("{0:C}").Title("Received Amount").Width(100).
ClientFooterTemplate("Total Received: #= kendo.toString(sum,'C') #").EditorTemplateName("DecimalSimple");
columns.Bound(p => p.PaymentAmountTypeLID).Title("Shortage/Overage").ClientTemplate("#= renderPaymentAmountType(data,PaymentAmountType) #")
.EditorTemplateName("PaymentAmountTypeDropdown");
columns.Bound(p => p.PaymentStatusLID).Title("Accepted").ClientTemplate("#= PaymentStatus #")
.EditorTemplateName("PaymentStatusDropdown")
.ClientFooterTemplate("#= setFooter(data,'TotalReceviedForTrial')#");
columns.Template(e => { })
//.ClientTemplate("#if(StepNotesCount>0){#<img title='Show comments history' id='step#= ModificationStepId#CommentsImg' style='cursor: pointer;' src='../../Content/Images/comment.png' onclick='ShowTrialStepComments(#= ModificationStepId#)'/>#}#")
.ClientTemplate("<img id='step#= ModificationStepId#CommentsImg' style='cursor: pointer;'"+
"#if(StepNotesCount>0){# src='../../Content/Images/comment.png' title='Show comments history'#}# onclick='ShowTrialStepComments(#= ModificationStepId#)'/>")
.Width(50).Title("Notes");
columns.Bound(p => p.PaymentTypeLID).Title("StepType")
.ClientTemplate("#= renderPaymentType(PaymentTypeLID,PaymentType) #")
.EditorTemplateName("PaymentTypeDropdown");
columns.Command(command =>
{
command.Edit().UpdateText(" ").CancelText(" ").Text(" ");
command.Custom("Delete").Click("function(e){ deleteStep(e,'" + trialSummary.ModificationTermId + "','" + trialSummary.ModificationId + "'); }");
}).Visible(canEdit).Width(40);
})
.ToolBar(t => { if (canEdit) { t.Create().Text("Add Step").HtmlAttributes(new { @class = "btnCreateStep" }); } })
.Editable(editable =>
{
if (canEdit)
{
editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine);
editable.CreateAt(Kendo.Mvc.UI.GridInsertRowPosition.Bottom);
}
else
editable.Enabled(false);
})
.Events(events =>
{
events.DataBound("onTrialStepsGridDataBound");
events.DataBinding("onTrialStepsGridDataBinding");
events.Edit("OnTrialStepsGridEdit");
})
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false)
.Aggregates(aggregates =>
{
aggregates.Add(p => p.PaymentRecieved).Max();
aggregates.Add(p => p.Payment).Sum();
aggregates.Add(p => p.PaymentAmountReceived).Sum();
aggregates.Add(p => p.PaymentDue).Max();
aggregates.Add(p => p.PaymentRecieved).Count();
aggregates.Add(p => p.Payment).Count();
})
.Model(model =>
{
model.Field(m => m.Payment).Editable(true);
model.Field(m => m.PaymentDue).Editable(true);
model.Field(m => m.PaymentRecieved).Editable(true);
model.Field(m => m.PaymentDeadline).Editable(true);
model.Field(m => m.PaymentAmountReceived).Editable(true);
model.Field(m => m.PaymentStatusLID).Editable(true);
model.Field(m => m.PaymentAmountTypeLID).Editable(true);
model.Field(m => m.PaymentTypeLID).Editable(true);
})
.Events(events =>
{
events.Error("function(e){onTrialStepsGridError(e,'" + trialSummary.ModificationTermId + "')}");
events.RequestEnd("onTrialStepsGridRequestEnd");
})
.Model(model => { { model.Id(p => p.ModificationStepId); model.Field(p => p.PaymentStatusLID).DefaultValue(0); model.Field(p => p.PaymentTypeLID).DefaultValue(1); model.Field(p => p.PaymentAmountTypeLID).DefaultValue(0); } })
.Create(create => create.Action("TrialSteps_Create", "Finalize", new { id = Model.ModificationId, termId = trialSummary.ModificationTermId }).Data("commentsParam"))
.Read(read => read.Action("TrialSteps_Read", "Finalize", new { id = Model.ModificationId, termId= trialSummary.ModificationTermId }))
.Update(update => update.Action("TrialSteps_Update", "Finalize", new { id = Model.ModificationId }).Data("commentsParam"))
)
)
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
CSS:
--------------------------------------------------------------------------------------------------------------------------
.trialStepsGrid .k-button.k-button-icontext.k-primary.k-grid-update, .trialStepsGrid .k-button.k-button-icontext.k-grid-edit, .trialStepsGrid .k-button.k-button-icontext.k-grid-cancel, .trialStepsGrid .k-button.k-button-icontext.k-grid-delete, .trialStepsGrid .k-button.k-button-icontext.k-grid-Delete {
min-width: 20px;
width: 20px;
background: none;
border: 0px;
}
.paymentBadge{
border-radius: 0.8em !important;
-moz-border-radius: 0.8em !important;
-webkit-border-radius: 0.8em !important;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 2.6em;
}
.paymentBadge.downPayment{
background: #88b760;
}
.paymentBadge.planPayment{
background: #ccc;
}
--------------------------------------------------------------------------------------------------------------------------
Comments
Post a Comment