Change particular div class in kendo grid row template - kendo-grid

I am running one project where i am using kendo grid row template.
Below is my html grid code:
table id="grid" style="width:100%">
<colgroup>
<col class="photo" />
<col class="details" />
<col />
</colgroup>
<thead style="display:none">
<tr>
<th>
Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td style="width:30%">
div class="row">
<div id="dvImage" class="col-sm-4" style="width:118px">
#= imagelink #
</div>
<div class="col-sm-8" style="width:400px">
<span class="name" style="font-size:14px; color:green">#: Link #</span>
</div>
</div>
</td>
</tr>
</script>
In the above script for div class name "dvImage" for sometimes data is not present so it's still contain those space.
I googled many things and got to know that if we can find this div class in onDataBound event then i can check if this div don't have data then can hide this div for particular row. but when i tried this only for first row i am able to hide the data for other rows still it was containing space.
All suggestions are welcome.

If I understand your requirements correctly if the image doesn't exist then you want the rest of the row details to take up the rest of the space? If this is not correct the please correct me.
Assuming this is the case then you can actually change your template like this:
Before
<div id="dvImage" class="col-sm-4" style="width:118px">
#= imagelink #
</div>
After
#if(data.imagelink === null || data.imagelink === ""){#
<div class="col-sm-12" style="width:518px">
#} else {#
<div id="dvImage" class="col-sm-4" style="width:118px">
#= imagelink #
</div>
<div class="col-sm-8" style="width:400px">
#}#
I have put together a demo for you to look at here: http://dojo.telerik.com/eMiMa/2
(in the demo I have told the grid to hide the photo for every even row and expand the details grid to take up two columns rather than 1 column)
What this change simply does is look at your template and checks to see if the imagelink value is valid and if it isn't then it simply expands the detail div for you to take up the maximum space. If the image does exist then it processes the template as normal.
In order to keep the dimensions the same the opening div for your next section is contained within the conditional formatting so that it applies the correct spacing for you.
If the requirement is to just hide the entire row then you can move this conditional check to the top of the template and hide the entire row. If this is the desired outcome then I can update the answer to reflect this.

Related

I want to dynamically allocate css tags in my HTML. I'm also using Angular 5 and Bootstrap 3.3.7

I am creating a table from data brought in as a JSON. This could be tonnes of data so I have a loop making all the rows in the table. I want to be able to click on a row and have that row expand showing the 2nd row with the list.extraInfo beneath it. Code looks like this:
<tbody *ngFor= " let list of lists, let i = index ">
<tr data-toggle="collapse" data-target="#{{i}}" class="clickable">
<td > something </td>
<td >{{i+1}}</td>
<td >{{list.name}}</td>
</tr>
<tr >
<td colspan="3">
<div id="{{i}}" class="collapse">
{{list.extraInfo}}
</div>
</td>
</tr>
</tbody>
I'm well aware that having data-target="#{{i}}" and id="{{i}}" doesn't work, but I cannot find anywhere what it is I need to put there to get every row of the table to have a separate and distinct id number so that the collapse feature works on the row that you click on.
As it stands it opens the extraInfo row for the 1st row regardless of which row I click on.
Curly brace syntax ({{ }}), also called interpolation, is meant for inner HTML. That is why {{i+1}} works in your td but not in your tr tag. To use a variable in a <tr> attribute, you don't need to wrap it in curly braces.
Secondly, the Can't bind to 'target' since it isn't a known property of 'tr'. error suggests that you need to use an attribute input binding instead:
<tr data-toggle="collapse" [attr.data-target]="'#'+ i" class="clickable">

How do I setup columns in a < td > element within an HTML < table >?

The following output:
Is delivered by the following code:
<table class="table container">
<tr>
<th class="col-md-1 text-center">
#Html.DisplayNameFor(Function(model) model.SurveyResults.FirstOrDefault().QuestionNum)
</th>
<th class="col-md-2 text-center">
#Html.DisplayNameFor(Function(model) model.SurveyResults.FirstOrDefault().QuestionText)
</th>
.
.
.
<th class="col-md-2">
#Html.DisplayNameFor(Function(model) model.SurveyResults.FirstOrDefault().Answers)
</th>
</tr>
#For Each item In Model.SurveyResults
#<tr>
<td class="col-md-1 text-center">
#Html.DisplayFor(Function(modelItem) item.QuestionNum)
</td>
<td class="col-md-2">
#Html.DisplayFor(Function(modelItem) item.QuestionText)
</td>
.
.
.
<td class="col-md-2">
#For Each ans In item.Answers
#ans.AnswerText
#ans.AnswerStats
#<br />
Next
</td>
</tr>
Next
</table>
In the Answers column the string in the parenthesis are the stats regarding the answer. I would like the stats to show up as another column to the right of the Answers. The answers will ultimately be of varying lengths, and the stats need to show up to the right lined up vertically. The code above will always show the stats at the end of the answer text, where ever that occurs.
I tried several ideas from SO and other forums, but couldn't figure out how to easily create 2 'sub-columns' within the Answers < td > element of each < tr > row. I want to stick with Razor/HTML code.
You must add another table within the answers td element.
This is very similar i think:
Html table tr inside td
The code used to achieve my objective is shown below, however, the solution is thanks to and attributed to Hieu Le's post above.
I'm just showing the section of code where the sub-table is placed, which is the last < td > section in the Razor code shown in the original post.
<td>
<table>
#For Each ans In item.Answers
#<tr>
<td class="col-md-2" style="border-top: none; padding: 0">#ans.AnswerText</td>
<td class="col-md-1" style="border-top: none; padding: 0">#ans.AnswerStats</td>
</tr>
Next
</table>
</td>
The Razor code above yielded the following presentation. I made other changes to the page, and the page is not yet done so ignore the sloppy presentation of field names instead of display names. But the place to observe is just in the Answers column. You can see that the two fields previously separated by only a space are now presented in separate columns. The additional style elements are simply to eliminate extra border lines which would detract from the overall presentation.

Does ng-hide hide the contained DOM elements?

I have the following snippet:
<p>AAA</p>
<div ng-show="files.length == 0">
<p>BBB</p>
<tr class="no-files">
<p>CCC</p>
<td colspan="2">
<p class="no-files">There are no files to load.</p>
</td>
</tr>
</div>
It seems like the ng-show is only marking its own div as (in)visible, and not also the contents of that div. In my application, the "there are no files..." message is displayed regardless of the number of elements in files. I expected entire div to be shown/hidden. Have I done something wrong or is this how ng-show works?
In the example above, when the number of files is greater than zero, AAA and CCC are displayed.
Is this the proper behavior or have I done something wrong?
Firstly, I'd say you have invalid HTML. <div>s can't contain table rows. Try removing the wrapper <div> and putting ng-show on the <tr>.
p can't appear in a table outside of a table cell. Neither can div. Use ng-show on the tr element(s) instead.
<tr class="no-files" ng-show="files.length == 0">
<td colspan="2">
<p class="no-files">There are no files to load.</p>
</td>
</tr>

Aligning elements at the bottom of multiple columns

I've got three unequal length columns of text and I want to put a button at the bottom of each column. I'm looking for a current method--preferably CSS only--of positioning the buttons so that they're at the same vertical position in the page when the columns are side-by-side (floated), and then are positioned after the relevant column when the layout is single column (on small screens). I don't necessarily need the columns to be equal length since they don't have backgrounds, unless that's part of the solution.
This is the code/description for the relevant section:
<div 1 - position:relative>
<div 2 - display:block;overflow:hidden>
<div 3 - position:relative; float:left>
<div 4 - display:block>
<img src="image1.jpg" />
<h1>Title 1</h1>
<p> Column 1 text</p>
</div 4>
</div 3>
<div 3 - position:relative; float:left>
<div 4 - display:block>
<img src="image2.jpg" />
<h1>Title 2</h1>
<p> Column 1 text</p>
</div 4>
</div 3>
<div 3 - position:relative; float:left>
<div 4 - display:block>
<img src="image3.jpg" />
<h1>Title 3</h1>
<p> Column 1 text</p>
</div 4>
</div 3>
</div 2>
</div 1>
I've tried lots of variations in code and placement, but I haven't been able to make it work. I've also found a few solutions, but they were either old (back to IE 5) or I couldn't figure out if they were relevant Maybe they were but I couldn't see it!).
Placing them in a separate div after the column divs looks good on a full screen, but on a small screen all the buttons are positioned after the last column. Placed at the beginning or end of the columns has them positioned vertically based on the length of text in each column.
I tried position:absolute;bottom:0 to place them at the bottom of div 2, with poor results. Any ideas/solutions are much appreciated.
The only non-JS solution I can think of would be to make it a table.
<table valign=top cellspacing=18px>
<tr>
<td align=center><h2>Title 2</h2></td>
<td align=center><h2>Title 2</h2></td>
<td align=center><h2>Title 3</h2></td>
</tr>
<tr>
<td valign=top>
<img src="image1.jpg" />
Column 1 text
</td>
<td valign=top>
<img src="image2.jpg" />
You looked me dead in the eye and told me you were dying.<br />
And then there was no light on the earth.<br />
But what you saw in me that night was not a light.<br />
Only Darkness.
</td>
<td valign=top>
<img src="image3.jpg" />
Column 3 text
</td>
</tr>
<tr>
<td align=center><button>Hello</button></td>
<td align=center><button>There</button></td>
<td align=center><button>Sir </button></td>
</tr>
</table>
This code gives the desired result, and you can mess around with the css for each cell.
Otherwise, you could loop through each div element with jQuery or pure JavaScript, find the largest height, store it in a variable, then loop back through the div elements containing the button and set each height according to the variable. Then the position:absolute;bottom:0px; would work.
Actually, the table only works on wider screens. Pretty sure it won't flow the text into a single column with the buttons between text sections. I used display: and screen width media queries to alternately display/hide two sets of buttons, one set positioned after each column and one set floated in a div positioned after all the columns. I guess I could have also made two versions and used a media query to display/hide based on screen width. The jsfiddle at jsfiddle.net/DTMgJ/5/ also solves it using media queries and large negative margins.

Representing Table with DIV

I had a table
<td colspan="6">
<table width="100%" border="0">
<tr align="center">
<td width="5%"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></td>
<td width="7%"><strong>Item Id </strong></td>
<td width="20%"><strong>Item</strong></td>
<td width="17%"><strong>Type</strong></td>
<td width="17%"><strong>Rate</strong></td>
<td width="17%"><strong>Quantity</strong></td>
<td width="17%"><strong>Price</strong></td>
</tr>
I am representing the table through <DIV> like This
<div id="table">
<div class="row" id="row" align="center">
<div id="cell"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></div>
<div id="cell"><strong>Item Id </strong></div>
<div id="cell"><strong>Item</strong></div>
<div id="cell"><strong>Type</strong></div>
<div id="cell"><strong>Rate</strong></div>
<div id="cell"><strong>Quantity</strong></div>
<div id="cell"><strong>Price</strong></div>
</div>
but I can't find any replacement for colspan="6". Can anyone help?
OK, let's get this straight for the 100th time.
Tables are not evil.
Tables are for tabular data. If you have headers, rows or columns, then it's cool. Tables are the thing to use.
In HTML. Tables.
Misusing elements is evil
Using any element for the wrong reason is wrong.
h1 for images
table for layout
button for links
These things are wrong. And bad.
Summary
Use tables for tables, not for layout, and everyone will be happy.
Div do not use concept of columns. You can have as many as you want, div's in a row. You can fix width of div and then can use them to build up table. By the way you can go for css framework like bootstrap will be much more efficient.
Make the div width in such a way that, it will occupy "TD" sections.
For that you just need to add one more class with some higher width in it and some less div on the new row.