I want to be able to sort my column based on ascending or descending numbers. I don't totally understand the way to do this. The online documentation shows that a Menu must be added to the table, but how does the menu know to affect which column.
This is the current way I have my BluePrintJS table implemented. I want to make the values sortable ascending or descending for any column
<Table enableFocusedCell="true" numRows=10 class="bp3-html-table bp3-table-resize-horizontal">
<Column
columnHeaderCellRenderer={() => (
<ColumnHeaderCell name="Name" />
)}
cellRenderer={i => (array.data[i] ? (<Cell>{array.data[i].name}</Cell>)
: (<Cell />))
}
/>
<Column
columnHeaderCellRenderer={() => (
<ColumnHeaderCell name="Ins" />
)}
cellRenderer={i => (array.data[i] ? (<Cell>{array.data[i].ins}</Cell>
) : (<Cell />))
}
/>
</Table>
Related
Multiselect Drop Down of Color and Size in Dynamic Table with name attribute
In My Form I have Dynamic Table, Having Multi Select Dropdowns with same names color_id[] and size_id[] in each row. I am Not Getting How to save the multi selected values as comma separated values in each row in database. Here I have tried to save in database, but not working.
HTML CODE:
<table><tbody><td><select name="color_id[]" class="select2" id="color_id" style="width:200px; height:100px;" required multiple></select></td><td> <select name="size_id[]" class="select2" id="size_id" style="width:200px; height:100px;" required multiple> </select></td></tbody></table>
Laravel Save Code in Controller:
$class_ids = $request->input('class_ids');
for($x=0; $x<count($class_ids); $x++) {
# code...
$color_ids = implode(',', $request->color_id[$x]);
$size_ids = implode(',', $request->size_id[$x]);
$data3[]=array(
'bom_code'=>$TrNo,
'bom_date'=>$request->bom_date,
'cost_type_id'=>$request->cost_type_id,
'Ac_code'=>$request->Ac_code,
'season_id'=>$request->season_id,
'currency_id'=>$request->currency_id,
'item_code' => $request->item_codes[$x],
'class_id' => $request->class_ids[$x],
'description' => $request->descriptions[$x],
'color_id' => $color_ids,
'size_array' => $size_ids,
'consumption' => $request->consumptions[$x],
'unit_id'=> $request->unit_ids[$x],
'rate_per_unit' => $request->rate_per_units[$x],
'wastage' => $request->wastages[$x],
'bom_qty' => $request->bom_qtys[$x],
'total_amount' => $request->total_amounts[$x],
);
}
BOMSewingTrimsDetailModel::insert($data3);
I have taken two hidden input box having name color_arrays[] and size_arrays[] in every row in the same columns color and size. I wrote below java script function to get comma separated values from multi-select drop-down of color an size. and i save hidden input box values to database.
$(document).on('change', 'select[name^="color_id[]"],select[name^="size_id[]"]', function(){CalculateQtyRowPros2($(this).closest("tr"));});
function CalculateQtyRowPros2(row){
var color_id=row.find('select[name^="color_id[]"]').val().join(",");
var size_id=row.find('select[name^="size_id[]"]').val().join(",");
row.find('input[name^="color_arrays[]"]').val(color_id);
row.find('input[name^="size_arrays[]"]').val(size_id);}
It worked for me.
I want to restrict users to only upload images of certain formats. For this, I want to pass multiple file types in the accept prop of Form.File. I can only find examples with one file type only. Below is my code so far:
<InputGroup >
<Form.Group>
<Form.File
onChange={(e) => setGamePhoto(e.target.files[0])}
label="Upload The End-Game Photo"
accept=".png"
/>
</Form.Group>
</InputGroup>
I want to pass multiple file types like png, jpg, jpeg, web etc
You can insert it in the form of a comma , separated list. Try this:
<InputGroup >
<Form.Group>
<Form.File
onChange={(e) => setGamePhoto(e.target.files[0])}
label="Upload The End-Game Photo"
accept=".png,.jpg,.jpeg,.webp"
/>
</Form.Group>
</InputGroup>
I have a React application using redux as state manager. In this application we are deciding to use Kendo Ui grids. The first test is Ok but we noticed that the columns are totally wrong. We define only 5 Columns to be displayed in the table but we noticed that all the columns from the json object get displayed. For example in the render method I have this code:
render() {
return (
<div>
<Grid
style={{ height: '400px' }}
data={this.state.gridData}
>
<Column field="ProductID" title="ID" width="40px" />
<Column field="ProductName" title="Name" width="250px" />
<Column field="Category.CategoryName" title="CategoryName" />
<Column field="UnitPrice" title="Price" width="80px" />
<Column field="UnitsInStock" title="In stock" width="80px" />
</Grid>
</div>
);
}
which should show only:
ID | Name | CategoryName | Price | In stock
but what it renders are those headers:
ProductID | ProductName | SupplierID | CategoryID | UnitPrice | UnitsInStock
which are the from the json object directly:
"ProductID " : 1,
"ProductName" : "Chai",
"SupplierID" : 1,
"CategoryID" : 1,
"UnitPrice" : 18.0000,
"UnitsInStock" : 39
In other words, no matter which columns I define (as <Column /> tag), the grid shows always the json field as column headers.
Following libs are imported:
import { Grid, GridColumn as Column, GridCell } from '#progress/kendo-react-grid';
I'm using exactly the exmaple from this page:
https://www.telerik.com/kendo-react-ui/components/grid/
There is no error in the console, so it is hard to find whats going on.
Any idea?
Update:
I added this console.log statement and i see that the columns are empty:
constructor(props: IProps) {
super(props);
this.state = { producuts: [{ ProductID: 'Cindy', ProductName: 'Jones', UnitPrice: 'cindy.jones#telerik.com' }]
};
this.grid = null;
}
render() {
return (
<div>
<Grid
data={this.state.producuts}
reorderable={true}
ref={(g) => { this.grid = g; }}
>
<GridColumn field="ProductID" title="ID" />
<GridColumn field="ProductName" title="Name" />
</Grid>
<button onClick={() => {
console.log(this.grid);
console.log(JSON.stringify(this.grid.columns));
}}>
log current properties into browser console.
</button>
</div>
);
}
This line console.log(JSON.stringify(this.grid.columns)) has always empty array result []
Although the headers should be:
ID | Name
but they appear like this:
I recently had the same problem. We are using 'react-hot-loader' which leads to your described error.
In the source code of the grid is a type comparison:
this.initColumns(children.filter(function (child) { return child && child.type === GridColumn; }));
When using react-hot-loader a Column is not of type GridColumn, but of type Proxycomponent. So the type check fails and the grid renders the default columns.
Workaround:
reactHotLoader.disableProxyCreation = true;
var grid = (<KendoGrid data={ { data: this.state.Products, total: 1} }
pageable={true} >
<KendoColumn field="ProductName" title="Product Name" />
<KendoColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="120px" />
<KendoColumn field="UnitsInStock" title="Units In Stock" width="120px" />
<KendoColumn field="Discontinued" width="120px" />
</KendoGrid>);
reactHotLoader.disableProxyCreation = false;
Disabling the proxy creations solves the problem, but this workaround is quite dirty.
We disabled react-hot-loader in our project to solve this issue.
I'm trying to have some html like this:
<input name="list_item[0][name]" />
<input name="list_item[1][name]" />
<input name="list_item[2][name]" />
When I view the raw source of my document, I see these correctly. But when I do inspect element in chrome or firefox, the numbers are incrementing by one! So I see:
<input name="list_item[1][name]" />
<input name="list_item[2][name]" />
<input name="list_item[3][name]" />
And when I inspect the submitted data, the keys start at 1, not 0 which is causing my code to misbehave:
'list_item' =>
array
1 =>
array
'name' => string 'title 1' (length=7)
2 =>
array
'name' => string 'title 2' (length=7)
3 =>
array
'name' => string '' (length=0)
Why is this happening? O_o
I don't know what exactly caused that, but seems like it was some js ;-)
I would like a form containing criteria fields. These criteria can be of type "affaire" or "suite". For this choice, I use a dropdownlist (see screenshot below). Based on this type, I would like to display only specific criteria fields.
For the type "affaire", I have the following criteria:
Statut affaire
Libellé affaire
Numéro d'affaire
Titre de l'affaire
Note de l'affaire
For the type "suite", I have the following criteria:
Statut suite
Libellé suite
Numéro de suite
Titre de la suite
Note de la suite
At this moment, I only display "affaire" criteria fields in my form. Something like this:
#using (Html.BeginForm("SearchAffaires", "Search", FormMethod.Post)) {
#Html.LabelFor(m => Model.SearchType)
#Html.DropDownListFor(m => Model.SearchType, Model.Type)
#Html.LabelFor(m => Model.SearchCriteriaAffaire.IdAffaire)
#Html.TextBoxFor(m => Model.SearchCriteriaAffaire.IdAffaire)
#Html.LabelFor(m => Model.SearchCriteriaAffaire.IdStatus)
#Html.DropDownListFor(m => Model.SearchCriteriaAffaire.IdStatus, Model.Status)
#Html.LabelFor(m => Model.SearchCriteriaAffaire.Title)
#Html.TextBoxFor(m => Model.SearchCriteriaAffaire.Title)
<input type="submit" id="buttonSubmit" value="Submit" />
<input type="button" id="buttonClear" value="Clear" />
}
The first DropDownListFor(...Model.Type) is used to distinguish the search of type "affaire" or "suite". I would like to be able to hide "affaire" criteria fields and show "suite" criteria fields based on the value of this dropdown. What is the best way to achieve this?
Thanks.
I'd probably just use a client-side event handler and toggle the elements' visibility..
$('#searchType').change(function() {
var value = $('#searchType option:selected').val();
if (value === 'affaire') {
$('.affaireCriteria').show();
$('.suiteCriteria').hide();
}
else {
$('.affaireCriteria').hide();
$('.suiteCriteria').show();
}
});
Just sample code.. there's plenty more you can do to make this more elegant.