We're using the Telerik (PHP UI) controls but there appears to be something that I'm not able to crack.
We store timestamps in the backend database in UTC, and when using a Grid to display such items, I want to be able to show that UTC timestamp converted into the local users timezone (the TZ data is stored as a PHP variable, different people logging in could be in different TZs). It appears I'm not the only one that's asking this, as the Telerik forum someone else asks the same question but without an answer (scroll to the bottom of that forum post).
From the Telerik site I it appears that all I'd have to do is to format the date with a format with "zzz" appended to the date, but all this does is add the offset to the displayed time (eg 2020-02-27 10:00:00 -> 2020-02-27 10:00:00-0800) ... but it does do this "auto-magically" which I suppose is nice ... (heavy sarcasm)
This forum post also shows that an onRequestEnd call should do what I need it to do, but when I attempt this, nothing appears to change.
Can anyone offer up any advice?
Note : I've created the outer table with the following:
$grid = new \Kendo\UI\Grid('grid');
Solution: I achieved this by adding the following to the page:
function dataSource_requestEnd(e){
var data = e.sender.options.data.data;
for(var i=0; i<data.length; i++){
var td = data[i];
for (var key in td){
if (key === "NameOfDateField"){
var offset = new Date().getTimezoneOffset();
new Date(td[key].setMinutes(td[key].getMinutes() - offset));
}
}
}
}
$(document).ready(function() {
var dataSource = $("#grid").data("kendoGrid").dataSource;
dataSource.bind("requestEnd", dataSource_requestEnd);
dataSource.fetch();
});
Please note that NameOfDateField was the name of the key in the array that was returned from the dataSource.
TBH, I'm not at all sure how the data got converted, but certainly the offset and localTime variables are vital to this succeeding (although to my mind, they don't actually update anything?!)
Related
My JqGrid looks like this:
Staff
Room 1
Room 2
Jim
240
120
Dave
480
240
The staff and rooms are obtained from tables and are unknown in number at runtime. The figures (data) represent the total time spent by each staff in each room and are in minutes. I have all the above working.
All I want to do now is to iterate over all the data entries and change minutes (Eg: 240) to hours and minutes (EG 4h:0m). I'm ok with doing the math for the conversion, it's the looping over the cells and the reading and updating (just the displayed value) that has defeated me.
This is my code so far for the looping:
var $grid = jQuery('#statstab1grid')
var rows = $grid[0].rows
var crows = rows.length
var irow, row, cellsofrow
for (irow = 1; irow < crows; irow++)
{
row = rows[irow];
cellsofrow = row.cells;
alert('$(cellsofrow[0]).text() is ' + $(cellsofrow[0]).text())
alert('$(cellsofrow[1]).text() is ' + $(cellsofrow[1]).text())
}
The first alert outputs Jim then Dave, the second alert outputs nothing,
just the prompt. Even if I managed to access the data values, how would I write back to the grid the modified values?
It is good to post which version of jqGrid is used. This one is the important part.
The code you posted and your comments that nothing is alerted for cell index 1, can tell me that maybe you have a hidden field in your colModel, which value is empty. In this case it would be good to post your entire grid setup.
To the problem - you have a lot of options to do this conversion.
You can use custom formatter - more about this you can find here. This method is preferred.
You can use getRowData (without parameter) to get all the data in the grid and use setRowData to update the values. Be a careful with this method if you have a lot of data in the grid - it will be slowly in this case. See docs for grid methods
If your data is local (array) you can recalculate it, before to put it into the grid
We have a Kendo TreeList that works fine. Data shows, everything shows in the hierarchy correctly. The problem is, we need to group each two columns into another "superset" group.
The column headings (the names above are not real) are too long if not grouped as shown, and they lose useful context.
I tried adding an HTML table above the TreeList, but that doesn't look right. And it doesn't work if the user resizes the columns. Also the toolbar (for Excel export) is in the way, so it doesn't even look like it's part of the TreeList.
I also looked at wrapping the text in the columns, but from what I've seen, that's really iffy too.
It seems like an extra row as shown above (with the ability to merge some columns, like with an HTML table) is the best way to go. Despite scouring the web, I couldn't find a way to do this. Is this even possible with a Kendo TreeList?
This has been solved. Not by me, but by another developer on our team who's insanely good at JavaScript.
The trick is to edit the TreeList's HTML and CSS through JavaScript. You can bind to any event, but we do it on page load:
<script>
$(document).ready(function () {
// anything in here will get executed when the page is loaded
addTopRowToTreeList();
});
function addTopRowToTreeList() {
// grab the thead section
// your HTML may be different
var foo = $('#MyTreeList').children('div.k-grid-header').children('div.k-grid-header-wrap');
var tableChild = foo.children('table');
var headChild = tableChild.children('thead');
var bottomRow = headChild.children('tr');
var topRow = $('<tr>').attr('role', 'row');
// bottom cell should draw a border on the left
bottomRow.children('th').eq(0).addClass('k-first');
// add blank cell
var myNewCell = $('<th>').addClass('k-header').attr('colspan', '1')
var headerString = '';
var headerText = $('<span>').addClass('k-link').text(headerString);
myNewCell.append(headerText);
topRow.append(myNewCell);
// ... add remaining cells, like above
headChild.prepend(topRow);
}
</script>
That's all there is to it!
I have 6 textboxes at the top of the screen that update an entire column(one textbox per column) based on any changes. I was selecting the columns based on their class (.l#). Here is the code (issues to follow):
function UpdateField() {
var ctrl = this;
var id = parseInt(ctrl.id.replace("item", ""), 10) - 1;
var bound = [".l1", ".l7", ".l8", ".l9"];
var fields = $(bound[id]);
for (var i = 0; i < fields.length; i++)
{
fields[i].innerHTML = $(ctrl).val();
}
};
which is bound to the keyup event for the text areas. Issues are:
1) initially fields.length was -1 as I didn't want to put data in the "add new
row" section at the bottom. However, when running it, I noticed the
final "real" record wasn't being populated. Also, when stepping through, I
noticed that the "new row" field was before the "last row" field.
2) when doing it this way, it is purely superficial: if I double click the field,
the real data hasn't been changed.
so in the grand scheme of things, I know that I was doing it wrong. I'm assuming it involves updating the data and then forcing a render, but I'm not certain.
Figured out how to do it. Modified the original code this way:
function UpdateField() {
var ctrl = this;
var id = parseInt(ctrl.id.replace("item", ""), 10) - 1;
var bound = ['title1', 'title2', 'title3', 'title4'];
var field = bound[id];
for (var i = 0; i < dataView.getLength(); i++)
{
var item = dataView.getItem(i);
item[field] = $(ctrl).val();
dataView.updateItem(i, item);
}
grid.invalidate();
};
I have 6 textboxes (item1-item6) that "bind" to fields in the sense that if I change data in a textbox, it updates all of the rows and any new rows added also have this data.
Parts where the two issues can be explained this way:
1) to work around that, though still it would be a presentational fix and not a real updating of the underlying data, one could force it to ignore if it had the active class attached. Extra work, and not in the "real" direction one is going for (masking the field).
2) It was pretty obvious with the original implementation (though it was all I could figure out via Chrome Dev Tools that I could modify at the time) that it was merely updating a div's content and not actually interacting with the data underneath. Would look nice, and perhaps one could just pull data from the item1-item6 boxes in place of the column if it is submitted, but if someone attempts to modify the cell, they'll be looking at the real data again.
I need to select a specific row in kendoGrid but NOT by data-uid (as data-uid is changed when the grid dataSource is loaded again) but by the row itemID. I saw posts but they only select the row by uid which is not what I needed, I actually need to restart the HTML5 application and when grid is loaded, a specific item should be selected. This is what I've been seeing
Demo: jsfiddle.net/rusev/qvKRk/3/
e.g. the object has OrderID as ID, and every time the grid is loaded, it will be the same, unlike uid, I want to know how will I be able to select a row with OrderID, instead of uid.
You cam mix row itemID and data.uid, I guess.
var grid = $("#Grid").data("kendoGrid");
var dataItem = $("#Grid").data("kendoGrid").dataSource.get(itemID);
var row = $("#Grid").data("kendoGrid").tbody.find("tr[data-uid='" + dataItem.uid + "']");
Going along with what umais has mentioned, the better approach, since there is no built in functionality for this as of yet, would be to iterate through all the records to find the one you need. The function that I built will work even if there are pages of data. The only other way that I can think of doing this would be do do a secondary ajax call; But this works well. Note that i haven't tested it with more than 2000 records.
var dataGrid = $("#GATIPS").data("kendoGrid").dataSource;
var numOfRows = dataGrid.total();
var currentPageSize = dataGrid.pageSize();
dataGrid.pageSize(numOfRows);
var dataGridData = dataGrid.data();
for (var i = 0; i < numOfRows; i++) {
if (dataGridData[i].uid == e)
return dataGridData[i];
}
dataGrid.pageSize(currentPageSize); // reset the view
e is the UID. However this can be substituted for what ever variable you need just replace the check.
a work around that I managed to have, was to go through all rows and check which row model has that ID equal to the parameter, and then get that row data-uid and select the item through data-uid. It's working fine for me, since there were no suggestion, it's the better answer for now.
Well, accordingly to what I have done (and worked for me), and even though the work around isn't the prettiest, set one more Column, with your model id and with ClientTemplate then create any html object (div in my case) inside it give it a html id of your id, so when ever you need it, you just have to go and look with something like:
grid.dataItem($("td div#id").closest("tr"));
Because remember that the dataItem method is waiting for a selector then you get your selectedItem as regular one.
EDIT:
I forgot to say, that you should (or could) use the style property
display:none
If you don't want to display that col.
The company I'm with is likely to obtain an ActiveReports 7 license. There's a new project requirement that several webgrids (not actually webgrids, but more like html rendered with zurb) need to be converted into pdfs. At one point in the code behind they're effectively datasets or can be created into such. Is there a way to shuttle the data from the datasets into active reports, then render it out as a PDF. I'd like to keep the report as generic as possible, and thus have one active report for all the datatables, so doing using active reports as its usually done is kind of out of the question.
The only thing I can think of at the moment is a single textbox in the group header into which I could concatenate all the headers, and a single textbox in the details into which I could throw all the data for each row. The problem here is that I'd run into many formatting issues as nothing would line up properly - as tab delimiting would solve nothing here. I could have multiple textboxes with various spacing, but then it would eventually devolve into a different report for each dataset. Is it possible to apply some sort of markup so that I could keep the spacing of columns as I feed the data in. Do active reports richtextboxes honor html markup? Or is there another solution altogether?
I'd use Itextsharp, but its not free for commercial products.
Thanks,
Sam
You can dynamically build a report that will output a simple table based on a specified DataSet, well actually a System.Data.DataTable. Basically for each column in the DataTable, add a textbox to the header to hold the name of the column and add another textbox to the Detail section to hold the value.
For the textbox in the detail section set its DataField property to the name of the column. With the binding in place, you can set the report's DataSource property to the DataTable and then run the report and export it to PDF.
The following code is a basic example:
var left = 0f;
var width = 1f;
var height = .25f;
var space = .25f;
var rpt = new SectionReport();
rpt.Sections.Add(SectionType.ReportHeader, "rh").Height = height;
rpt.Sections.Add(SectionType.Detail, "detail").Height = height;
rpt.Sections.Add(SectionType.ReportFooter, "rf").Height = height;
foreach (System.Data.DataColumn col in dataTable.Columns)
{
var txt = new TextBox { Location = new PointF(left, 0), Size = new SizeF(width, height) };
txt.Text = col.ColumnName;
rpt.Sections["rh"].Controls.Add(txt);
txt = new TextBox { Location = new PointF(left, 0), Size = new SizeF(width, height) };
txt.DataField = col.ColumnName;
rpt.Sections["detail"].Controls.Add(txt);
left += width + space;
}
rpt.DataSource = dataTable;
rpt.Run();
var pdf = new PdfExport();
pdf.Export(rpt.Document, #"c:\Users\scott\downloads\test.pdf");