Using .net core with the DevExpress DxGrid component, I'm looking for the best way to change the default hyperlink style buttons.
My goal is to show them as bootstrap buttons, so mostly just a css class change is needed.
The best way would be using official attributes/templates/events, etc. and not some javascript 'hack' to replace the classes.
Using a DxGridCommandColumn you can define templates for the new button with the HeaderTemplate, for the edit and delete buttons use the CellDisplayTemplate.
This integrates nicely with the existing DxGrid new/edit/delete functionality.
Example:
<DxGridCommandColumn>
<HeaderTemplate Context="unique">
<DxButton CssClass="mt-2 mr-1" IconCssClass="fas fa-plus" RenderStyle="ButtonRenderStyle.Primary" Text="New"
#onclick="(() => MyGrid.StartEditNewRowAsync())" />
</HeaderTemplate>
<CellDisplayTemplate Context="unique">
<DxButton CssClass="mt-2 mr-1" IconCssClass="fas fa-edit" RenderStyle="ButtonRenderStyle.Warning" Text="Edit"
#onclick="(() => MyGrid.StartEditRowAsync(unique.VisibleIndex))" />
<DxButton CssClass="mt-2 mr-1" IconCssClass="fas fa-trash-alt" RenderStyle="ButtonRenderStyle.Danger" Text="Delete"
#onclick="(() => MyGrid.ShowRowDeleteConfirmation(unique.VisibleIndex))"/>
</CellDisplayTemplate>
</DxGridCommandColumn>
Related
I have a wizard with the following custom wizard buttons:
<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
<clr-wizard-button [type]="'previous'">Previous</clr-wizard-button>
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
<clr-wizard-button [type]="'custom-save'">Save</clr-wizard-button>
Now I want to style the button of type custom-save with a custom color and for this, I need to apply a css-selector. attr.class won't work.
What is the best way to achieve this?
edit:
Formatted html output of the custom-save button:
<clr-wizard-button class="clr-wizard-btn-wrapper" _nghost-c5="" ng-reflect-type="custom-save" ng-reflect-disabled="false" aria-hidden="false">
<button _ngcontent-c5="" class="btn clr-wizard-btn" type="button">
Speichern
</button>
</clr-wizard-button>
Just place a custom class on your ClrWizardButton and it will be rendered for you.
<clr-wizard-button [type]="'custom'" class="my-custom-button">Cancel</clr-wizard-button>
This will render out as you see, where you can target the button using .my-custom-button button in your CSS.
<clr-wizard-button class="my-custom-button clr-wizard-btn-wrapper ng-star-inserted" _nghost-c1="" ng-reflect-type="custom-previous" aria-hidden="false">
<button _ngcontent-c1="" class="btn clr-wizard-btn btn-outline clr-wizard-btn--secondary" type="button">Custom</button>
</clr-wizard-button>
Assuming this renders a standard button with a type, then an attribute selector would work.
button[type="custom-save"] {
background: lightgreen;
}
<button type="custom-save">Save</button>
Here is my dropdownbutton:
<xp_1:dropDownButton id="dropDownButton1">
<xp_1:this.treeNodes>
<xp_1:basicContainerNode styleClass="btn-primary" label="Tools">
<xp_1:this.children>
<xp_1:basicLeafNode label="Edit">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="New">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="Home">
</xp_1:basicLeafNode>
</xp_1:this.children>
</xp_1:basicContainerNode>
</xp_1:this.treeNodes>
</xp_1:dropDownButton>
How to add glyphicon to the main dropdown button?
Adding a span somewhere inside just doesn't work like for core button:
<xp:button id="button2" styleClass="btn btn-success" value="Save" title="Save">
<span class="glyphicon glyphicon-floppy-disk"></span>
</xp:button>
Once you add code in your button, i.e. an eventHandler, you can add the icon there. Here is a button I have that includes a Font Awesome icon, but Glyphicons work the same way. Once you create the button and actions, go into the source code and add the icon as below:
<xp:button
value="Submit"
id="btnSave"
styleClass="btn btn-primary"
>
<i
class="fa fa-check"
aria-hidden="true"
></i>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete"
>
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument
var="currentDocument"
></xp:saveDocument>
<xp:openPage
name="#{sessionScope.lastPageName}"
></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
UPDATE
I did some tests, and while you can't add the icon the way we both want to, you can use CSS. I used a page with one dropdown button, and added CSS :before to add the icon within the button:
button::before {
font-family: "Glyphicons Halflings";
content: "\e172";
}
You may have to play with the CSS a little but hopefully, this can help.
I am using the DateTimeField component of Wicket, but I am struggling to apply any styling to it. The HTML snippet is this:
<span id="creationDate" wicket:id="creationDate" />
and the accompanying Java is:
add(new DateTimeField("creationDate", new PropertyModel<Date>(this, "creationDate")));
Which works, but produces this (which I have tidied up):
<span id="creationDate" wicket:id="creationDate">
<wicket:panel xmlns:wicket="http://wicket.apache.org">
<span style="white-space: nowrap;">
<input type="text" wicket:id="date" size="12" value="28/11/11" name="creationDate:date" id="date1f"/>
<span class="yui-skin-sam">
<span style="display:none;position:absolute;z-index: 99999;" id="date1fDp"></span>
<img style="cursor: pointer; border: none;" id="date1fIcon" src="wicket/resource/org.apache.wicket.extensions.yui.calendar.DatePicker/icon1-ver-1322148000242.gif" alt="" title=""/>
</span>
<input type="text" wicket:id="hours" size="2" value="14" name="creationDate:hours"/>
<span wicket:id="hoursSeparator"> :</span>
<input type="text" wicket:id="minutes" size="2" value="17" name="creationDate:minutes"/>
</span>
What I am hoping to do is get the components separately, then either add style or class attributes to them. Any way this can be done?
You can use the method public Component add(final Behavior... behaviors) defined in the super class Component.
What you are looking for is the behavior AttributeAppender with which you can add CSS id/classes or every other attribute you want to append.
See the API: http://wicket.apache.org/apidocs/1.5/org/apache/wicket/behavior/AttributeAppender.html
UPDATE
I just got a quick look at the source code of the DateTimeField. Unfortunately, you can't access the components separately.
I can think of two ways how you can style the components:
You can put the whole DateTimeField inside a custom div and then, for example, accessing the textfields via cascading css selectors. (e.g. #myDiv input)
or you create your own DateTimeField class with the existing source code and put your css id/classes there.
Turns out you can just override the HTML, in this case by replacing DateTimeField.html in the org.apache.wicket.extensions.yui.calendar package. This then replaces the default HTML, and is where I added the class details.
Another jQuery noob question - what am I doing wrong??
I have some HTML markup rendered by ASP.NET 3.5 webforms which looks like this:
<input id="ctl01_cphContent_pnlBasicInfo_chkRC"
type="checkbox" name="ctl01$cphContent$pnlBasicInfo$chkRC" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_chkRC">Recurrent Charges</label>
<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblPromoValidFor"
class="rcPromo">Validity:</span>
<span class="rcPromo">
<input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidFor"
type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor"
value="rbnDiscountValidFor" checked="checked" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidFor">valid for</label>
</span>
<span class="rcPromo">
<input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidUntil"
type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor"
value="rbnDiscountValidUntil" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidUntil">valid until</label>
</span>
<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountMonths" type="text"
id="ctl01_cphContent_pnlBasicInfo_txtDiscountMonths"
class="textbox" class="rcPromo" originalValue="" style="width:30px;" />
<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblMonths" class="rcPromo"></span>
<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountUntil" type="text"
id="ctl01_cphContent_pnlBasicInfo_txtDiscountUntil"
class="textbox" class="rcPromo" originalValue="" style="width:150px;" />
I have a checked "chkRC" which I want to trap and use to enable/disable other UI controls
I have a number of labels, input (type=radio) and input (type=text) UI controls. These are all marked with the "rcPromo" dummy CSS class
I have a CSS class called "textbox" for the normal textbox and "textboxDisabled" for the disabled state of the textbox, in an externally referenced CSS file, that work OK (when used in server-side code, that is)
What I'm trying to accomplish in jQuery is this: when the "chkRC" checkbox is disabled, I want to disable all relevant UI controls.
My jQuery looks like this:
$(document).ready(function() {
$("#<%= chkRC.ClientID %>").click(function() {
$('.rcPromo > :label').toggleClass('dimmed');
if (this.checked) {
$('.rcPromo').removeAttr('disabled');
$('.rcPromo .textboxDisabled').addClass('textbox').removeClass('textboxDisabled');
}
else {
$('.rcPromo > :input').removeAttr('checked');
$('.rcPromo .textbox').addClass('textboxDisabled').removeClass('textbox');
$('.rcPromo').attr('disabled', true);
}
});
});
It works fine for the labels and the radiobuttons - but I just can't get it to work with the textboxes - they just stay the same all around, nothing changes (they don't get disabled and they don't change their appearance to indicate that they're disabled, either).
I don't understand this - I do see several (a few more than in the sample) textboxes, which are <input type="text"> in HTML, and they do have the class="rcPromo" and class="textbox" on them - so why doesn't jQuery find and update those?
Any ideas?
Marc
I can't think of a way to augment the css class names that are assigned to controls from the skin file (phoenix is correct, the class names need to be added in the same attribute).
I can think of a few workarounds though:
--> You can wrap all the textboxes you want disabled in a div with a given class:
<div class="disable_textbox"><asp:textbox id="".../></div>
and then disable them by selecting:
$('.disable_textbox input').attr('disabled', true);
--> You can include character strings in the ID of the textboxes you want disabled:
<asp:textbox id="txtDiscountUntil_DisableMe" ... />
and then disable them like so:
$("input[id*='DisableMe']").attr('disabled', true);
--> You can add a custom attribute to your textbox:
txtDiscountUntil.Attributes.Add("disableme", "true");
and then disable them like so:
$("input[disableme='true']").attr('disabled', true);
Your HTML markup is not the correct one.
You can't add two classes like the one in your code.
Two classes can be added like this
<input type="text" class="Class1 Class2" />
and not like
<input type="text" class="Class1" class="Class2" />
Why don't you use hasClass to check whether the element has this class set or not?
I think you have to give this in an OR condition for the two classes.
I am new to jQuery, trying to populate a GridView or Telerik RadGrid using jQuery. Not sure how to go about it and unable to find any examples. Any help is appreciated. Thanks.
Essentially I am trying to display a modal window with a textbox and button. The user enters a search criteria presses the button and a gridview in the same modal window is populated with the results.
The user than selects records in the grid presses another button and the selected users are inserted into the database table, modal window is closed and a grid on the parent page is refreshed showing the new added users.
<input type="button" id="btnAddNewUserj" value="Add New User" />
$(document).ready(function() {
$("#btnAddNewUserj")
.click(function() { ShowNewUserDialog(); return false });
$("#btnSearch")
.click(function() { FindUsers(); return false });
});
function ShowNewUserDialog() {
$("#newuserDialog").dialog({ modal: true, bgiframe: true }).dialog("open");
}
function FindUsers() {
// HOW TO DO THIS?
// Show selectable list of users from the database in grid.
}
<div id="newuserDialog" title="Add New User" style="display:none;">
<div>
<input id="txtSearchFor" type="text" />
<input id="btnSearch" type="button" value="Search" class="Button" /></div>
<p> DISPLAY RESULTS HERE </p>
<div style="margin:10px 6px;">
<input type="button" id="btnjAdd" value="Add" class="Button" />
<input type="button" id="btnjCancel" value="Cancel" class="Button" />
</div>
</div>
A couple of thoughts here. You cannot populate a GridView or Telerik Grid using jQuery. jQuery is a client side technology and those two grids are server side.
You can use jQuery to hit a web service and build out and HTML table with the results (which is basically what a GridView does).
I'm guessing however, that you would be better served just using native GridView databinding. You can use a .Net UpdatePanel around the grid if you want to prevent full post backs.
I think telerik is not the answer.
Use telerik radgrid's client side binding, see this for an example: http://demos.telerik.com/aspnet-ajax/grid/examples/clientbinding/defaultcs.aspx
Note that sample shows how to bind to a WCF Web Service and an ADO.NET Data Service. There are other samples around.
Other variations of binding: http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx
More on client side binding: http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx