or
1 answer
673 views
Hi,
I want to focus on the kendo Column names rather than the data in the kendo grid.
I tried using $('#grid').data("kendoGrid").table.focus(); it only focuses the data of the first column and first row. When no data is present I am unable to focus on the table.
Need a way to focus on kendo grid even when it has no data. Please provide me a code snippet for the same.
I want to focus on the kendo Column names rather than the data in the kendo grid.
I tried using $('#grid').data("kendoGrid").table.focus(); it only focuses the data of the first column and first row. When no data is present I am unable to focus on the table.
Need a way to focus on kendo grid even when it has no data. Please provide me a code snippet for the same.
Georgi
Telerik team
answered
on
30 May 2017
2 answers
633 views
Hello,
I am a new user to Kendo and using Grids for a ASP.NET MVC project. What I am trying to do
is achieve a Date Range filter for my grid for a single column, while
keeping the default GridFilterMode.Row filters for all other columns.
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
I have successfully implemented the Date Range filter by setting the Grid to .Filterable() and using some additional scripts to customize the fields for the dropdown menu.
@(Html.Kendo().Grid<MyWebSite.Models.OrderViewModel>() .Name("grid") .HtmlAttributes(new { @class = "orderGrid" }) .Pageable() //.Filterable(ftb => ftb.Mode(GridFilterMode.Row)) // Switches all Columns to Row type filters //.Filterable(ftb => ftb.Mode(GridFilterMode.Menu)) // Switches all Columns to Menu type filters .Filterable() // Does the same as line above I assume ? ^ .Scrollable() .Resizable(resize => resize.Columns(true)) .Columns(columns => { columns.Template(c => { }).ClientTemplate("<input class='k-checkbox chkbx' type=\"checkbox\" name=\"cb_#=Id#\" id=\"cb_#=Id#\" /><label class='k-checkbox-label'></label>").Width(40); columns.Bound(o => o.OrderNo).ClientTemplate(Html.ActionLink("#=OrderNo#", "OrderDetails", "Order", new { orderId = "#=Id#" }, null).ToHtmlString()).Title("Order #"); columns.Bound(c => c.DateCreated).Title("Date Placed").Format("{0:MM/dd/yy}").Width(180); columns.Bound(c => c.EstimatedTotal).Format("{0:c}").Title("Total Amount").Width(150); columns.Bound(c => c.OrderStatus).ClientTemplate("#=GetOrderStatusHtml#").Title("Status"); columns.Bound(c => c.PONo).Title("Purchase Order #").ClientTemplate("#if(PONo != null) { #PONo# } else { #N/A# }#"); if (isUserAdmin) { columns.Bound(c => c.SOFromMAS).Title("Sage Order #"); columns.Bound(o => o.PropertyName).Title("Property"); columns.Bound(c => c.IsPropertyRehab).Title("Rehab").Width(100); columns.Bound(c => c.WhosInChargeName).Title("Who's in Charge"); } columns.Template(@<text> </text>).Hidden(); //Keep for css coloring of filter bar }) .ToolBar(tools => tools.Excel()) .Excel(excel => excel .FileName(string.Format("My Orders Report - {0:yyyy-MM-dd}.xlsx", DateTime.Now)) .Filterable(true) .ProxyURL(Url.Action("Excel_Export_Save", "Order")) ) .Scrollable() .DataSource(dataSource => dataSource .Ajax() .PageSize(15) .Model(model => { model.Id(p => p.Id); }) .Read(read => read.Action("OrderViewModels_Read", "Order")) ) .Events(x => x.DataBinding("resizeKendoGrid")) .Events(e => e.DataBound("onDataBound")) //Callback after data is retrieved .Events(e => e.FilterMenuInit("onFilterMenuInitDateRange")))<script type="text/javascript"> function onFilterMenuInitDateRange(e) { if (e.field == "DateCreated") { console.log("Condition passed!") var beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList"); beginOperator.value("gte"); beginOperator.trigger("change"); var endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList"); endOperator.value("lte"); endOperator.trigger("change"); e.container.find(".k-dropdown").hide() } }</script>
My issue is when I set the Grid to have Menu type filters , All the other columns will too! How can I set one column to use the menu type filter (for Date Ranges) while keeping .Row type filters for the rest of the columns?
Thank you in advance.
1 answer
158 views
When virtual scrolling is enabled, there is a problem with group footer aggregates. When i scroll table the aggregates (sum) are rendering only for visible data.
gridOptions.dataSource.pageSize = 100;
gridOptions.scrollable = {
virtual: true
};
Example in screenshots.
Viktor Tachev
Telerik team
answered
on
30 May 2017
1 answer
135 views
Hello,
I am using ListView and attached a Pager to it, when displayed in mobile device, the numeric of pager will overlapped on next button(see the attached screen with red boder), is anyone give me an advice?
Many thanks,
Steven
Viktor Tachev
Telerik team
answered
on
30 May 2017
4 answers
929 views
Hello!
How can I create a menu, with some items being aligned on the left side and some other items being aligned on the right side?
For example, the menu in the second row of the Telerik website: http://www.telerik.com/
Products, Demos etc. are on the left side; Search, shopping cart etc. are on the right side.
Best regards,
Kaan
Dimitar
Telerik team
answered
on
30 May 2017
1 answer
100 views
With grid that has resizable columns, if you drag the columns to be smaller, there'll be a blank area on the right (see attached screenshot). Can we get this fixed?
Viktor Tachev
Telerik team
answered
on
30 May 2017
3 answers
182 views
When I set the timezone in Scheduler to something quite different to my local time then click the "Today" button, it is not using this timezone to determine what date it is today - rather it is using the local timezone. Can you confirm this happens, and whether it is intentional or a bug?
Ivan Danchev
Telerik team
answered
on
30 May 2017
1 answer
198 views
I have a set of nested HTML buckets with sortable enabled at the parent and child level. This works perfectly.
However, some events or changes on the page require me to replace the HTML of the parent container -- essentially re-rendering all of the children and children's children on the page. After this happens, it looks live the first set of children are still sortable since I did not remove the parent container.
After this HTML replacement, however, the children's children are not longe sortable, even if I re-run the kendoSortable call on the child containers. There are no errors in my javascript console, and from the documentation I'm not finding any method of "destroying" the initial sortable instances.
// Parent$("#cb-ContentList").kendoSortable({ change: function(e) { var order = []; var i = 1; var cms_pages_ID = $("#editor_panel").data('cms_pages_id'); $("#cb-ContentList > div").each( function() { order[i] = $(this).attr("data-contentbuilder_id"); i++; }); // Do something } }); // Children
$("div.verticalBuckets .bucketColumn").kendoSortable({ move: function(e) { currentTarget = e.target.parent(); }, change: function(e) { var order = []; var i = 1; currentTarget.children("div").each( function() { order[i] = $(this).attr("data-contentbuilder_id"); i++; }); // Do something } });
As per above, I make an AJAX call then gives me new HTML for #cb-ContentList -- which I do $("#cb-ContentList").replaceWith(data) with. Now the children under #cb-ContentList are still sortable, but the children under the .verticalBuckets are no longer sortable, even if I re-run the code above.
Tsvetina
Telerik team
answered
on
30 May 2017
8 answers
289 views
Kendo grid is having zoom issue on ipad when it has horizontal scroll bar. Grid gets zoom when horizontal scroll bar is stable. Please find the the grid.
Dimitar
Telerik team
answered
on
30 May 2017
0 answers
394 views
Hello,
We're currently facing a problem with a KendoGrid having a KendoEditor as column editor.
Facts:
Column Template:
' <div name= ' + tableRefCol.Name + '> #=data.' + tableRefCol.Name +'==null?"":data.'+tableRefCol.Name+'#</div>'
Column Editor Definition:
function CreateEditor(container, options) { var grid = $('#Grid').data('kendoGrid'); var idx = container[0].cellIndex - $('#Grid').data('kendoGrid').dataSource._group.length; var name = grid.columns[idx].field; $('<div id="inGridEditor" style="height:200px;width:200px;" name="' + name + '" data-bind="value: ' + options.field + '" div></div>') .kendoEditor( { tools: [ "bold", "italic", "underline", "insertUnorderedList", "insertOrderedList", "foreColor", "fontSize" ] }) .appendTo(container); $("#inGridEditor").focus(); $(".k-editortoolbar-dragHandle").remove();};
Grid options:
{ "prefix": "", "name": "Grid", "columns": [{ "field": "LibControle", "title": "Libellé du contrôle", "width": "150px", "filterable": true, "headerAttributes": { "id": "9fb0634a-05e7-4f0a-985c-47b1283fd62b" } }, { "field": "IdEquipe", "title": "Equipe", "width": "85px", "filterable": true, "values": [{ "value": 1, "text": "ADL" }, { "value": 2, "text": "FMA" }, { "value": 3, "text": "UDSI" }, { "value": 4, "text": "OSIRIS" }, { "value": 5, "text": "ORPHEE" }, { "value": 6, "text": "LECI" } ], "headerAttributes": { "id": "dfd6a4c2-eeed-4c63-be9c-70c8f21be033" } }, { "field": "IdInstallation", "title": "Installation", "width": "120px", "filterable": true, "values": [{ "value": 49, "text": "0Recette00" }, { "value": 1, "text": "CEA_SAC" }, { "value": 2, "text": "CNRS-LSCE Bt 12" }, { "value": 3, "text": "I1 Bt 602-LNHB" }, { "value": 4, "text": "I105 ADEC" }, { "value": 5, "text": "I109" }, { "value": 6, "text": "I128 Bat 450 - DPC" }, { "value": 7, "text": "I141_142 Bt 399-INSTN" }, { "value": 8, "text": "I151 SEDI" }, { "value": 9, "text": "I16 Bt 152-SIMOPRO" }, { "value": 10, "text": "I17 Bt 524-388-SPR" }, { "value": 11, "text": "I209 Bt 144" }, { "value": 12, "text": "I21 Bt 516" }, { "value": 13, "text": "I213 Bt 607-SAPHIR-DEMIP" }, { "value": 14, "text": "I218 SACM" }, { "value": 15, "text": "I222" }, { "value": 16, "text": "I223" }, { "value": 17, "text": "I232 Bt 565-DIGITEO" }, { "value": 18, "text": "I234 Bt 135-DOSEO" }, { "value": 19, "text": "I25 POLYTECHNIQUE" }, { "value": 20, "text": "I26 Bat 546 - Radiolyse" }, { "value": 21, "text": "I27 Bat 391 - DPC" }, { "value": 22, "text": "I34 Bt 520-SRMP" }, { "value": 23, "text": "I379" }, { "value": 24, "text": "I39 Bt 522-IRAMIS" }, { "value": 26, "text": "I47 Bt 604-FLS" }, { "value": 27, "text": "I57 Bt 389-156-SPR" }, { "value": 28, "text": "I60 Bt 455-SRMA" }, { "value": 29, "text": "I62 Bat 528 SB2SM" }, { "value": 30, "text": "I64 BAT 126 - JANNUS" }, { "value": 31, "text": "I68 Bt 830-832-SHFJ" }, { "value": 32, "text": "I74 Bt 601-LBM" }, { "value": 33, "text": "I75 Bt 547-SCBM" }, { "value": 34, "text": "I84 LPS" }, { "value": 35, "text": "I9" }, { "value": 25, "text": "I90 Bt142" }, { "value": 36, "text": "I91 Bt 534-LNHB" }, { "value": 37, "text": "I93 Bt 603 TAMARIS" }, { "value": 38, "text": "I97 Bt 136-SPI" }, { "value": 39, "text": "INB 101 ORPHEE" }, { "value": 40, "text": "INB 18 ULYSSE" }, { "value": 41, "text": "INB 35" }, { "value": 42, "text": "INB 40 OSIRIS" }, { "value": 43, "text": "INB 49 LHA" }, { "value": 44, "text": "INB 50 LECI" }, { "value": 45, "text": "INB 72" }, { "value": 46, "text": "IRSN-LMRE Bt 501" }, { "value": 47, "text": "IRSN-SCA Bt 389" }, { "value": 48, "text": "testformation aaaaa aaaaaa" } ], "headerAttributes": { "id": "a9e3e828-0224-4e49-abb1-f30d4ba064e2" } }, { "field": "LibTypeEvenement", "title": "Type d'évènement", "width": "140px", "filterable": true, "values": [{ "value": "Bilan", "text": "Bilan" }, { "value": "Contrôle externe", "text": "Contrôle externe" }, { "value": "Contrôle interne", "text": "Contrôle interne" }, { "value": "Contrôle matériel", "text": "Contrôle matériel" }, { "value": "Divers", "text": "Divers" } ], "headerAttributes": { "id": "e24370a5-b01f-45f8-a701-839709618aa8" } }, { "field": "CodeTS", "title": "Type de Terme Source", "width": "170px", "filterable": true, "values": [{ "value": "aaa", "text": "aaa" }, { "value": "ACCELERATEUR", "text": "ACCELERATEURada" }, { "value": "CA", "text": "CA" }, { "value": "GX", "text": "GX" }, { "value": "SOURCE non scellée", "text": "SOURCE non scellée" }, { "value": "Source scellée HA", "text": "Source scellée HA" }, { "value": "Source scellée non HA", "text": "Source scellée non HA" } ], "headerAttributes": { "id": "485d785d-79b8-4617-bdd2-53038b962da4" } }, { "field": "DateDebut", "title": "Date prévisionnelle", "width": "120px", "filterable": true, "format": "{0:dd/MM/yyyy}", "headerAttributes": { "id": "94ee9d4e-837a-4ad1-a76f-e6d6faf44de5" } }, { "field": "DateRealisation", "title": "Date de réalisation", "width": "120px", "filterable": true, "format": "{0:dd/MM/yyyy}", "headerAttributes": { "id": "f74d6351-c191-4161-8c4a-7ad1f8d8c4c6" } }, { "field": "NumChrome", "title": "N° chrono de la note", "width": "100px", "filterable": true, "headerAttributes": { "id": "9cfc585b-aa5a-4d9e-b0c9-5d82c0a5d1d6" } }, { "field": "NonConformite", "title": "NC", "width": "80px", "filterable": true, "template": "<input type=\"checkbox\" #= NonConformite ? checked=\"checked\" : \"\" # \"\" />", "headerAttributes": { "id": "c74b7954-5329-42d4-bff9-86643e0983bd" } }, { "field": "LibTypeMateriel", "title": "Type de matériel", "width": "140px", "filterable": true, "headerAttributes": { "id": "f9eae8c1-d0b9-4162-a951-fca09ce21d7f" } }, { "field": "LibStatutMateriel", "title": "Statut matériel/TS", "width": "140px", "filterable": true, "headerAttributes": { "id": "9040092e-11b6-4b8f-86ba-911859da1374" } }, { "field": "CodeStatutEvent", "title": "Statut de l'évènement", "width": "140px", "filterable": true, "headerAttributes": { "id": "08a1bd02-6f7d-4f3f-86ef-b2ef93858ae6" } }, { "field": null, "title": "Pièce jointe", "width": "140px", "filterable": false, "template": "<Button class=\"k-button\" onclick=OpenPopUp(\"http://localhost:53764/PlanificationControles/Documents/#=data.id#\") >Pièce jointe</a>", "headerAttributes": { "id": "b16dd126-1814-4ebc-9f5b-6de115da4ed6" } }, { "field": "Commentaire", "title": "Commentaires", "width": "180px", "filterable": false, "template": " <div name= Commentaire> #=data.Commentaire==null?\"\":data.Commentaire#</div>", "headerAttributes": { "id": "6a6e7db1-e72f-403a-8b07-01ffc043d6fb" } }, { "field": null, "title": "Non-conformité Propreté radiologique", "width": "210px", "filterable": false, "template": "<a class=\"k-button k-button-icontext \" style=\"visibility: #=data.Visible?\"visible\":\"hidden\"#\" href=\"http://localhost:53764/Proprete/Element/#=data.id#\"><span></span><span class=\"btnText\">Non-conformité Propreté radiologique</span></a>", "headerAttributes": { "id": "4f32a5f5-c744-4723-95e3-6410f3afb8f6" } } ], "toolbar": [{ "name": "excel" }, { "name": "pdf" }, { "name": "save", "text": "Sauvegarder" }, { "name": "cancel", "text": "Annuler" } ], "autoBind": true, "filterable": true, "scrollable": true, "sortable": true, "selectable": false, "allowCopy": true, "navigatable": true, "pageable": false, "editable": "incell", "groupable": false, "rowTemplate": "", "altRowTemplate": "", "noRecords": false, "dataSource": { "options": { "data": null, "schema": { "model": { "id": "IdEvenementControle", "fields": { "LibControle": { "editable": true, "validation": { "required": true }, "type": "string" }, "IdEquipe": { "editable": false, "validation": { "required": true }, "type": "string" }, "IdInstallation": { "editable": false, "validation": { "required": true }, "type": "string" }, "LibTypeEvenement": { "editable": false, "validation": { "required": true }, "type": "string" }, "CodeTS": { "editable": false, "validation": { "required": true }, "type": "string" }, "DateDebut": { "editable": false, "validation": { "required": true }, "type": "date" }, "DateRealisation": { "editable": true, "validation": { "required": true }, "type": "date" }, "NumChrome": { "editable": true, "validation": { "required": true }, "type": "string" }, "NonConformite": { "editable": true, "validation": { "required": false }, "type": "boolean" }, "LibTypeMateriel": { "editable": false, "validation": { "required": false }, "type": "string" }, "LibStatutMateriel": { "editable": false, "validation": { "required": false }, "type": "string" }, "CodeStatutEvent": { "editable": false, "validation": { "required": false }, "type": "string" }, "null": { "editable": false, "validation": { "required": false }, "type": "string" }, "Commentaire": { "editable": true, "validation": { "required": false }, "type": "string" }, "IdEvenementControle": { "editable": false, "validation": { "required": true }, "type": "number" }, "DateCreation": { "editable": false, "validation": { "required": true }, "type": "date" }, "DateFin": { "editable": false, "validation": { "required": true }, "type": "date" }, "DateDernMaj": { "editable": false, "validation": { "required": true }, "type": "date" }, "DateSuppression": { "editable": false, "validation": { "required": true }, "type": "date" } } } }, "offlineStorage": null, "serverSorting": false, "serverPaging": false, "serverFiltering": false, "serverGrouping": false, "serverAggregates": false, "batch": true, "transport": { "read": { "url": "/PlanificationControles/Read", "dataType": "json", "cache": false }, "update": { "url": "/PlanificationControles/Update", "dataType": "json", "type": "PUT" }, "create": { "url": "/PlanificationControles/Insert", "dataType": "json", "type": "POST" }, "destroy": { "url": "/PlanificationControles/Delete", "dataType": "json", "type": "DELETE" } } }, "_map": {}, "_prefetch": {}, "_data": [ ], "_pristineData": [], "_ranges": [{ "start": 0, "end": 541, "data": [], "timestamp": 1496068645469 } ], "_view": [], "_pristineTotal": 541, "_destroyed": [], "_group": [], "_total": 541, "_shouldDetachObservableParents": true, "_events": { "change": [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null], "requestEnd": [null, null], "error": [null, null], "progress": [null] }, "transport": { "options": { "read": { "url": "/PlanificationControles/Read", "dataType": "json", "cache": false }, "update": { "url": "/PlanificationControles/Update", "dataType": "json", "type": "PUT" }, "create": { "url": "/PlanificationControles/Insert", "dataType": "json", "type": "POST" }, "destroy": { "url": "/PlanificationControles/Delete", "dataType": "json", "type": "DELETE" } }, "cache": {} }, "reader": {}, "_online": true, "select": null, "table": null, "_requestInProgress": false, "_aggregateResult": {} }, "height": 550, "resizable": false, "reorderable": true, "columnMenu": false, "detailTemplate": null, "columnResizeHandleWidth": 3, "mobile": "", "messages": { "editable": { "cancelDelete": "Annuler", "confirmation": "Êtes-vous sûr de vouloir supprimer cet enregistrement?", "confirmDelete": "Effacer" }, "commands": { "create": "Insérer", "cancel": "Annuler les modifications", "save": "Enregistrer les modifications", "destroy": "Effacer", "edit": "Éditer", "update": "Mettre à jour", "canceledit": "Annuler", "excel": "Export vers Excel", "pdf": "Export vers PDF", "select": "Sélectionner" }, "noRecords": "Aucun enregistrement disponible." }, "excel": { "proxyURL": "", "allPages": true, "filterable": true, "fileName": "Administration.xlsx" }, "pdf": { "fileName": "Export.pdf", "proxyURL": "", "paperSize": "auto", "allPages": true, "landscape": false, "margin": { "top": "2cm", "left": "1cm", "right": "1cm", "bottom": "1cm" }, "title": null, "author": "CEA", "subject": null, "keywords": null, "creator": "CEA", "date": null, "avoidLinks": true, "repeatHeaders": true, "scale": 0.8 }}
(the column I have problem with is the one called "Commentaires")
Here is the problem:
When I click on an Editor cell i enter in edit mod (having the defined kendo editor as wished) but when i click INSIDE the editor anywhere the cell gets closed (like if cell.close() was called), I tried to disable every possible function on the cell from chrome events listener but nothing seemed to really change anything.
It smelled like when i added the navigable=true on my grid something changed so i turned it off, then i could click inside the editor without the cell closing, but a problem is still remaining when i click on some tools from the editor like font size the cell keeps closing without any noticeable event being called.
Regards.
Jean-Baptiste
Top achievements
Rank 1
Rank 1
asked
on
29 May 2017
