This is a migrated thread and some comments may be shown as answers.

Filepicker defaulting to blank textbox when a new row is added to grid

1 Answer 223 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rich
Top achievements
Rank 1
Rich asked on 18 Jul 2013, 07:27 PM
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.)
$("#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' />"
       }
    ]
});
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:
<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?

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 22 Jul 2013, 02:02 PM
Hi Rich,

 
Current behavior is expected with the current configuration - the "FileName" column have defined template, however as the column is bound to editable  field from the model when you add new record the template is replaced with default editor. In current scenario I would suggest to create template column which to contain the "file chooser" - please check the example below:


Kind Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Rich
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or