How can I do following the right way:
Assign column template to the column in GridColumnSettings
What I mean:
#Html.Telerik().Grid. .. .Columns(c => c.Bound(t.Name).Template(tp => Html.ActionLink...
works fine
but, when I create ColumnSetting in codebehind, and pass it to view,
#Html.Telerik().Grid ... Columns(c => c.LoadSettings(Model.Columns))
That I've notice that there are not Template property in GridColumnSetting class
So, how can I assign Template to the column, if column setting is passed from server?
This is not supported because you cannot access the Response Write method of the View in the Controller - it is available only in the View (this Method is used internally by the Grid to write its output). This is the reason why there is not Template method in the Grid column settings.
Related
I have a kendo grid "GridProjects" (See attachement: Part HTML). At the initialization, the column set (name, field, ...) and the sorted column list are retrieved from my BD on the gridHelperService.
To update the column set, I used the attribute "k-columns" on my HTML. However, I couldn't do the same thing for the sorted columns since the sort proprety is inside datasource.
I Know that I can use k-data-source, but in my case, it doesn't work because my dataSource transport and filter is binded with some variables on the controller.
Every thing is explained at this attachement: Projects Kendo Grid
I can't figure out how to fix this, if anyone can give me a hit, I'll appreciate.
Thanks!
I don't know much about your setup but based upon the image. Here is what you can try where you want the sort to happen. I don't know the columns your setup has but if you have firstName I would do sort like this.
$scope.GridProjects.dataSource.sort({field: "FirstName", dir: "asc"});
Inside the $scope you can get access to the kendo-grid="GridProjects" and then its dataSource and then sort it.
My problem was that my settings (columns) are loaded after my grid was created.
I changed my code to created the grid after my settings are loaded. To do, I called my function that creates the grid on my callback function (onSuccess).
I am trying to set up a reusable custom control with a combobox to be used with Bootstrap. The custom control has already all the divs, styles etc. that are needed for Bootstrap.
Now, I added a Property Definition (type: string, Allow multiple instances), so that when you use the custom control on any form, you can add selectable values to the combobox:
As a values property for the combobox, I added a computed item with the following JavaScript:
compositeData.listValues
When I use the custom control I can add values individually, one instance for one selectable value and it does work great:
However, when I compute the value to, lets say, get a list of values from a keyword document or view column:
the combobox value list looks like this:
How can I pass on a list of values thru property definition to the combobox? Is it possible at all?
UPDATE: Is there a way to loop thru the instances of a property definition? That way I could check if the current instance is a single text value or an array, put a list of all the values together and return it as a value list.
Thank you very much for your help!
In the Custom Control properties, next to Type, leave it as String and then click on the folder icon. In there you can choose complex types.
In there you can choose view column, among a vast array of choices.
UPDATE: David Leedy pointed out a caveat in regards to using comma as a separator for #Implode/#Explode. This could cause issues, if any of your values contains a comma. So, I amended my answer to account for that:
First of all, I'd like to thank everyone who took a look at this question and / or responded to it.
I had an epiphany this morning and found a solution. Might not be very elegant but it works.
As we are going to use #Implode/#Explode to build the value list for the combobox, we need to add another property definition to the reusable custom control. This property will be used to pass on the information, how the computed value list will be separated:
When I add values to the custom properties, the computed value for getting the list of values from a keyword document should look like this:
var oView:NotesView = database.getView('$vwSYSLookupKeywords');
var oDocument:NotesDocument = oView.getDocumentByKey('.DBProfile', true);
#Implode(oDocument.getItemValue('iTxtTest'),';')
As you can see, in this example I use ";" to implode the list.
This is now my list of Custom Properties:
And this is the markup for the whole custom control where I use the reusable custom control:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:ccLegend
listSeparator=";">
<xc:this.listValues>
<xp:value>Test 1</xp:value>
<xp:value>Test 2</xp:value>
<xp:value>#{javascript:var oView:NotesView =
database.getView('$vwSYSLookupKeywords'); var
oDocument:NotesDocument = oView.getDocumentByKey('.DBProfile',
true); #Implode(oDocument.getItemValue('iTxtTest'),';')}</xp:value>
</xc:this.listValues>
</xc:ccLegend>
</xp:view>
If I now use the following in my computed value list for the combo box:
var sSeparator = compositeData.listSeparator;
#Explode(#Implode(compositeData.listValues, sSeparator), sSeparator);
the values are properly displayed in the combobox:
This does also work with #DBColumn and #DBLookup!
If you have a better solution, please do not hesitate to post it here.
Did you try to set the property to object instead of string. That should allow you pass an array to the custom control with imploding and exploding it.
I'm using a property grid with editors set in sourceConfig. I want only some rows to be editable and not all. Returning false in beforeedit disables all. The reason is, I have a button in a grid. When I click the button, the grid turns to a textfield! Any way to do this?
The beforeedit event should provide you with the editor and the editing context. Lets say your callback function looks like this:
function(editor,context) { ... }
Using the context you will get the record which get edited by accessing context.record while the editor can provide you with the editor form from where you have access to all rendered fields within that form. To get the form you have to get the editor first and after that you can fetch the form
var form = editor.getEditor().getForm()
This way you can be sure that the editor has been set up. To get a field within that form simply call
form.findField('fieldname') // fieldname is the dataIndex of the column
You can now do nearly anything based on your conditions.
In addition the record is also loaded into this form an can be accessed by calling form.getRecord()
I'm actually not sure if this is possible, but I will ask it anyway. I have a group of accordion controls, and within the content body of each I need to display a grid panel. The grid panel needs to have a click event attached to it. I have tried simply creating the grid panel and setting the html property of the accordion to it, but this produces no content.
Is there somehow I can achieve the above?
You cannot have html content (inserted by the property) along with any other content. If you add any item the html property value will not set/overriden. But for sure you can place anything you want into one accordion panel. Even a grid. But for that case, and based on the last question, I would recommend you to reference the view into the grid. You may do this simply by using a ComponentQuery
The click events can be applied by using the control function of the controller.
For your basic understanding:
In ExtJS you seldom use plain html code. In most scenarios you use any sort of component. All is nested within the items-array or dockedItem-array. Items within these arrays get also processed by the layout system.
Some Query examples applicable to the control function
In the following this refers to the controller itself.
You know the Id of the grid (normally you didn't do this). Id's are marke by a starting #
control({'#yourId': {itemclick: this.onItemclick }});
You know the xtype and that there is only one instance of this type. You can also describe a path by using spaces between the xtypes.
control({'grid': {itemclick: this.onItemclick }});
You have set a custom property to grid (you can refer any property this way). This one is fully compatible the the one above. I recommend this one in your case
control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});
This are just some ways to use ComponentQueries, there are more. For a more detailed explanation you should refer the sencha API for ComponentQuery
Also note that every component implements the up() and down() methods which also support ComponentQueries.
I forgot to mention: For a control the query strictly need to return just one result (only the first one will be taken) a ComponentQuery on the other hand can return multiple results.
This is perfectly possible but the accordion's body is not the place to put that in. You'll need to add it to the items: [] array of the accodion. The body (or html) only accepts html.
Example:
http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html
this one has a grid within it.
I have a requirement to create a custom form field that is basically an extjs grid. The user should be able to click a result in the grid. This clicked result should then become the fields value. Also, this field needs to extend Ext.form.field. Here's what I got:
Ext.define('MyApp.field.Grid', {
alias: 'widget.GriedField',
extend: 'Ext.form.field.Base',
I'm a lot of confused on how to add a grid to form field base. Looks like form field base's template expects HTML. How do I get it accept a component?
If you just need to select a value from a list of items. Why not use a combobox?
If you need to select multiple items. There is an example of how to use the MultiSelect ux component in the documentation examples.
http://docs.sencha.com/ext-js/4-1/#!/example/multiselect/multiselect-demo.html
If you really must use a grid. Then I wouldn't bother with trying to create a field type and cause yourself grief.
Add a listener to your grids selectionchange event and update a hidden field in your form with the value you want from the grid. Job done.
I ended up putting the grid on a form indirectly through creation of dependencies on my model.
My model has master-detail, which the detail is just a store reference. I found that using associations did not work for me.
So, in adding a field to a form, I have something that manages changed events for the model (master record) and the detail stores.