i am seeing some issues with telerik grid view
here is the scenario
i have implemented a telerik grid controller in one of my project which has a feature of filters, now once all records are displayed, i am scrolling to the end of grid and applying filter criteria and now after applying filter there are no records matching my filter criteria so its showing "No records to display.", now i am unable to see the horizontal scroll bar where i can scroll and remove filter to display all records.
is there any way i can fix this issue?
Write the below script onDataBinding() event
$("tr.t-no-data td").html("No records to display.");
$("tr.t-no-data td").attr("style", "width:" + $(".t-grid-header").find("table").css("width") + "!important");
or
var colspan = $(".t-grid-header-wrap").find("th").length;
var emptyRow = "No Records Found.";
$(".t-grid-content").find("tbody").html(emptyRow);
Change t-grid-header padding-left style:
.t-rtl .t-grid.t-grid-rightscroll div.t-grid-header {
padding-left: 17px !important;
padding-right: 0px;
}
Related
I have a tabulator 4.9 contained within one element of a flexbox. The flexbox element has flex-grow>0.
Some of my columns are hidden during the initial draw. The select element above the table hides columns and shows the selected column, and redraws the table.
When using layout:"fitColumns", the table has two issues when first rendered-
The table is wider than it's container, by roughly the width of the scrollbar. Changing the selectbox above the table causes the table to redraw and fixes this issue.
The table vibrates erratically. Both the container DIV and the table are shifting back and forth by 1 or 2 pixels. They appear to be stuck in a feedback loop.
I am using Chrome 87.0.4280.141 (Official Build) (64-bit)
Example here:
https://beta.tspcenter.com/tabulator.php
Tabulator code:
table = new Tabulator("#leaderboardTablesContainer", {
height: "311px",
layout:"fitColumns",
index:"Username",
data: results,
columns:headers,
initialSort:[{column:firstVisibleColumn, dir:"desc"}]
});
Select element code:
select.addEventListener('change',function(e) {
table.clearFilter();
table.hideColumn(table.currentColumnVisible);
table.showColumn(e.target.value);
table.setSort(e.target.value,"desc");
table.currentColumnVisible = e.target.value;
table.setFilter(e.target.value, "!=", "");
table.redraw();
});
I'm not sure why this works. But specifying a width on the flex-element fixed the problem.
flex: 2000 1 450px; width: 5px;
It seems to go against my understanding of flexbox. And indeed, the flexbox grows well past the 5px anyway. It seems kind of hacky but it stops the feedback loop problem and the table displays correctly.
i'm trying to find a solution for the following. When I drag a link between elements the label text inside the elements get selected for some reason.
Lets say I have an element A with the property A.attr("body/magnet", "active"); set and A.attr("label/text", "some text"); When I create a link from that element by clicking and dragging the label text gets selected on elements the link goes through.
This seems a little bit random though as sometimes all the labels in the graph gets selected when dragging the link.
Is there a way to make the label text not to be selectable?
We solved it by adding the following label style to the shapes.
let element = new joint.shapes.standard.Rectangle();
element.attr(
"label/style",
"-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"
);
From the answer above the links will still be selected, so you can put css on you #paper is or canvas like so
#paper {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
How can I position last n root menu items to the right? Let's say I want to position Item 3, and Item 4 from this plunkr at the end of menu row (on the right).
Something like this:
I don't see any API in documentation that would describe such scenario.
You can set margin-left: auto on the third item.
.k-item.k-menu-item:nth-child(3) {
margin-left: auto;
}
https://plnkr.co/edit/IhNuEvI52yID0bCK
I have a check box group with multiple items that may contain a space. It is a horizontal check box. What is happening is the items are wrapping where there is a space in the item.
How could I get them to not wrap?
Also how do I control the width? I tried setting the width of the control and even placed it in a panel with the width set but nothing seems to work.
Try something like this in your stylesheet for the application:
.xspCheckBox { width: 500px; /* change to your preferred width */ }
.xspCheckBox td { white-space: nowrap; }
I'm using dojo dataGrid, and i need to get the row id.
When i use the "rowIndex" event, i get the "id" of the row, but, if i sort the grid, the data keeps another value in the row "id".
Can someone tell me how to solve this problem ? Thanks
Do you need the row of the grid when selected? Why do you need the row id? Usually I find if I let dojo handle row and data sorting for me and just pull in the selected item when I need it I'm better off.
e.g.
function onSelectedGridParm(nRow){
var objGridParm = dijit.byId("gridParm");
var item = objGridParm.getItem(nRow);
// single select - use an array here for multi select
// and remove in onDeselect
_selectedVariable = item;
fnEnableButton( "VariableEdit" );
fnEnableButton( "VariableDelete" );
}
....
<div id="gridParm" dojoType="dojox.grid.DataGrid"
style="width: 100%; height: 550px;"
structure="layoutVariables"
selectionMode="single"
noDataMessage="No Data Found with current filters"
onSelected="onSelectedGridParm"
onDeselected="onDeselectedGridParm"
rowsPerPage="50"
>
</div>