I have a simple grid that contains a column designated to allowing the user to browse to a directory using the default file chooser. This column is instantiated by the following command, and appears properly when the page is rendered:
(note: this grid has been isolated down to just the problem column. testData is just an array of a few rows of example data.)
As shown in the code, the input type of is "file," which defaults to a textbox/browse button that opens a file picker window. I decided to use this instead of writing one on my own. The menu button that generates a new row is created with this code:
When the button is clicked, a new row is successfully generated. All of the columns show up properly, but the FileName column shows up with a large white textbox instead of the gray box/browse button that is shown on the initial render. It also will not allow me to spam the new button, because in order for another new row to be generated, some sort of data has to be entered into the blank textbox (it can be a string, int, char, whatever). This data then disappears, and it defaults to the gray textbox/browse button after the new button is hit again.
Attached is a series of screenshots of me stepping through the UI. The screenshots show:
1) The column on the initial render
2) The column after "new" is hit once (showing the large blank textbox)
3) The column after hitting "new" again (without entering anything into the textbox)
4) The column after entering a string into the white textbox and then hitting "new" again. Note that this brings us back to image 1, only with a new viable row added.
Is there a way to alter my code to prevent the white text box from appearing? Perhaps I need to assign some sort of default value, or should I scrap this approach?
(note: this grid has been isolated down to just the problem column. testData is just an array of a few rows of example data.)
$("#grid").kendoGrid({
dataSource: {
data: testData,
pageSize: 10
},
groupable: false,
sortable: false,
pageable: {
refresh: true,
pageSizes: true
},
columns:
[
{
field: "FileName",
title: "File Name",
template: "<
input
id
=
'f'
,
type
=
'file'
/>"
}
]
});
<
div
id
=
"menuTest"
>
<
ul
id
=
"menu"
>
<
li
onclick
=
"javascript:$('#grid').data('kendoGrid').addRow()"
><
img
src
=
"Images/help_videos_16x16.png"
/>New</
li
>
</
ul
>
</
div
>
When the button is clicked, a new row is successfully generated. All of the columns show up properly, but the FileName column shows up with a large white textbox instead of the gray box/browse button that is shown on the initial render. It also will not allow me to spam the new button, because in order for another new row to be generated, some sort of data has to be entered into the blank textbox (it can be a string, int, char, whatever). This data then disappears, and it defaults to the gray textbox/browse button after the new button is hit again.
Attached is a series of screenshots of me stepping through the UI. The screenshots show:
1) The column on the initial render
2) The column after "new" is hit once (showing the large blank textbox)
3) The column after hitting "new" again (without entering anything into the textbox)
4) The column after entering a string into the white textbox and then hitting "new" again. Note that this brings us back to image 1, only with a new viable row added.
Is there a way to alter my code to prevent the white text box from appearing? Perhaps I need to assign some sort of default value, or should I scrap this approach?