Programming Hut: Kendo

1.Pass toDate in kendo Template
schema: {
model: {
id: "meetingId",
fields: {
meetingId: { from: "MeetingId" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: {
type: "date",
from: "stime",
template: "#= kendo.parseDate(stime) #"
},
end: {
type: "date", from: "etime",
template: "#= kendo.parseDate(etime) #"
},
}
}
}

2.Disable date in Kendo datepicker and Calender
$scope.dates = disable date list
$("#datepicker").kendoDatePicker({
min: new Date(),
value: new Date(),
dates: $scope.dates,
disableDates: disableDate,
change: onChange,
});

function disableDate(date) {
if (date && compareDates(date, $scope.dates)) {
return false;
} else {
return true;
}
}

function compareDates(date, dates) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates[i]).getDate() == date.getDate() &&
new Date(dates[i]).getMonth() == date.getMonth() &&
new Date(dates[i]).getYear() == date.getYear()) {
return true
}
}
}

3.Post parameter with autocomplete, Bind data-source to kendo auto complete in button click event
<div>
@Html.TextBoxFor(m => m.Service_By_Name)
</div>

<script>
var kendoAutoCompleteService_By_Name = null;
$(document).ready(function () {
kendoAutoCompleteService_By_Name = $("#Service_By_Name").kendoAutoComplete({
dataTextField: "Text",
dataValueField: "ID",
minLength: 2,
dataSource: {
//serverFiltering: true,
type: "json",
transport: {
read: "/Billing/GetTeamGetBillableLawyers?filter=" + "",
}

},
filter: "contains",
placeholder: "Select"
}).data("kendoAutoComplete");
});
$('#Service_By_Name').keyup(function () {
var dd = $("#Service_By_Name").val();
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Billing/GetTeamGetBillableLawyers?filter=" + $("#Service_By_Name").val(),
dataType: "json"
}
}
});
kendoAutoCompleteService_By_Name.setDataSource(dataSource);
});
</script>

4.Kendo grid get selected rows

var ids=[];
var grid = $("#grid1").data("kendoGrid");
grid.select().each(function () {
var dataItem = grid.dataItem($(this));
ids.push(dataItem.BillingId);
});

5.Kendo grid format date time in template and add a link

columns: [
{
field: "Customer",
template: "<a href='/AccountList/AccountDetail?AccountId=#= CustomerId #'>#= Customer #</a>",
},

{
field: "InceptionDate",
template: "#if(InceptionDate === null){# '' #}else{# #= kendo.toString(kendo.parseDate(InceptionDate), 'dd-MM-yyyy') # #}#"
},
{
field: "ClaimRefNo",
title: "Claims Ref #",
template: "<a href='javascript:void(0);' onclick=\"loadBillingDetail('#= BillingId #')\" '>#= ClaimRefNo #</a>"
},
{
title: "User Name",
template: "<a href='javascript:void(0);' onclick=\"OpenLogingModel('#= ActiveLogin #', '#= ContactName #')\" '>#= UserName #</a>"
}
]

6.Kendo widget destroy

<div id="grid"></div>
<script> $("#grid").kendoGrid( { /* configuration */ } ); // create a Grid widget $("#grid").data("kendoGrid").destroy(); // destroy the Grid $("#grid").empty(); // empty the Grid content (inner HTML) // or $("#grid").remove(); // remove all Grid HTML </script>

Ref:

https://docs.telerik.com/kendo-ui/intro/widget-basics/destroy

7.Kendo grid formatting

kendo.culture("en-US"); kendo.toString(1234.567, "n"); //1,234.57 kendo.toString(10.12, "n5"); //10.12000 kendo.toString(10.12, "n0"); //10 kendo.culture("de-DE"); kendo.toString(1234.567, "n3"); //1.234,567

kendo.culture("en-US"); kendo.toString(1234.567, "c"); //$1,234.57 kendo.culture("en-US"); kendo.toString(1234.567, "c0"); //$1,235 kendo.culture("de-DE"); kendo.toString(1234.567, "c3"); //1.234,567 €

kendo.culture("en-US"); kendo.toString(0.222, "p"); //22.20 % kendo.culture("en-US"); kendo.toString(0.222, "p0"); //22 % kendo.culture("de-DE"); kendo.toString(0.22, "p3"); //22.000 %

kendo.toString(0.122, "e"); //1.22e-1 kendo.toString(0.122, "e4"); //1.2200e-1

Ref:
https://docs.telerik.com/kendo-ui/framework/globalization/numberformatting

7). Deselect kendo rows by Javascript

var grid = $("#grid1").data("kendoGrid");
grid.clearSelection();

deselect only selected row
var grid = $("#grid1").data("kendoGrid");

var selectedRow = grid.select();
$(selectedRow).removeClass("k-state-selected");

8.Kendo Timepicker set,Get values

  <script>
                $(document).ready(function() {
                    $("#timepicker").kendoTimePicker()
                                  .closest(".k-widget")
                                  .attr("id", "timepicker_wrapper");

                    var timepicker = $("#timepicker").data("kendoTimePicker");

                    var setValue = function () {
                        timepicker.value($("#value").val());
                    };

                    $("#enable").click(function() {
                        timepicker.enable();
                    });

                    $("#disable").click(function() {
                        timepicker.enable(false);
                    });

                    $("#readonly").click(function() {
                        timepicker.readonly();
                    });

                    $("#open").click(function() {
                        timepicker.open();
                    });

                    $("#close").click(function() {
                        timepicker.close();
                    });

                    $("#value").kendoTimePicker();

                    $("#set").click(setValue);

                    $("#get").click(function() {
                        alert(timepicker.value());
                    });
                });
           </script>

Ref:

http://demos.telerik.com/kendo-ui/timepicker/api

8.Kendo grid check box colunm

{
title: "IsBillable",
template: '<input type="checkbox" #= IsBillable ? "checked=checked" : "" # disabled="disabled" ></input>'
}

9.Kendo Grid color row based on condition

function onDataBoundTenant(e) {
var grid = $("#grid").data("kendoGrid");
var gridData = grid.dataSource.view();

for (var i = 0; i < gridData.length; i++) {
if (gridData[i].IsAutoCancel == true) {
grid.table.find("tr[data-uid='" + gridData[i].uid + "']").addClass("highlighted-row");
}
}

}

<style>
.highlighted-row {
background-color: #ffcccc;
}

.highlighted-row.k-alt {
background-color: #ccffcc;
}
</style>

10.How to hide kendo grid command edit button or delete button?

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ command: [{ name: "edit", visible: function(dataItem) { return
dataItem.name==="Jane" } }] }
],
editable: "popup",
dataSource: [ { name: "Jane" }, { name: "Bill" } ]
});

</script>

Programming Hut

Kendo

4.Kendo grid get selected rows

5.Kendo grid format date time in template and add a link

6.Kendo widget destroy

No comments:

Post a Comment