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

Grid editing issue with template columns

13 Answers 1886 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Manoj Kapoor
Top achievements
Rank 2
Manoj Kapoor asked on 05 Mar 2012, 08:26 AM
Hi There,

I have used a Kendo Grid with its cell editing feature enabled. I am able to successfully bind the grid using the data source & cell edit for non-template columns too works fine.

The attache zip file contains the code for the used .aspx page & also the snapshots of the error I have.

Snapshot 1 shows my Kendo Grid where first 2 columns are Template Columns (Check box & Hyperlink)
Editing on non-template columns is illustrated in Snapshot 2
While editing template columns, on cell click it moves into editable mode, but the text associated to the hyperlink disappears.  Refer Snapshot 3 for details

Could you provide your valuable inputs for?
  • Editing Template Column
  • Adding a Select/Deselect all checkbox on the header row for the template column containing check boxes
Thanks & Regards,
Manoj Kapoor

13 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 05 Mar 2012, 11:02 AM
Hi,

You should set the template column's field option to point to a field which is marked as editable false:

dataSource: {
    schema: {
        model: {
            id: 'Id',
            fields: {
                select: {                    
                    editable: false
                },
                FirstName: {
                    editable: false
                },
                /*..*/
            }
        }
    }
}


/*....*/
columns: [{
    field: "select",
    template: '#= kendo.toString("<input type=\'checkbox\' id=\'select\' />") #'
},
{
    template: '<a href="javascript:OpenCRUD(\'Abcd.aspx?Id=#=Id#\')">#=FirstName#</a>',
    field: "FirstName"
},
/*..*/
]

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Manoj Kapoor
Top achievements
Rank 2
answered on 05 Mar 2012, 11:10 AM
Hi Rosen,

Thanks for the promot reply on the posted queries.

As per the requirements, I need to have even the template field editable. On cell click it would display the hyperlink text & on lost focus shall retain the link but change the displayed text. So setting editable: false would not help me meeting the requirements.

And what about the other requrement that I have mentioned i.e. "Adding a Select/Deselect all checkbox on the header row for the template column containing check boxes" would not help me meeting the requirements.

Thanks & Regards,
Manoj Kapoor
0
Rosen
Telerik team
answered on 06 Mar 2012, 01:27 PM
Hello,

If you leave the field editable option to true and keep the field setting on the column, the default editor will be shown when cell is clicked.

The header checkbox is not supported out-of-the-box. Therefore, you should use custom javascript to handle this. For example:

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Oscar
Top achievements
Rank 1
answered on 06 Mar 2012, 07:06 PM
Hello Rosen,
If you change the paseSize to 5 and then check some checkboxes of the first page, when you go to page 2 and come back to 1,  the checked checkboxes of the first page are shown unchecked. How can I keep getting these values?

Regards,
Oscar.
0
Rosen
Telerik team
answered on 07 Mar 2012, 02:58 PM
Hello Oscar,

In the described scenario you should manually persist the selected(checked) items. Then  Grid dataBound event can be used to iterate over the rows and restore the selection.

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Oscar
Top achievements
Rank 1
answered on 07 Mar 2012, 04:42 PM
Hello Rosen,
Would you please add this functionallity in your fiddle sample?
Kind regards,
Oscar.
0
Rosen
Telerik team
answered on 08 Mar 2012, 10:48 AM
Hello Oscar,

Although providing custom implementation is outside of the scope of our support, I have modified the jsFiddle to demonstrate a possible implementation:

Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Oscar
Top achievements
Rank 1
answered on 08 Mar 2012, 12:25 PM
Hello Rosen,
Thank you very much for your help.
Kind regards,
Oscar.
0
Kakasaheb
Top achievements
Rank 1
answered on 15 Mar 2012, 12:02 PM
Hello Rosen,
It was very helpful, thanks alot.
0
James
Top achievements
Rank 1
answered on 11 Apr 2012, 03:21 PM
Just copied exact same code on my machine and grid still not persisting the checkbox values. Anyone knows why?

James
0
Alex Rogers
Top achievements
Rank 1
answered on 20 Jun 2012, 08:23 PM
Extremely helpful.  Thanks
0
Vesselin Obreshkov
Top achievements
Rank 2
answered on 13 Dec 2012, 09:54 PM
I have a similar situation, however the proposed solution does not work for my scenario.

I have a grid with several ID columns (OfferID, SomethingID, etc) all of which need to be editable and all of which need to have a template since having a bunch of meaningless numbers showing on the grid is just... meaningless. Needless to say, I'm having the same issue after inserting a new record, all template columns are either empty or have a numeric value. Hitting the refresh button at the bottom of the grid obviously fixes the rendering as it reads and binds itself all over. 

The proposed solution to not define templates for editable items does not work for me. A simple refresh/rebind of the grid after an insert would do the trick (as sub-optimal of a solution as it might be), however, the grid does not have an event that I can hook into after an Update or Insert that I can trigger a grid.dataSource.read() to force the grid to read the data again from the server and re-paint itself. 

Do you guys have any solution for a situation where you need to edit larger objects with lots of ID fields that need to show their corresponding string values (column: FieldID, template: FIeldName, etc) when viewed, however, the actual column needs to be bound to the numeric/ID fields so when you submit a create or update request to the server, it sends the numeric values needed to create/update the object. 

Any help would be greatly appreciated. Even some ugly hack would work at this point as I've all but given up on trying to do CRUD operations inside grids... 
0
Marcin Butlak
Top achievements
Rank 2
answered on 14 Dec 2012, 09:15 AM
Hi Vesselin,
Have you tried to use the scenario showed in the demo http://demos.kendoui.com/web/grid/editing-custom.html. This is an example of using a custom editor but it also shows how to bind the ID with the Value data and display them correctly in the grid.
Tags
Grid
Asked by
Manoj Kapoor
Top achievements
Rank 2
Answers by
Rosen
Telerik team
Manoj Kapoor
Top achievements
Rank 2
Oscar
Top achievements
Rank 1
Kakasaheb
Top achievements
Rank 1
James
Top achievements
Rank 1
Alex Rogers
Top achievements
Rank 1
Vesselin Obreshkov
Top achievements
Rank 2
Marcin Butlak
Top achievements
Rank 2
Share this question
or