I have grid component which wraps kendo-grid. I need to programmatically add columns to it. I've figured out bound columns but I couldn't figure out button columns. The ColumnComponent has a template field but it's TemplateRef type. How can I accomplish this? The button column will be used for navigation.
Related
I'm using React. I've a page with a table. Once button is clicked, a detail form should display on the right side of the table. The table is set in column with grid-10, and needed to be take most of the page grid column. The detail form is set in column with grid-4.
It's not going to be reflected but here is the link to the playground code: https://codesandbox.io/s/inspiring-grothendieck-bkygv?file=/src/table.js
Any help (css, bootstrap,etc.) is much appreciated.
First of all I added bootstrap to your sandbox in order for the grid to work.
Secondly, based on the active's value, div needs to change class.
Check my sandbox
I have 2 different form engines that share a common over-driven "Question" directive with different input types (select, calendar, multi-line, etc) based on a question type and then I want to display it in one engine like:
QuestionName InputField
and another
QuestionName
InputField
The goal is to share code with minimum duplication. Is there a good way to setup the html so it can switch back and forth or do I just move the InputField into it's own directive that can be placed twice in the question directive and show/hide as appropriate.
Thanks,
Scott
I decided on just creating an inner directive for the field portion displayed twice on the question directive using ng-if based on if it should be vertical or horizontal set at the form level.
<tr><td>questionname <span ng-if="direction==='vertical'><br /><field-directive /></span></td>
I'm using the Kendo Grid and MVC to display detail data.
I have a Kendo grid that has a Hierarchal/Detail grid that is expandable. I need to Add title text to the column header of the main grid, where the image is located in the main grid.
From what I've read, I think I need to add the logic in the Main Grid's Databound event, beyond that, I'm a bit lost.
Column needing Title Text
I was able to resolve this by hooking up a databound event to the main grid:
.Events(e => e.DataBound("onDataBoundMain"))
Then I added this JQuery, which also included a fix to remove an extra   that was being inserted:
function onDataBoundMain() {
$(".k-hierarchy-cell.k-header").append("<span class='k-link'>Details</span>");
$('.k-hierarchy-cell.k-header').html(function(i,h){
return h.replace(/ /g,'');
});
}
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
I wanna create a table where I should hide some columns. Whenever I click on an arrow or some button The hidden columns should be display along with original columns in that table.
For example, I have 20 columns, I don't need show all the columns at the staring point of view. Suppose I want to display 5 columns in UI, renaming 15 should be hidden. Where can I put some arrow on right corner(in header line) of table to extend the table with remaining columns.
Is it possible with JSF with rich-faces or anything else.
Thank you in advance.
Take a look on this example on primefaces labs. It allows to dynamically add columns to a datatable. I am sure you can tweak it to get the behaviour you are looking for.
Use a <rich:dataTable. Set the rendered property of the columns which should be initially hidden by using a boolean property in your class.
<rich:dataTable value="" var="v" id="tbl">
<rich:column>Always visible column 1</rich:column>
<rich:column rendered="#{del.renderColumn}">Visible on demand</rich:column>
<rich:column>Always visible column 2</rich:column>
<rich:column>Always visible column 3</rich:column>
</rich:dataTable>
Use an <a4j:commandButton and set the property renderColumn as true at button action and reRender the table.
<a4j:commandButton value="Show" action="#{del.renderHiddenColumn()}" reRender="tbl"/>