Skip to main content

Posts

Showing posts with the label Kendo UI

kendo ui grid hide toolbar button

If you want to hide or show any toolbar button (Add, Edit & delete) of kendo UI grid you can use this script . $(document).ready(function () { // Your Grid // menu enable & disable var MenuEdit = '@ViewData["MenuEdit"].ToString()'; alert(MenuEdit); if (MenuEdit == 0) { $(".k-grid-add", "#DefaultGrid").hide(); $(".k-grid-edit", "#DefaultGrid").hide(); $(".k-grid-delete", "#DefaultGrid").hide(); } else { $(".k-grid-add", "#DefaultGrid").show(); $(".k-grid-edit", "#DefaultGrid").show(); $(".k-grid-delete", "#DefaultGrid").show(); } }); Note: Define the script after your Ke...

Kendo UI Grid show no data text in to grid

if you want to show no data in to the grid when the grid datasource will be empty use this in to grid script  //No data in the grid show message function gridDataBound(e) { var grid = e.sender; if (grid.dataSource.total() == 0) { var colCount = grid.columns.length; $(e.sender.wrapper) .find('tbody') .append('<tr class="kendo-data-row"><td colspan="' + colCount + '" class="no-data EmptyGrid">There is no data to show in the grid.</td></tr>'); } };

kendo ui datetimepicker to C# converting value

Get value entity.ExpiredDate = ParseDate(model.ExpiredDate); private static DateTime ParseDate(string input) { return DateTime.ParseExact(input, formats, CultureInfo.InvariantCulture, DateTimeStyles.None); } private static string[] formats = new string[] { "MM/dd/yyyy HH:mm:ss tt", "MM/dd/yyyy HH:mm:ss", "M/dd/yyyy H:mm:ss tt", "M/dd/yyyy H:mm:ss" , "MM/dd/yyyy hh:mm tt" }; Set Value viewModel.ExpiredDate = entity.ExpiredDate.ToString("MM/dd/yyyy hh:mm tt", CultureInfo.InvariantCulture);

kendo ui grid template if else

Use if else condition in kendo  UI template <script type="text/x-kendo-template" id="template"> <div id="details-container"> <dt> Name:</dt> #= Name # <br> <dt>Selected Device: </dt> iOS:-# if (PushToiOS == true) { #Yes# } else { #No# } #, Android:-# if (PushToAndroid == true) { #Yes# } else { #No# } #, WP:-# if (PushToWP == true) { #Yes# } else { #No# } # <br> <dt>Expire Date:</dt> #= kendo.toString(ExpiredDate, "MM/dd/yyyy") # <br> </div> </script>

Custome command in kendo UI Grid toolbar

toolbar: [ { name: "Add", text: "Make Passive 3 Times Unsuccesful Ones", click: function (e) { console.log("foo"); return false; } } ], in the grid script $(".k-grid-Add", "#DefaultGrid").bind("click", function (ev) { $.ajax({ type: "POST", url: "http://localhost/Notifier/Devices/MakePassive/model", contentType: "application/json; charset=utf-8", dataType: "json", async: false, success: function (data) { //ev.success(); if (data.ResponseCode == 800) { ev.success(); } else { alert(data.ResponseMessa...

kendoDropDownList json datasource

if you want to load your kendoDropDownList  from json we service you can follow this script $('#Branchs').kendoDropDownList({ // optionLabel: "Select branch...", dataTextField: "text", dataValueField: "value", change: function () { e.model.BranchRef = this.text(); }, dataSource: { transport: { read: function (e) { $.ajax({ url: 'http://localhost/Notifier/Branches/GetDropDown/token', type: 'GET', dataType: 'json', success: function (data) { { e.success(data); ...

kendo grid checkbox check validation

In the following above image i want to transfer from left side grid data to right side grid & only the selected grid item. I will check that - The left grid can check more than one checkbox - right side grid will check only one. - left & right side selection item will not same. Then all the selected check box in the left side will get for right side person for save or update as you want. Transfer button click: <button type="submit" class="btn btn-mini btn-primary" onclick="AccountsManagerTransferResponsiblity()"> <i class="icon-retweet"></i>Transfer </button> Script: function AccountsManagerTransferResponsiblity() { var gridData1 = $("#CustomerAccountManagerKendoGrid1").data("kendoGrid").dataSource.data(); var gridData2 = $("#CustomerAccountManagerKendoGrid2").data("kendoGrid").dataSource.data(); if (!CheckGr...

Kendo UI adding row at Runtime(Client Side)

You can easily add item in you kendo grid in client side. In your button or other control: <table style="clear: left"> <tr> <td> @Html.LabelFor(model => model.JV_ACCOUNT_CODE) </td> <td> @Html.TextBoxFor(model => model.JV_ACCOUNT_CODE) @Html.ValidationMessageFor(model => model.JV_ACCOUNT_CODE) </td> <td> @Html.LabelFor(model => model.JV_CurrentBalance) </td> <td> @Html.TextBoxFor(model => model.JV_CurrentBalance) @Html.ValidationMessageFor(model => model.JV_CurrentBalance) </td> </tr> </table> <br /> <table> <tr> <td> @Html.LabelFor(model => model.JV_NOTES) </td> <td> @Html....

on demand parameter in kendo grid load

On demand event // Bouquet combo change event $('#BooketID').live('change', function () { FillChannelGridByBouquetID(); }); set parameter for grid load /* Load kendo grid by bouquetID*/ function FillChannelGridByBouquetID() { var a = {}; a.BooketID = $("#BooketID option:selected").val(); var mAGrid = $('#CustomerPackageChannelKendoGrid').data('kendoGrid'); mAGrid.dataSource.read(a); } Grid $("#CustomerPackageChannelKendoGrid").kendoGrid({ dataSource: { transport: { read: "ChannelReadByBooketID", }, schema: { model: { fields: { SelectColumn: {type: "boolean"}, ChannelID: { type: "string" }, BooketName: { type: "string" }, ChannelName: { type: ...

kendo grid column bindable checkbox is not working

bind your grid check box column field { field: "SelectStatus", width: "10%", template: "<input type='checkbox' #= SelectStatus ? checked='checked':'' # class='chkbx' />" } use the script: // Customer grid check event $(function () { $('#CustomerInfoKendoGrid').on('click', '.chkbx', function () { var checked = $(this).is(':checked'); var grid = $('#CustomerInfoKendoGrid').data().kendoGrid; var dataItem = grid.dataItem($(this).closest('tr')); dataItem.set('SelectStatus', checked); }) })

Kendo UI web Grid how to set default null values to a grid when adding new row

In your Kendo UI web grid model binding just use '?' allow null in your model class property. Which property you want to use in your grid as nullable. Model : [Key] public System.Guid? CompanyId { get; set; } public System.String CompanyName { get; set; } public System.String CompanyAddress { get; set; } Kendo Grid : .Columns(columns => { columns.Bound(p => p.CompanyId).Hidden(); columns.Bound(p => p.CompanyName).Width(200); columns.Bound(p => p.CompanyAddress).Width(300); columns.Command(command => { command.Edit(); command.Destroy();}).Width(172); }) UI

How to disable specific grid column in kendo ui Grid on inline editing

If you want to stop editing on specific Grid column in Kendo Ui grid like this Just use theDataAnnotations [ Editable ( false )] in your custom class for the grid i am just share my code for your help using System; using System . Collections . Generic; using System . ComponentModel . DataAnnotations; using System . Linq; using System . Web; namespace FEWO . ViewModel { public class Limitation { public long Id { get; set; } public int? LFDNR { get; set; } public Guid? ob_guid { get; set; } public DateTime? von { get; set; } public DateTime? bis { get; set; } public string einschrank { get; set; } public string wtagvon { get; set; } public string wtagbis { get; set; } public int numtagvon { get; set; } public int? numtagbis { get; set; } public int? nummonvon { get; set; } public int? nummonbis { get; set; } public int? numjahrvon { get; set; } public ...

kendo ui web selected combobox value set in textbox

Here i am using razor view <div class="editor-label"> @Html.LabelFor(model => model.ob_guid,"Im Objekt") </div> <div class="editor-field"> @(Html.Kendo().ComboBoxFor(model=>model.ob_guid) .Name("categories") .HtmlAttributes(new { style = "width:300px",id="categories" }) .Placeholder("Select category...") .DataTextField("CategoryName") .DataValueField("CategoryId") .Filter(FilterType.Contains) .DataSource(source => { source.Read(read => { read . Action ( "GetCascadeCategories" , "Limitations" ); }); }) ) </div> <div class="editor-label"> @Html.LabelFor(model => model.von,"Code") </div> ...