I converted the table into DhtmlxGrid but while applying the freezing is not working for me.kindly advise on this
<table imgpath="../codebase/imgs/" style="width:400px" id="gridTable" name="gridTable" onbeforeinit="initGrid()">
...
</table>
<script>
table = new dhtmlXGridFromTable("gridTable");
function initGrid(){
gridTable.splitAt(10);
}
</script>
The problem is that grid.splitAt() needs to be called after the grid is initialized.
Related
How do I use this data table with mvc to get my data from the controller to the view:
<script>
$(document).on('ready', function () {
// initialization of datatables
$.HSCore.components.HSDatatables.init('.js-datatable');
});
</script>
Make sure all classes and div wrappers are in acquisition.
I have a kendo ui listview with a template the conditionally hides elements based on the underlying data. An example would be as follows:
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
<div>
# if (Discontinued) { #
Discontinued Product
# } #
</div>
</div>
</script>
If i modify the underlying dataSource items to set Discontinued with the following code:
data[index].set('Discontinued', true);
If the index is the currently selected item then that item looses focus and is no longer selected.
Please see the following dojo example http://dojo.telerik.com/UlOze, select an item from the list and then set it to discontinued.
Has anybody found a solution / workaround for this issue ?
Thanks.
------------- FINAL SOLUTION --------------
Following on from dimodi's answer below I pieced together the solution.. For this to work the dataSource must have the schema -> model -> id property set.
1st capture the currently selected data item:
var selectedItem = $(listElement).find(".k-state-selected");
var selectedDataItem = list.dataItem(selectedItem);
2nd: After calling .set re-find the data item and set the k-state-selected class. This is nessesary as the list component is regenerating the uid's.
if (selectedDataItem) {
var newSelectedItem = list.dataSource.get(selectedDataItem.ProductID)
var uid = newSelectedItem.uid;
jQuery("[data-uid='" + uid + "']").addClass("k-state-selected");
}
I've updated the original dojo to show this solution, incase it helps someone else.
When a data item is changed, its corresponding ListView item is re-rendered to apply the changes. As a result, the selection is lost, as it is a purely visual feature that is not persisted across rebinds. You can check if an item is selected before using set() and then restore the selection manually by applying a k-state-selected class to the element afterwards.
I'm using codeigniter v3 and bootstrap v3.
I've a table for messages and for every message in table, when click on details button, a bootstrap modal show the details.
In a for loop, I print table rows and for every row (at end of the loop), I put whole bootstrap modal structure.
My question is: how could do this with ajax calling? I mean, I don't put all modal code for every table row (every message) and every time that details button clicked, I handle showing modal with ajax.
thanks for attention.
SOLVED:
I find an easy and I think better way in the bootstrap official website: Using data- attribute.
I show it with an working example for who that could not achieve better solution:
Suppose we want to fill a table body with some data (as my problem):
//just table body code
<tbody>
<?php foreach($fields as $field): ?>
<tr>
<td><?php $field->some_field; ?></td>
//other <td> elements
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
data-time="<?php echo $field->time; ?>">Show Details</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
So in a loop, I read data (that in controller, get with model's method, and pass to view with $data['fields']). Now for showing some details in modal, I use HTML5 data attribute. Suppose, I want to show time in the modal. As you see in above code, I put time field in data-time:
data-time="<?php echo $field->time; ?>"
Now I create a modal as template (you could see whole modal structure in bootstrap official website) and put it out of loop (one modal for all table rows; dynamic data). in the following code, I put an element in the modal body (as a placeholder):
//... in the modal body section
<h4 id="time"></h4>
This element have no content, because I want to retrieve every row time filed and put it in this element. Note this will be practical with defining an id. Now some script:
//first load jquery
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function(event){
var btn = $(event.relatedTarget); // find which button is clicked
var time = btn.data('time'); //get the time data attribute
$('#time').text(time); //put the data value in the element which set in the modal with an id
});
});
</script>
You could define more data attribute and retrieve in this way.
I will not write the code for you, but show you the way:
You just need one modal for the whole page and it works like a template.
You need same data/informations to be displayed in the modal. This data you can pick up via Javascript/jQuery from your HTML. I prefer data attributes for that. Something like:
data-modal-title="My Title" data-modal-content="My Content"
Now you inject this data in your modal template and open the modal via Javascript.
I am using Meteor and the jquery data table library.
I have a table that I am loading meteor/handlebars using something like this:
<table>
{{each x}}
// code to insert rows of data
{{/each}}
</table>
I need to call this on the table once it has been fully populated with data to turn it into a sortable table:
$('#tableID').dataTable();
It works when I call it from the console once the DOM is fully loaded and the data is in there, but using Template.rendered() doesn't work, nor does listening for changes with .observe since the data is loaded before that particular view is rendered.
Where can I run this code to ensure that the data is fully loaded, and if there are updates to the data in the table that it will run again?
I found a way of doing it which seems to work after I split the individual rows into templates - will update as I continue to debug it (and this is certainly not ideal).
Template.individualRow.rendered = function() {
if (!$('#tableID').hasClass('initialized')) {
$('#tableID').not('.initialized').addClass('initialized').dataTable();
};
};
It beats me, but I can suggest a way to work around:
Do not use handlbars' helper, and observe the data, when the data changed, re-render the template manually， like this：
<table id="tableID"></table>
<template name="yourTemplate">
{{#each this}}
<tr>....</tr>
{{/each}}
</template>
var query = ...
query.observe({
added: function () {
manuallyRender();
},
changed: function () {
manuallyRender();
},
...
});
function manuallyRender() {
// don't need Meteor.render here, because you don't need it to be reactive.
var frag = $(Template.yourTemplate(query.fetch()));
$('#tableID').empty().append(frag).dataTable();
}
It should work, but maybe not the best way, any thoughts?
Actually, I think meteor has a long way to go...
Settings table contains always one row with lot of long-caption columns.
Opening this in jqGrid grid looks ugly.
How to force jqGrid to render its edit form instead of grid ?
In edit form data can changed and saved, grid is not nessecary.
Grid caption bar is not used (caption is empty string) and top level toolbar is used.
Row is loaded from server using json call.
I tried to use Oleg answer from How to open Edit like form using custom data in jqGrid?
grid.jqGrid({
gridstate: 'hidden',
loadComplete: function() {
$("#edit_grid_top").click();
$("#lui_"+$('#grid').id).hide();
}
...
Edit form opens, but grid is still visible. How to render edit form without grid ?
This is maybe too late, but nevertheless:
You have to hide your grid programatically. My solution was (for a grid with lots of columns):
<div id="detailslistWrapper">
<table id="detailslist">
<tr> <td/> </tr>
</table>
<div id="detailspager"></div>
</div>
and after that:
$(function()
{
$("#detailslistWrapper").hide();
});
I got it to work as: $("#gview_"+gridid).hide()