Enable/Disable grid editing dynamically (on demand)

2 Answers 1086 Views
DENIS
Top achievements
Rank 1
DENIS asked on 18 Apr 2018, 11:58 AM

Hello there.

So what I'm trying to do is to disable/enable grid editing from Javascript. Here's the code done with MVC:

        @(Html.Kendo().Grid<DocumentGoodsReceiptFuel>()
                  .Name("fuelGrid")
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.MaterialString).Title("Material").Width(150);
                      columns.Bound(c => c.QuantityOrdered).Title("Quantity dispatched").Width(150);
                      columns.Bound(c => c.QuantityUnloaded).Title("Quantity unloaded").Width(150);

                  })
                  .Scrollable(a => a.Height("auto"))
                  .Filterable(filterable => filterable.Enabled(true))
                  .Pageable(pager => pager.Refresh(false))
                  .Sortable(sortable => sortable.Enabled(true)).AutoBind(false)
                  .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
                  .AllowCopy(true)
                  .Editable(editable => editable.Mode(GridEditMode.InCell))
                  .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Batch(false).PageSize(100)
                  .Model(model =>
                  {
                      model.Id(gridMainAlias => gridMainAlias.ID);
                      model.Field(gridMainAlias => gridMainAlias.MaterialString).Editable(false);
                      model.Field(gridMainAlias => gridMainAlias.QuantityOrdered).Editable(true);
                      model.Field(gridMainAlias => gridMainAlias.QuantityUnloaded).Editable(true);
                  }))
                    .Resizable(resize => resize.Columns(true))
                    .Mobile(MobileMode.Auto)
        )

I'd like to disable and enable the last two columns (or entire grid, both goes) from Javascript dynamically/on demand. 
I've tried this: $('#fuelGrid').data('kendoGrid').dataSource.options.schema.model.fields["QuantityUnloaded"].editable =false
but it doesn't work, it just sets the editable false for that column but it doesn't refresh the settings or something, so the change is not applied on the grid. What do you recommend in this scenario? Thanks in advance!

2 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 19 Apr 2018, 11:11 AM
Hi Denis,

In order to make the columns editable on specific condition I would recommend using the Editable() option. Check out the article below that illustrates how it can be used:


Note that this feature is relatively new and in order to take advantage of it you would need to use a recent release of the components. I would recommend upgrading to the latest version as it includes the most recent features and improvements. The current version is 2018.1.221. 


Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Peter
Top achievements
Rank 1
commented on 25 Mar 2019, 04:19 AM

Awesome.....
Sp
Top achievements
Rank 1
Veteran
commented on 17 Jun 2020, 03:32 PM

Hi Team,

 

I know its old thread , but i have requirement for custom editable feature there i need to pass a value to editalbe function . So is there any way to pass parameter to Javascript fuction . i know this function will take dataitem as default parameter instead i want to pass viewbag value to javascript editable fuction. 

 

Hope you understand my problem . waiting for your response.

 

Thanks & Regards,

Purnima.

Greg
Top achievements
Rank 1
commented on 26 Jun 2020, 03:08 AM

Hi Victor,

I would like to use the Editable function to post the name of the command. If the command is Edit, I would like to keep the field as read only. If the command is Add, then I would like to make it read/write. I think there is a similar question in this thread from Purnima that is very similar to what I would like to accomplish, but I am not sure how to actually pass the command value as the second parameter to the java script function. Could you please expand bit more on this?

columns.Bound(p => p.UnitPrice).Width(140).Editable("function(dataItem, additionalParam) { return otherFunction(dataItem, additionalParam); }");

What would the script and the call look like in my case?

Thank you!

GregB

Viktor Tachev
Telerik team
commented on 29 Jun 2020, 12:17 PM

Hello Greg,

 

As I understand your requirement you would like to enable editing only when a new record is created. In order to implement this behavior I recommend using the approach described in the following how-to article.

https://docs.telerik.com/kendo-ui/knowledge-base/grid-editable-readonly-edit-create

 

Regards,
Viktor Tachev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Sp
Top achievements
Rank 1
Veteran
commented on 02 Jul 2020, 08:51 AM

Hey Victor , 

The Approach which you have given worked  perfectly for me.

 

columns.Bound(p => p.UnitPrice).Width(140).Editable("function(dataItem, additionalParam) { return otherFunction(dataItem, additionalParam); }");


Thanks a lot for your support!!

 

Thanks & Regards,

Purnima.

 

 

Greg
Top achievements
Rank 1
commented on 02 Jul 2020, 12:37 PM

Thank you Viktor!
0
Viktor Tachev
Telerik team
answered on 19 Jun 2020, 02:50 PM

Hi Purnima,

 

If you would like to pass an additional value to the function you can use an approach that is similar to the one below:

columns.Bound(p => p.UnitPrice).Width(140).Editable("function(dataItem, additionalParam) { return otherFunction(dataItem, additionalParam); }");

 

Accessing a ViewBag value and using it in JavaScript can be done like this:

var content=@Html.Raw(Json.Encode(ViewBag.content));

 

Give the approach a try and let me know how it works for you.

 

Regards,
Viktor Tachev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
DENIS
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or