This is the code I am using present, tried in many ways like used placeholder tags but nothing worked out. Help me
<kendo-grid-column field="food" title="foods">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell
[showOperators]="false"
[column]="column"
[filter]="filter">
</kendo-grid-string-filter-cell>
I tried this approach working now
Just put this piece of code in your component file
public placeHolders(){
$(".k-textbox").eq(0).attr("placeholder", "column 1");
$(".k-textbox").eq(1).attr("placeholder", "column 2");
$(".k-textbox").eq(2).attr("placeholder", "column 3");
}
There is no solution to write default placeholder in kendo-UI > kendo-grid-string-filter-cell as per my understanding.
I have the same problem with you and I cannot find an easy way to do it. The only way i can think to achieve this is below:
1) Create a Reusable Custom Filter Component from Kendo -> https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/
2) Then add a TextArea Input as your filter input and there's the floatingLabel html element in order to use it like placeholder.
#Component({
selector: 'my-app',
template: `
<kendo-textbox-container floatingLabel="First name">
<textarea kendoTextArea></textarea>
</kendo-textbox-container>
`
I cannot find a way to do this by using the Built-In Filter Templates that Kendo UI provides.
I'm not 100% sure of your question. I'm using Vue, but here is how I am setting placeholder text when there are no records by setting the noRecords attribute.
<kendo-grid ref="gridComponent"
...
:no-records="noRecords"
...
v-on:change="rowSelected"
:sort="sortFilter">
In Vue, noRecords is a reactive data field, defined as:
data () {
return {
noRecords: {
template: '<br /><br/> Please start typing a Policy Number, Insured Name, or Address to show results <br /><br /><br />'
}
}
Related
I have implemented form validation with formik and react. I am using material-UI.
<Formik
initialValues={{ name: '' }}
onSubmit={values => {
console.log('submitting', values);
}}
validate={values => {
alert();
let errors = {};
if (!values.name) {
errors.name = 'Name is required';
}
return errors;
}}>
{({
handleSubmit,
handleChange,
values,
errors
}) => (
<form onSubmit={handleSubmit}>
<div>
<input name="name"
onChange={handleChange}
name="name"
value={values.name}
type="text"
placeholder="Name">
</input>
{errors.name &&
<span style={{ color: "red", fontWeight: "bold" }}>
{errors.name}
</span>
}
</div>
<div>
<button>Submit</button>
</div>
</form>
)}
</Formik>
Above code is working fine for normal input tags but it is not working for Select and TextField material widgets.
Is there a compatibility issue with material UI ?
Please help.
As Chris B. commented, the solution is to wrap each desired element inside a React component that has what Formik requires. In the case of Material-UI, Gerhat on GitHub has created some of those components.
You can use those by downloading the source from the github link above. There is also a usage example there, showing how to use Gerhat's "wrapper" for a Material TextField and a Select.
In Gerhat's usage example, TextField is a component in that github repo; it isn't the Material UI TextField directly; it is a Formik-compatible "wrapper" around the Material TextField widget.
By looking at gerhat's source code, you can learn how to do the same for other Material widgets you need.
HOWEVER, gerhat's implementation may not be the easiest for a beginner to understand. Those wrappers are easy to use, but it may not be obvious from that code how to write your own wrappers for other widgets or components.
See my answer here for a discussion of Formik's <Field> and useField. Those are easier ways to "wrap" existing React components. (Not specifically Material-UI widgets, but AFAIK, you can wrap those like any other React component.)
If you do want to understand gerhat's approach, here are some comments about the code you'll see at github.
This is the source to TextField.jsx in that repo.
The "heart" of TextField.jsx, is its wrapping around Material's TextField. The generated virtual-DOM element (representing a Material TextField) is seen in these lines:
return (
<TextField
label={label}
error={hasError}
helperText={hasError ? errorText : ''}
{...field}
{...other}
/>
)
See the source link above, for the details of how this is made compatible with Formik. IMHO, a fairly advanced understanding of both React and Formik is required, to understand what is being done there. This is why I mentioned Field and useField as the place to start, for writing your own "Formik-compatible wrappers".
One detail I'll mention. The implementation relies on a file index.js in the same folder as TextField.jsx, to map the default of TextField.jsx, which is FTextField, to the name TextField, which is how you refer to it in the "usage" code at the start of this answer. SO Q&A about index.js file of a React component.
index.js contents:
export { default as TextField } from './TextField'
The other two files in the TextField source folder are ".d.ts" files. See this Q&A to understand those. You don't need them unless you are using TypeScript.
I am rendering a form with Blade, Laravel's server-side templating language. The default values for the form elements are assigned by Blade. There is no JavaScript involved until now. Now I want to implement a reset button.
When a user presses the reset button the form should be cleared. A simple HTML reset button is not sufficient as it would not reset the "value=something" default values to "null".
In other words:
<input type="text" name="fullname" value="John Doe">
is supposed to be
<input type="text" name="fullname" value="">
after the user pressed the reset button.
With JQuery I would do something like this:
$("body").find('form').find('input').val('');
How can I do it with vue.js? Adding av-model and setting the v-model properties to null interferes with the server side default values...
In general: would you suggest to add a DOM manipulating lib to the application for such "hybrid" use cases where vue.js does not control the data?
If you plan on using vue, forget about altering the dom, vue works around states so imagine your input is like this
<input type="text" v-model="test_input">
and when you change the variable test_input the input automaticly changes its value, so just set it to empty in a method.
<button #click="clear_form"> Clear </button>
<script>
export default {
data() {
return {
test_input : ''
}
},
methods:{
clear_form(){
this.test_input = '';
}
}
}
</script>
I ended up writing a reset-form button component. In this component I use plain Javascript to get all input, select, ... fields of the form identified by an id and reseted the values to ''.
I took this option as it was the fastest way to reset the form and I don't have to change anything (e.g. add props, change ajax calls) if my form changes.
I am somewhat new to Angular and trying to learn how to use Kendo Grid without jQuery using Angular. I get the jQuery code that is used for the widget configuration is written in javascript but i am not getting the HTML directives.
<kendo-grid options="mainGridOptions">
What does "options" attribute mean ? I am assuming its an attribute that the kendo-grid (as defined by the directive) widget has ? But when i go the documentation, I don't see it in the configuration of fields drop-down ?
You should use k-options like this...
<kendo-grid k-options="mainGridOptions"></kendo-grid>
... and then on your controller scope you can expose your options object as so.
...
$scope.mainGridOptions = {
dataSource: {
data: myData
},
height: 550
};
...
This is how you reference the options object.
In jQuery based Kendo UI it is passed into the constructor like this...
$('myGrid').kendoGrid({
dataSource: {
data: myData
},
height: 550
});
As a side note, most if not all configuration options are available directly on the directive with the k- prefix.
For Example...
<kendo-grid
k-data-source="myData"
k-height="550"
></kendo-grid>
.. and then you would just expose your data on the controller...
...
$scope.myData
...
Another note is that if you use the directive as an attribute like this...
<div kendo-grid="myGrid"
k-data-source="myData"
k-height="550"
></div>
... you are assigning it a reference allowing you to access the widget's Kendo object in the controller's scope.
...
$scope.myGrid.resize();
...
The attribute k-options can be used to store the whole widget configuration in the controller. This attribute can also be used in other Kendo components like scheduler, date picker etc.
Here an example for Kendo datepicker implemented with the k-options attribute:
<div ng-app="app" ng-controller="MyCtrl">
<input kendo-date-picker k-options="monthPickerConfig">
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
$scope.monthPickerConfig = {
start : "year",
depth : "year",
format : "MMMM yyyy"
};
});
</script>
I am adding a whole bunch of Jquery validation rules dynamically. I am getting error because some of the textboxes are hidden based on user selection on the page before and therefore do not exist on the page. How do I check if the textbox exists before adding the validation rules?
Here are the validation rules being added:
$('[id$="txtLastName"]').rules('add', {
isSpecialChar: true,
maxlength: 13,
oneOrBothEntered: "txtFacility",
messages: {
oneOrBothEntered: "Either Provider Name or Facility Name must be entered"
}
});
$('[id$="txtFirstName"]').rules('add', {
isSpecialChar: true,
maxlength: 11,
conditionallyRequired: "txtLastName",
messages: {
conditionallyRequired: "This field is required."
}
});
...and a whole bunch more. So say txtLastName was hidden, this code breaks. How do I check first if txtlastname exists before adding the rules?
EDIT:
Per #sparky's comment, adding HTML for fields:
<div class="container1">
<span class="span150Padded">Last</span>
<asp:TextBox ID="txtLastName" runat="server" CssClass="textBoxMedium"></asp:TextBox>
</div>
<div class="container1">
<span class="span150Padded">First</span>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="textBoxMedium"></asp:TextBox>
</div>
The reason I am adding the rules dynamically is because I am using master pages so my fields are renamed. I couldn't use the <%=textbox.ClientID%> method because my validation is in a separate js file which is referenced and called from my aspx page, and a js file won't recongnize something like that. After alot of back and forth, I have found that the cleanest solution was to add the validation rules dynamically.
If you have another suggestion for me, please let me know.
When using the jQuery Validate plugin or any of its methods, the plugin will not target all elements if your selector targets more than one element.
Use the jQuery .each() method to target all elements.
$('[id$="txtLastName"]').each(function() {
$(this).rules('add', {
...
});
});
EDIT:
If you want to avoid using .each(), then target the one element.
$('#justOneField').rules('add', {
...
});
Per the documentation
$("#myform").validate({
ignore: ":hidden"
});
Am not able to assign the id value dynamically for an image...am referring this image javascript to display the up/down arrows accordingly...here is the code snippet...
<apex:variable var="count" value="{!1}"/>
<apex:image id="msn{!count}" url="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}" alt="Open-close" />
but i get the compilation error as "literal value is expected for id"...
can't we dynamically assign the value for id attribute ??
From Apex image,
<apex:image id="theImage" value="/img/myimage.gif" width="220" height="55"/>
The example above renders the following HTML:
<img id="theImage" src="/img/myimage.gif" width="220" height="55"/>
So change
<apex:image id="msn{!count}" url="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}" alt="Open-close" />
to
<img id="msn{!count}" src="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}" alt="Open-close" />
You are correct you can't assign an element id dynamically. it has to be a string literal. I have however used the class attribute to create custom ids that can be later used in javascript. I do this with jQuery and it's powerful selectors to select elements based on tag type and class.
The example below is just a sample but with jQuery you can get pretty creative.
<apex:variable var="count" value="{!1}"/>
<apex:image id="msn"
url="{!URLFOR($Resource.style_resources, 'images/up-arrow.gif')}"
alt="Open-close"
styleClass="msn{!count}" />
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"/>
<script>
jQuery.noConflict();
function doSomethingWithImg() {
try {
var imgElement = jQuery('.msn1');
/*Do what you need to do with the element*/
} catch (e) { /*Ignore Error*/ }
}
</script>
Here is the link to jQuery selectors: jQuery Selector Documentation