Programmatically setting column to editable

[donig]

I have a grid data model defined like this:

                var griddatamodel = kendo.data.Model.define({
                    id: "RequestId",
                    fields: {
                        Status: { type: "string", editable: false },
                        Priority: { type: "number", editable: true, validation: { min: 1, max: 9999 } }
                    }
                });

The datasource retrieves the data based on a few drop down lists. I have a function that returns an CanChangePriority Boolean based on the values of the drop down lists. I want to be able to make the Priority field editable depending on the CanChangePriority Boolean, and update the editable flag as the drop down selection is changed. Is there a way to do that?

Doni

[Alexander Popov]

Hello Doni,

Changing the editable option during run-time is not supported, however you could use another approach to achieve the same functionality. For example you could use the Grid's edit event handler to check which cell you are trying to edit and if the conditions are met - to close it. Here is an example that demonstrates the above functionality.

Regards,
Alexander Popov
Telerik

[Yishay]

Hi Alexander,

Is it still not supported to change column editable in a run time?
I'm using kendo grid and I want to allow edit a specific column only if other column has changed

thanks,
Yishay

[Georgi]

Hello Yishay, 

Thank for contacting us!

As of now, we are already supporting dynamically enabling/disabling of the editor of a cell/ row based on a certain result.

You can follow this link that will take you to our documentation web page where you will find more information about the implementation of this functionality. There, you will also find a runnable Demo, which demonstrates whether or not an editor will be created for a cell based on the result from the comparison of the cell's data with a specific value. 

Let me know, if you have any additional questions.

Best regards,

Georgi

Progress Telerik

[Yishay]

Hi Georgi,

this didnt help me so I'll try to explain my issue.

In my case I have 3 columns: City, StreetName ,HouseNumber
All three are dropdowns with multiple selection.
I want StreetName and HouseNumber columns to be editable only after you select a City.
which means StreetName and HouseNumber columns will be uneditable in the grid until you select a city.
In addition City column has a default value of 'Narnia' and only after you changed the selection from 'Narania' to a different city for example 'New Yorrk'  from the list ,the other columns will be available to select, same things if you change it back to 'Narnia' these columns will go back to be uneditable.

thanks
Yishay

[Georgi]

Hello Yishay, 

Thank you for the additional clarifications!

The dynamic enabling/disabling of the editor is feasible with certain modifications of the columns.editable property. 

For your convenience, I am sending you below a Dojo link with an example that showcases the implementation of such a functionality together with an explanation on how to achieve similar results.

Dojo

Untitled | Kendo UI Dojo (telerik.com).

Explanation

The example above demonstrates a grid, in which the value of the Category column is determined by the user with the help of a dropdown list.

The default value is Beverages and for this value the Product Name cannot be edited.

However, if the user changes the Category, the Product Name can be edited(the example works with incell editing). This behavior is achieved by adding the following code snippet to the column "ProductName": 

editable: function(dataItem){
                        return dataItem.Category.CategoryName !== "Beverages"; 
                      }

Let me know if this works for you.

Best regards,

Georgi

Progress Telerik

[Yishay]

Hi Georgi,

I changed to editable: "incell" ,and now when I change the default value it works, the problem is now  I don't have the 'delete' option.

[Georgi]

Hello Yishay, 

Thank you for the additional clarifications!

If I understand the problem correctly, you cannot see the delete button on the rows.

In order to solve this issue, you can utilize the columns.command configuration:

{ command: "destroy", title: " ", width: "150px" }

For your convenience, below you can find a runnable example with incell editing and an available delete option: 

Untitled | Kendo UI Dojo (telerik.com).

Let me know if this works for you.

Regards,

Georgi

Progress Telerik

[Yishay]

Hi Gorgi,

When I set editable: "incell" ,later in the code in column I'm able to set the required fields with 

{
    field: "OrganizationTypeCdName",
    title: names.OrganizationType,
    editable: function (dataItem) {
        return dataItem.AllocationTypCdName !== "None";
    }
},

From that part of code I can get the functionality I want --> make the Organization column editable only  if AllocationType is not 'None' .

My question is, if it's possible to get the same functionally using 'inline' instead of 'incell'?


Thanks,
Yishay

[Georgi]

Hello Yishay, 

Thank you for the screenshot provided!

You can achieve the desired functionality using inline editing mode instead of incell. In order to achieve this result, it is necessary to implement the edit event for the grid and also the select event for the DropDownList. 

For your convenience, I am sending you below a Dojo link with a runnable example together with a detailed explanation on how to achieve similar results: 

Dojo

Untitled | Kendo UI Dojo (telerik.com).

Explanation

First Step: Remove the editable configuration for the Product Name column, as it will interfere with the rest of the logic:

Second Step: Implement the grid's edit event. Inside the event, use the logic from the editable configuration from above to disable the editing of the Product Name fields which have a Category "Beverages". Then, target the DropDownList and use .bind() to attach the select event to the DropDownList: 

Third Step: Create the dropdownlist_select function, where the custom logic for enabling/disabling of the fields in the Product Name column will be implemented. Inside the function, use the item property and the text() method to get the currently selected category from the dropdown. Then, using if-statement disable/enable the Product Name fields depending on the value of their Category column:

Let me know if you have any further questions.

Regards,

Georgi

Progress Telerik

[Yishay]

Hi Georgi,

I did as you recommended and I'm able to get the cell light gray, but it's still clickable :

I still can edit that.

on the level code there are my changes:



when I inspect the element that's what I get :

of course I added dropdownlist_select function with the same logic of k-disabled.
I tried k-ng-disabled , k-disables, k-state-disabled and nothing worked. 

how can I make it not clickable/ editable ?

[Georgi]

Hello Yishay, 

Thank you for the additional details.

One possible solution to this issue would be to modify the 'disabled' attribute of the input box which is part of the combo box. You can use this link for further reference.

For your convenience,  I am attaching Dojo link that you can examine.

Dojo

Untitled | Kendo UI Dojo (telerik.com).

Explanation

First Step: Disable the dropdown for the combo box by adding the 'k-state-disabled' class to it. Then, target the input of the combo box and use the jQuery .attr() method to set its 'disabled' attribute to true in order to disable it:

Second Step: Based on the value of the Category field, enable/disable the editing of the combo box by either removing the 'k-state-disabled' class and setting the 'disabled' attribute to false (to enable editing) or adding the 'k-state-disabled' class and setting the 'disabled' attribute to true (to disable editing): 

I hope this works for you.

In case it does not, please modify the Dojo to showcase the exact issue and contact us back. This way we will be able to reproduce the problem and try to resolve it more accurately.

Regards,

Georgi

Progress Telerik

[Yishay]

Hi Georgi,

Using disabled I'm able to get the input textbox uneditable but, when I click on the dropdown arrow I  still can get the dropdown list:




In the inspect I added disable to all of the elements and still I can click on the arrow and get the data 



Maybe in your example can you try please to disable the 'category' dropdown based on the 'productName' . For example allow the user to select and click the 'category' element in the dropdown only when the 'productName' is not equal to 'chai' . In other words the opposite of the current example .

thanks

[Georgi Denchev]

Hello, Yishay,

I will step-in for my colleague while he is away.

I've modified the Dojo example to disable the Category DropDownList based on the value in the ProductName column.

https://dojo.telerik.com/@gdenchev/utOmOseF 

If you face any issues, please modify the provided Dojo example and send it back to us so we can examine it. We should be able to provide you with additional assistance and information after that.

Best Regards,

Georgi Denchev

[Alexander Popov]

Hi Doni,

Yes, you can use the currently edited cell index to get the name of the field it's bound to. For example:  

edit: function(e){
      var grid = this;
      var fieldName = grid.columns[e.container.index()].field;
}

Regards,
Alexander Popov
Telerik

[Samra]

This is very good. Though I am having trouble implementing other features, this one came out really helpful!