KendoUI grid cells trim the data values - javascript

Hi I'm experiencing some issues with the kendoui grid.
It looks like it is trimming the data value that is passed to the grid.
For example 'chai chai' will be trimmed to 'chai chai'.
This would be ok if only I didn't need to display the exact data that is in the database.
How to ignore this default behavior?
Issues code sample

The issue is not with the Kendo Grid. Its default HTML behavior to remove more than one space. To resolve this you just need to replace space with in your Product Name while creating the products variable.

Try looking at the CSS property to preserve white space here http://www.w3schools.com/CSSref/pr_text_white-space.asp

Related

An alternative for style="display:none"

In our project we are creating tables using JavaScript and displaying data in that table using xsl. we are getting data from backend through copybook.
Based on one value we are displaying, we have one column header in the table. If that value is yes then that column will come. While displaying data in that column we did not check any condition, just we are using style="display:none". If that column comes then data is visible otherwise data is hidden. But when data is vible and when we click on one of the column names columns are shifting to left and data was hiding because of style="display:none".
Is there anything that works similarly to style="display:none" such that when a column comes then it shows the data otherwise it hides the data?
I have tried with 'style="visible:hidden", it does not work. Whether the column came or not it is consuming space beacuse of that columns are shifing to right.
**style="display:none" is working properly means when column comes then only it is showing data otherwise it is hiding the data **. where as visibility:hidden is conusimg space.
Use visibility instead:
style="visibility:hidden"

access header value from ng-grid

We are currently using ng-grid to display click-able flags in a grid,
ie. cell 1 contain a green flag, cell 2 empty, cell 3 contains a red flag.
The flag represents the status.
To make the flag clickable, we have created a directive within each sell
<gridresultsummary data-ng-click="filterReportByOrderFromSummary()" resultsummaryflag="{{row.entity[col.field]}}" />
the filterReportByOrderFromSummary() function at the moment, simply shows a static alert.
What we are struggling to achieve, it a way to pass the column header into this function.
we have tried many variations of
{{row.entity[col.field]}}
{{row.entity[col.header]}}
{{row.entity[col.headerValue]}}
however, still cant seem to capture it.
What is the syntax to retrieve the column header within a directive?
You can try this :
{{col.displayName}}
It will get you access to the displayName from within the column.
Example here.

Dojo datagrid - getSelected() of row that has not been drawn

I'm trying to select rows dynamically on a datagrid using the grid.selection.setSeleted() and grid.selection.getSeleted() methods.
I can select rows that are currently undrawn (i.e you must use the horizontal scroll bar to see them). But when I try to get the row contents using grid.selection.getSeleted(), the array returns nulls instead of the row data.
Is there any way to get the selected row data even if it is not currently drawn? Although it's slower can I force dojo to draw the entire grid, even if some of it is not displayed?
Have al look : http://dojotoolkit.org/reference-guide/1.8/dojox/grid/DataGrid.html#working-with-selections
It's a good example how to use getSelected()
and this is a Post from the dojo Forum. It discribes an error that's maybe familiar to yours.
http://dojo-toolkit.33424.n3.nabble.com/dojox-grid-DataGrid-selection-getSelected-odd-behaivour-td3941395.html
Regards

HTML- Altering Input Value

I recently posted a similar question, but after some discussion, the question turned out to be quite a bit different than it was originally stated, so I thought it best to post this as a new question. I am trying to use an input field to show a total (I would consider using another element type, but I need to do the same thing in other places where an input field is actually required, so I may as well fix the problem now). The problem is that the HTML of the table containing these fields needs to be reloaded on occasion, i.e. in table creation, I use the Jquery $('#table1').html($('#table1').html() + <next_table_line>);. This causes the input field to revert to the value displayed in its value attribute, which doesn't change when I use the $('#input1').val(<some_value>); setter or when I enter data manually. Does anyone know of a solution to my problem? I need to be able to add rows to the table without loosing my data, but I can't figure out how to do this.
You're reloading your entire table with the line $('#table1').html($('#table1').html() + <next_table_line>);. You should be appending to your table instead. Take the following sample small table:
<table id="test">
<tr><td>test</td></tr>
</table>
Now, to add a new row, dont re-write the entire table HTML, just append!
$("#test").append("<tr><td>See im new!</td></tr>");
Demo: http://jsfiddle.net/uB2Rq/1/

Can EditTextCell's text be reset in a CellTable?

I'm working with GWT-2.1.0 and I've draw a table through CellTable which contains a column, the third, of EditTextCell. I'm trying to modify the value of that cell for each visible rows by code using:
table.getRowElement(i).getCells().getItem(2).setInnerHTML("<div style=\"outline:none;\" tabindex=\"-1\">0</div>");
Window.alert("Pause");
Thanks the alert I can see that all the rows have been updated correctly to the new value, but, once the cycle ends, a refresh of the table restore the user's input nullify the job done.
Is there some temporary cache that EditTextCell uses to mantain the data? Can I erase the text inserted by the user in another way? Can I reach the Column of the CellTable so allowing me to use the setValue(...) field?
Anyone can help?
Thanks in advance!
P.S. Using *.setInnerText("0"); fails too.
P.P.S I've read that GWT2.2.0 should have a CellTable.getColumn(int index) method to do so, but I don't know if it's useful to me - and, more important, when it should comes out.
EditTextCell is a subclass of AbstractEditableCell, which has the clearViewData method. You can call that method for all objects in the table for which you want the data to be cleared.

Categories

Resources