I am trying to get the dojo button that is within the data grid to use styling. Currently it does not use the styling.
HTML:
<table dojoType="dojox.grid.DataGrid" class="soria" id="grid1" jsId="grid1" elasticView="2" store="theStore" selectionMode="single" query="{grid1:'*'}">
<thead>
<TR>
<th field="0" formatter="getButton">Show value</th>
</tr>
</thead>
javascript:
function getButton(item){
return "<button class=/"soria/" dojoType=\"dijit.form.Button\" onClick=\"\">Button</button>";
}
You need to provide more info as suggested - like is this being utilized within the custom dijit framework or are you jsut trying to produce a button didjit on the fly?
Im going to assume the later for now so...
1.) You need to reparse the element if you want dynamically added elements created outside the dijit infrastructure to be turned into dijits.
2.) #1 doesnt make sense because if you are doing it on the fly you should be using the javascript programmiatc creation and adding it to the DOM instead of just returning html, ie:
return new dijit.Form.Button()
Related
I'm currently using dojox.grid.DataGrid for displaying data, in which a second request is sent to the server for the data. I'm using spring MVC, and hence I could fill data (from markup) using the model data in the view (using JSTL, to be exact). And I'm no where getting near in achieving this, since I cant find a way to get the data inside the grid via html markup. Does dojo grid supports filling data only via script (store)?
I found dojox.data.HtmlStore which could be made use of. But just making sure that there's no better solution.
Yes, dojox.grid.DataGrid can be defined using HTML markup.
Sample code:
<table data-dojo-type="dojox.grid.DataGrid" >
<thead>
<tr>
<th field="fieldName" >Col1</th>
<th field="fieldName" >Col2</th>
</tr>
</thead>
</table>
So in your jsp have the logic to generate the above structure.
More info can be found here
And for the data part you can do this:
<table data-dojo-type="dojox.grid.DataGrid" >
<thead>
<tr>
<th field="fieldName" get="myData.getCol1">Col1</th>
<th field="fieldName" get="myData.getCol2">Col2</th>
</tr>
</thead>
</table>
Javascript Function:
myData.getCol1 = function(colIndex,item){
return "<place the actual content from your jstl variables here>";
};
While
the above solution works its not a smarter way, please use the store and return a constructed json object from server.
dojox.data.HtmlStore could made use of. It's not a simple solution, but it is the simplest one.
Documentation with example can be found here: http://dojotoolkit.org/reference-guide/1.10/dojox/data/HtmlStore.html
I am working on an application using meteorjs. I am totally new to meteor. In my application I am using dataTables with meteor for shorting , pagination and searching.
This is my template code
<template name="questions">
<div class="col-md-3">
{{#constant}}
<table class="table table-striped table-bordered table-condensed table-hover listing"
id="content_listing-table">
<thead>
<tr>
<th>Questions</th>
</tr>
</thead>
<tbody>
{{#each questions}}
<tr>
<td>
{{questionSubString question_text}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{/constant}}
</div>
</template>
and my meteor code is
Template.questions.rendered = function () {
$("#content_listing-table").dataTable();
}
Template.questions.questions = function () {
return Meteor.questions.find({topic_id: Session.get("currentTopicId")})
}
my problem is when i add a question to the database it doesn't seem on template. and generate an exception. I know this is because of datatables . and datatable is not update when document updated. i tried many examples from stackoverflow but couldn't get rid of this problem .I tried by appending row dynamically but it always give me a warning . and it doen't seems to do a right way. can i remove the datatables from the element dynamically? help will be appreciated
EDIT:
$('#content_listing-table').dataTable().fnClearTable();
$('#content_listing-table').dataTable().fnAddData(Meteor.questions.find().fetch());
I am trying to do this first empty the table and then again add the data to it. But here it is emptying the table for not adding the data again.
You are using a {{constant}} region. This disables reactivity for that part of the template.
Try getting rid of your constant region and run meteor using meteor --release template-engine-preview-5.5. This will run meteor using the new, in progress template engine Meteor UI. There are no constants or preserves in Meteor UI - it's smart enough to make DOM changes at a fine-grained level, so it should work out of the box with things like jQuery plugins.
Man, I never really learnt all the embedded code blocks and stuff you can use in ASP.NET. What I'm trying to do is the following:
I have a repeater
It renders a table
In each row, I need to add a data-bind attribute (yes, for Knockout) containing some text and the rowindex.
More specifically, I want to render:
<table>
<tr data-bind="with:myItems()[0]">
...
</tr>
<tr data-bind="with:myItems()[1]">
...
</tr>
<tr data-bind="with:myItems()[2]">
...
</tr>
</table>
I've tried:
data-bind="<%# String.Format("myItems()[{0}]", Container.ItemIndex) %>"
But that doesn't work (data-bind="<%# Container.ItemIndex %> will however. So I'm trying to combine code with information from the databound item.
I know there is a foreach binding in Knockout, but I can't use it because:
I want/need my HTML to be constructed server-side initially
There's other, specific javascript that needs the HTML to exist already so I can't let Knockout populate the table
I'm using an ASP.NET Repeater, which doesn't mix well with Knockout's templates.
I also know, I could just do this in code-behind (with <tr runat="server" ... >) but I'm trying to put all my layout and javascript in markup and js files, not in C# code.
So, can I, in some way, add code in my markup to combine text I choose, with info from the current databound item?
Bummer, apparently, the answer is dead simple, and it didn't work the first time because of another mistake I made:
<tr data-bind="with: myItems()[<%# Container.ItemIndex %>]">
I put more info on my Blog and a working example on GitHub.
I have a table in my aspx page:
<table id="tbl" runat="server">
</table>
I need to set to set the table caption in the code behind, so that it renders as follows:
<table id="tbl" runat="server">
<caption>Monthly savings</caption>
</table>
Any help will be greatly appreciated.
The previous response from Brad M is almost correct, you must add a runat="server" attribute, an ID attribute and set it to some value you see fit, and then on the server side code:
One big caveat thought, you need to place the caption before the table element, inside is not possible
idYouGave.InnerText = "Monthly savings";
Since you can't use the directly inside the , do something like this to achieve what you want:
<tr>
<th colspan="numOfCols"><caption>...</caption></th>
</tr>
Just add the runat="server" attribute to your caption element, as well as give it an ID. Then just refer to it in code behind as caption.InnerText = "Monthly savings";
It is not possible. Control HtmlTable can contain <tr> and only them, everything else will be removed. Here is the full note from MSDN:
A complex table model is not supported. You cannot have an HtmlTable
control with nested <caption>, <col>, <colgroup>, <tbody>, <thead>, or
<tfoot> elements. These elements are removed without warning and do
not appear in the output HTML. An exception will be thrown if you
attempt to programmatically add these table model elements to the
Control.Controls collection of the HtmlTable control.
Your options are either to switch to asp:Table control, or switch back to plain markup.
I'm stumped by a seemingly simple problem. In my ASP.NET page, I have a table which has a few rows that need to be shown or hidden conditionally from the back end. Sounds simple, right?
What I tried is something like this in the front-end code:
<table>
<tr>
<td id="demorow1">
<p>This row always shows up!</p>
</td>
</tr>
<tr id="conditionalrow" runat="server">
<td id="formoptionsrow">
<!-- This row contains a number of form elements that should only SOMETIMES be shown, as determined by the back-end code. -->
</td>
</tr>
</table>
And in the code-behind file I just do this to hide the code:
conditionalrow.Style["display"] = "none";
This makes the row disappear as intended. I don't mind that it's just invisible, it won't hurt anything. However, this has the side-effect of making several HTML form elements inside of conditionalrow gain ASP.NET's convoluted IDs and NAMEs. This throws off a lot of Javascript functions related to the form that I don't have time to change or rework right now. I need to be able to hide the form (or remove it from the code entirely) from the code behind file, but without changing the IDs and NAMEs of child elements.
I know there's some kind of setting in the newer versions of ASP.NET that allows you to override ASP.NET's ID reassignment. Unfortunately, I'm stuck with ASP.NET 2.0 and don't have the option of using anything newer for this project. What do you recommend?
Instead of making the row a server side control, use a code block to give it an appropriate CSS class.
<tr class="<%:VisibilityClass%>">
Where, in your code behind you have a VisibilityClass string property that return the CSS class name:
public string VisibilityClass
{
get
{
if(shouldBeVisible)
return "visible";
return "hidden";
}
}
You can also use functions if a property is not appropriate.
can you not do a conditionalrow.Visible = false;