My jqgrid contains multiple fields and I want to filter the grid. For example, assume my grid contains 'name' field and I want to filter the grid's data with name="aron". Now, I would like to instruct the user that saying you should enter only names in this field to filter the grid.
I am very new to jqGrid and need someone's help to move forward. I want to add a placeholder to the header row text fields on grids, as I can give some instruction to the user to enter the data for filtering. I want to make it generic, whenever I add a text field to my grid a generic placeholder(input hint) should be added to it. I am not sure how my jquery.jqGrid.min.js works and where to make the changes to achieve my requirement.
Can anyone please help me in this matter..??
Thanks in advance, Santosh Manne.
model.dataType = dataType;
if (dataType == 'datetime' || dataType == 'date') {
if (!model.formatter){
model.formatter = 'date';
}
formatColumns += '<Column><ColName>'+model.xmlmap+'</ColName><ColType>'+dataType+'</ColType></Column>';
if (!model.formatoptions) {
model.formatoptions = {
srcformat: 'SortableDateTime',
newformat: (dataType == 'date')?'Y-m-d':'Y-m-d H:i:s',
defaultValue: null
};
}
else {
if (!model.formatoptions.srcformat)
model.formatoptions.srcformat = 'SortableDateTime';
if (!model.formatoptions.newformat)
model.formatoptions.newformat = (dataType == 'date')?'Y-m-d':'Y-m-d H:i:s';
}
if (dataType == 'date') {
model.searchoptions.dataInit = function(el) {
$(el).datetimepicker({format: 'YYYY-MM-DD', pickDate:true, pickTime:false});
};
}
else {
model.searchoptions.dataInit = function(el) {
$(el).datetimepicker({format: 'YYYY-MM-DD HH:mm:ss', useSeconds:true, sideBySide:false});
};
}
model.width = 210;
}
moreover my jqgrid implementation would be like below.
<DataGrid>
<Columns>
<Column name="date" mapping="createdDate".../>
</Columns>
</DataGrid>
My jqgrid contains multiple fields and I want to filter the grid. For example, assume my grid contains 'name' field and I want to filter the grid's data with name="aron". Now, I would like to instruct the user that saying you should enter only names in this field to filter the grid.
I am very new to jqGrid and need someone's help to move forward. I want to add a placeholder to the header row text fields on grids, as I can give some instruction to the user to enter the data for filtering. I want to make it generic, whenever I add a text field to my grid a generic placeholder(input hint) should be added to it. I am not sure how my jquery.jqGrid.min.js works and where to make the changes to achieve my requirement.
Can anyone please help me in this matter..??
Thanks in advance, Santosh Manne.
model.dataType = dataType;
if (dataType == 'datetime' || dataType == 'date') {
if (!model.formatter){
model.formatter = 'date';
}
formatColumns += '<Column><ColName>'+model.xmlmap+'</ColName><ColType>'+dataType+'</ColType></Column>';
if (!model.formatoptions) {
model.formatoptions = {
srcformat: 'SortableDateTime',
newformat: (dataType == 'date')?'Y-m-d':'Y-m-d H:i:s',
defaultValue: null
};
}
else {
if (!model.formatoptions.srcformat)
model.formatoptions.srcformat = 'SortableDateTime';
if (!model.formatoptions.newformat)
model.formatoptions.newformat = (dataType == 'date')?'Y-m-d':'Y-m-d H:i:s';
}
if (dataType == 'date') {
model.searchoptions.dataInit = function(el) {
$(el).datetimepicker({format: 'YYYY-MM-DD', pickDate:true, pickTime:false});
};
}
else {
model.searchoptions.dataInit = function(el) {
$(el).datetimepicker({format: 'YYYY-MM-DD HH:mm:ss', useSeconds:true, sideBySide:false});
};
}
model.width = 210;
}
moreover my jqgrid implementation would be like below.
<DataGrid>
<Columns>
<Column name="date" mapping="createdDate".../>
</Columns>
</DataGrid>
- You know, there is a website? guriddo/demo/guriddojs ... And it has demos with code samples. At least show us you've tried something. – MarengoHue Commented Feb 18, 2016 at 6:11
- We have an overridden file named DataGrid.js for jquery.jqGrid.min.js, which gives support for xml tags. So, all my jqgrid code would be in xml format and internally it is converted to script by DataGrid.hs. Please find my code for a datagrid below. @MokonaModoki – santoshM Commented Feb 18, 2016 at 6:19
- @MokonaModoki <DataGrid> <Columns> <Column name="test" map="myMappingField" ../>... </Columns> </DataGrid> – santoshM Commented Feb 18, 2016 at 6:21
- If this xml extension is built internally in your team, why would anyone out there know how to use it? – MarengoHue Commented Feb 18, 2016 at 6:22
-
@santoshM: 1) You should post all information about the question *in the text of the question (click "edit" under the question and modify the text) 2) You sould post more details about what you do and what you need to implement. The XML fragment about
DataGridhave no information about your question. Which "generic placeholder(input hint)" you need at add and where? Sorry, but I still have no idea what you need to implement. Look here for the first information about jqGrid. – Oleg Commented Feb 18, 2016 at 6:37
3 Answers
Reset to default 4If you need to add placeholder='mm/dd/yyyy hh:mm' attribute to <input> element of the searching toolbar then you can use
searchoptions: {
attr: { placeholder: "mm/dd/yyyy hh:mm" }
}
see the demo https://jsfiddle/OlegKi/0v6vkx75/3/
If you know how to get the column names in jqgrid "loadplete",
add this code to it:
$("gs_YourColumnNamePropertyValue").attr("placeholder","YourText");
add as many columns you want.
In my case I am sending datetime as my dataType from xyz.jsp. The same is checked in jquery.jqGrid.min.js and added the placeholder to it.
if(k.dataType == 'datetime')
a("td:eq(1)", s).append("<input type='text' placeholder='mm/dd/yyyy hh:mm' style='width:100%;padding:0px;' name='" + (k.index || k.name) + "' id='gs_" + k.name + "' value='" + v + "'/>");
else
a("td:eq(1)", s).append("<input type='text' style='width:100%;padding:0px;' name='" + (k.index || k.name) + "' id='gs_" + k.name + "' value='" + v + "'/>");