I need to fix a complaint accessibility issue, that is missing form label, but as we use kendo, I was wondering if anybody knows if is possible to do it by kendo configuration.
The component in question is a combobox.
I did a deep search and couldn't find anything.
What I did to fix the accessibility error in the accessibility report was use some jquery to include two properties: title and aria-label.
$({selector}).kendoComboBox({ placeholder: "Search ...",
...
var combobox = $("#header-search .k-input").eq(0);
combobox.attr("title", "Search ...");
combobox.attr("aria-label", "Search ...");
I've been used this tool to identify the problem: wave-evaluation-tool
Related
I'm using free jqgrid and implemented column chooser to show hide columns, the functionality is working as expected but the popup that shows up doesn't have a proper rendering of UI.
I tried searching a lot and went through the documentation of free jqgrid but I don't know what am I doing wrong.
I was able to reproduce the error in demo in below url.
If any one has faced similar issue please help. Note I am using bootstrap theme.
$("#sampleGrid").navButtonAdd('#sampleGridPager',{
caption: "",
title: "Choose Columns",
buttonicon: "fa fa-table",
onClickButton: function () {
$("#sampleGrid").jqGrid('columnChooser');
}
});
https://jsfiddle.net/1vk5ku2y/2/
One needs to add jQuery UI CSS to the demo because it's required for columnChooser. You should add some jQuery UI theme, which corresponds Bootsrap CSS theme. For example
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css
After that one get already much better results https://jsfiddle.net/OlegKi/1vk5ku2y/4/. You need to add minor CSS fixes to have the final solution.
I´ve seen other posts regarding to checkboxes on the grid, but i didn´t find anything related to my problem, so, i have some fields on my grid that i want to use as checkboxes, and i have declared them like this:
fields:
{
cloud: {type: "boolean"},
columns:
[
{ field:"cloud",title:"Cloud",width:"1.5%",template:"<input type='checkbox' name='cloud' data-bind='#= cloud#' checked='#= cloud #' disabled='disabled'></input>",headerAttributes:{style:"font-size: 11px;text-align:center;"},attributes:{style:"text-align:center;"}},
I´m getting data from my server so my goal is for the checkbox to be dynamic. When i´m inserting, everything works as expected, if i check the checkbox, in my server appears 1 (TRUE) and 0(FALSE).
My first problem is, ALL of my other fields appear check too which is wrong.
My second problem is, when i want to edit, ALL the checkboxes disapear, not the box itself but the check part.
My third problem is, if i simply want to cancel, it throws me an error saying:"Uncaught SyntaxError: Unexpected number"
Does anyone experience the same type of problems? any help would be most appreciated.
Regards.
I find this strange but I am unable to get any output from the "DOJO" events "onHide()" and "onShow()" for the extension library dialog box. I simply want to access a viewScope variable and set some values to it in the "onHide()" event of the dialog box, but that doesn't seem to work. Even a simple print() statement is not getting executed in the "onHide()" or "onShow()" events. Are there any settings that need to be changed or additional setting that need to be added for these events to work? Am I missing something? Here is the code:
<xp:eventHandler event="onHide" submit="true" refreshMode="complete">
<xe:this.action><![CDATA[#{javascript:
//Pass the ratings to the parent window
var glVect = viewScope.get("Goal_Rate_data");
print(glVect[0][0] + "###" + glVect[0][1] + "###" + glVect[0][2]);
glVect.get(0).setElementAt("testing assignment",1);
}]]></xe:this.action>
</xp:eventHandler>`
You're right that they are Dojo events, so only CSJS. From my chapter of the XPages Extension Library book - "The onShow and onHide events trigger Client-Side JavaScript before the dialog is shown or before the dialog is closed." I'm afraid Server-side Javascript code won't work there.
You can fire partial refreshes on hiding. That's some advanced functionality that the XPages team provided for us, providing a second parameter for the CSJS hide method and the only parameter of the SSJS hide method. All that basically does is call the Dojo client-side Javascript hide method and trigger XSP.partialRefreshGet() on the area you want to refresh.
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I've been working on a custom field, which contains a list.
I have to be able to edit the selected item on the list in a richtext editor. (this is the only missing part).
I've read the topic on opening from c# code Opening Rich Text Editor in custom field of Sitecore Content Editor .
This works nice for the "add" button, since i have to open the RTE empty(with default text...), but not for the Edit button.
My aproaches are:
Somehow in the Edit button's message field list:edit(id=$Target) pass the selected index (like list:edit(id=$Target,index=$SelectedIndex), but i don't know how to populate $SelectedIndex
Somehow in the overridden HandleMessage method get the list's selected index. I'm able to get the selected value Sitecore.Context.ClientPage.ClientRequest.Form[ID of list], but thats alone not much of a help, since i won't be able to decide which one to edit if two listitem equals.
Do the richtext editor opening and handling fully in javascript. As i saw at some script in content editor, i tried to do that, but i can't understand it clearly:
richtext editor url:
var page = "/sitecore/shell/Controls/Rich Text Editor/EditorPage.aspx";
some params :
var params = "?da=core&id&ed=" + id + "&vs=1&la=en&fld=" + id + "&so&di=0&hdl=H14074466&us=sitecore%5cadmin&mo";
and the part where i'm not sure:
var result = scForm.browser.showModalDialog(page + params, new Array(window), "dialogHeight:650px; dialogWidth:900px;");
This way the RTE opens as expected (i guess i could get the selected index from javascript and pass it as a parameter later). However when i click ok, i get exception from EditorPage.js saveRichText function: Cannot read property 'ownerDocument' of null. Am i missing some parameter?
Either of the three aproaches is fine for me(also i'm open for new better ones) as soon as i'm able to do it.
Thanks in advance!
Tamas
I was able to enter some javascript into the message:
list:Edit(id=$Target,index='+document.getElementById(ID of the select using $Target ).selectedIndex+')
this way i got the index in HandleMessage.
I'm waiting for better solutions now.