I'm trying to customize the form layout of edit/add/del dialogs but the problem is that the height of my custom fields are not following the standard height (from the fields created automatically by jqgrid). Here is an image:
What I want is that the height of td.DataTD from my custom fields 'Responsável' and 'Componente' keep the same as the other fields. Here is the important part of my code:
beforeShowForm: function(form) {
$('#tr_responsavel').html('<td class="CaptionTD">Responsável</td><td class="DataTD"> <table><td><select role="select" id="resp" name="responsavel" size="1" class="FormElement ui-widget-content ui-corner-all"><option role="option" value="1">Usuário</option><option role="option" value="2">Área</option><option role="option" value="3">Grupo</option></select></td><td><input id="inputResponsavel" type="text" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td><td> <img src="img/search.png" width="25" height="25"></td></table></td>');
$('#tr_componente').html('<td class="CaptionTD">Componente</td><td class="DataTD"> <table><td><input id="comp" type="text" role="textbox"></td><td> <img src="img/search.png" width="25" height="25"></td></table></td>');
},
Why you replace existing jqGrid fields with another HTML code? Additionally it seems strange to set <table> inside of the field 'Responsável'. How you imagine that jqGrid get the results from such custom fields? Is it not more easy to append or prepend standard input fields of the Add/Edit form with additional information. In the case the standard fields with the standard ids will stay unchanged and you will have less problems. jqGrid will get the information from the fields without any problems. If one uses jQuery UI Autocomplete or jQuery UI Datepicker controls it do that.
If you really need custom field you should follow the documentation and use edittype: "custom". Look at the demo from the answer for more information.
Related
I am trying to create multi-column combo-box in Kendo-Angular 2.I can't find it in the documentation: https://www.telerik.com/kendo-angular-ui/components/dropdowns/ Is this option present in the Kendo support for Angular 2?
The MultiSelect component provides numerous templates, which could be used to control the rendering of the header, footer and the item content. That being said, we can easily achieve different layout using some additional styling.
<kendo-multiselect
[data]="listItems"
[(ngModel)]="value"
[textField]="'text'"
[valueField]="'value'"
>
<ng-template kendoMultiSelectHeaderTemplate>
<div class="dropdown-header k-widget k-header">
<span>Value</span>
<span>Text</span>
</div>
</ng-template>
<ng-template kendoMultiSelectItemTemplate let-dataItem>
<span class="k-state-default"><h3>{{dataItem.value}}</h3></span>
<span class="k-state-default"><h3>{{dataItem.text}}</h3></span>
</ng-template>
</kendo-multiselect>
Here is a plunker that demonstrates the templates usage:
http://plnkr.co/edit/BvdyXuQ4TQ5OFwDliqYd?p=preview
Please note, that the component doesn't have table-like layout and you will need to implement it manually. Nevertheless as it is shown in the demo, this shouldn't be a tough task.
We have a mindbreeze Installation, which defines 3 Datasources. And with the editor I created a searchmask.
The generated/exported code seems to be plain Mustache-html,
<div data-template="filteredfacet" data-name="datasource/category" role="treeitem" tabindex="-1" aria-expanded="true" aria-labelledby="label7841" style="position: relative;">
<script type="text/x-mustache-template" data-tag-name="span" data-attr-title="{{name}}{{^name?}}{{html}}{{/name?}}">
<span class="{{#showAddAnd?}}mb-add-and-available{{/showAddAnd?}}">
{{{html}}}
{{#showAddAnd?}} <a class="action mb-add-and"><i class="icon-plus-sign"></i></a> {{/showAddAnd?}}
</span>
<span class="pull-right" title="{{count}}">
{{#count?}}{{count}}{{/count?}}{{#excluded}}–{{/excluded}}
</span>
</script>
</div>
Where it only seems possible to change the look and feel.
In the Online Documentation an Cheat-Sheet I could find some metadata, but not the desired.
Does someone have any experience with this? Or some pointer how I can limit a search on only on specific data source.
You can add a constraint for the whole search application. This also allows you to restrict to a specific data source. Just add a results display like "List", "Image Gallery" or "Map":
After adding you can change the option "Restrict the Results" to every query you want. In your case e.g. datasource/category:"Web" does the trick.
I have an xPage with this content:
<div class="lotusFrame">
<xc:layoutCommonBanner />
<xp:callback facetName="facetTitleBar" id="callbackTitleBar" />
<xc:layoutDiscrepancyPlaceBar />
<div class="lotusMain">
<div class="lotusColLeft">
<xp:callback facetName="facetColLeft" id="callbackColLeft" />
</div>
<div class="lotusColRight">
<xp:callback facetName="facetColRight" id="callbackColRight" />
</div>
<div class="lotusContent">
<xp:callback facetName="facetContent" id="callbackContent" />
</div>
</div>
<xc:layoutCommonFooter />
<xc:layoutCommonLegal />
</div>
As you can see, there are several custom controls in it composing layout. In the facetContent, there is a document with document datasource. It's the only document in the page. I need to get this document somehow in the layoutDiscrepancyPlaceBar custom control.
I found some old articles on the web with undocumented feature called currentDocument. It should be on every page with document datasource. But it doesn's work. I have Domino 8.5.2 and currentDocument seems to be no longer supported.
Can you help me out? How can I get document datasource from one custom control in another custom control. Is it even possible?
Thanks in advance, Jiří
EDIT: OK, it is still supported, but it only works in custom control, that is included inside the one with document datasource. In the case scenario above it doesn't work.
Your best option is to hand over the binding name in a custom property. (lets call it bindto. Then you bind your field to
"${#{"+compositeData.bindto+"}}"
See details here (inside the prezi)
P.S. currentDocument is documented somewhere.
You can also pass a handle on the data source directly to the custom control, as well as the name of the item to bind to on the data source. Because EL supports array syntax as well as dot syntax, this allows you to define expressions like this:
#{compositeData.dsn[compositeData.fieldName]}
(where "dsn" is the property being passed the handle on the data source, and "fieldName" is the property being passed the name of the item to bind to on that data source.)
More details on this approach can be found here.
I've added the following code to the selected transformation of a News List webpart:
<%# Register Src="~/CMSAdminControls/ContentRating/RatingControl.ascx" TagName="RatingControl" TagPrefix="cms" %>
<cms:RatingControl ID="elemRating" runat="server" Enabled="true" RatingType="Stars" ExternalValue='
<%# Convert.ToString(CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatingValue"), 0)/((CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatings"), 0) == 0?1:CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatings"), 1)))) %>' />
The rest of the selected transformation is the same as the default.
According to the Kentico documentation this should add the webpart to the details page of a news item.
For some reason the input tag is getting rendered as follows:
<input type="hidden" name="p$lt$zoneContent$pageplaceholder$pageplaceholder$lt$News$NewsList$repItems$ctl00$ctl00$elemRating$RatingControl$elemRating_RatingExtender_ClientState" id="p_lt_zoneContent_pageplaceholder_pageplaceholder_lt_News_NewsList_repItems_ctl00_ctl00_elemRating_RatingControl_elemRating_RatingExtender_ClientState" value="0">
note the type="hidden" attribute. This causes the control not to render and I'm not sure where to fix this.
As mentioned in my comment. The is actually just used to store the value. Below that, it renders some extra content that will not display unless some CSS classes are carried over from the CMSDesk.css.
You can either copy the necessary CSS classes into your own CSS, or just import the CMSDesk.css file where necessary to make sure the rating elements are displaying.
I would like to know how Wikipedia does its search field. What I mean by this is two things: Its gradient and its button.
How does it make a gradient in the field? This can be easily done with CSS cross browser at this point, but when you do the IE CSS code, it aliases the text. Wikipedia has a gradient background, but the text is still anti-aliased! How do they do that?
Also, how did they put a clickable search button INSIDE the text field?
Thanks.
It appears that the actual search input has no styling -- meaning no border and a transparent background. The containing div is styled to look like an input field (border and gradient). The clickable button is inside the div but not inside the actual input element.
You could just look at the code. The search box as it appears is only a div element with a border. This div itself has the gradient set via CSS (background-image). As you can see the button element is also not inside the text field.
<div id="simpleSearch">
<input id="searchInput" name="search" type="text" title="Search Wikipedia [f]" accesskey="f" value="" />
<button id="searchButton" type='submit' name='button' title=""><img src="[x]" alt="Filltext" /></button>
</div>