1. Home
  2. Forum
  3. Vue
  4. Issues regarding data grid

Issues regarding data grid

Hello,

I found some issues while working with the grid and I need your assistance:
1. Child grid - doesn't update cell value when column value is "document.name"
- if i check the actionComplete event, the values from "data" and "rowData" are still old, exact to previousData
 - on actionComplete the data is still old but the data from the API request is new
- Instead of having the column document.name I tried document_id, which is a property on the same level and used valueAccessor to display the document name, but same issue

2. How can i set default value for a column? valueAccessor?
3. I have created a button on the toolbar to Enable/Disable html enconding, which changes a variable. When this variable changes, the whole grid is refreshed. The variable is used to toggle html encoding: :disableHtmlEncode="!showHtml"
4. How can i disable the drag and drop functionality of the edit dialog?
5. Now I have two buttons, Expand and Collapse. Can i merge this buttons into one to have Expand when collapsed and vice-versa?
6. When using cache and trying to edit/add/delete a record the grid doesn't update. This is the intended functionality? If so, is not stated in the documentation

*The data source is a custom adaptor which works file to manipulate data. 


5 Replies
TS Thiyagu Subramani Syncfusion Team August 14, 2020 01:26 PM UTC

Hi Francois, 

Thanks for contacting Syncfusion forum. 
 
Query- 1 : Child grid - doesn't update cell value when column value is "document.name"? 
 
Based on your shared information we suspect that your reported issue may occurs in while missing to define primary key column in child grid. Primary key column must be specified using columns.isPrimaryKey property when performing crud operation.  please refer to the below reference link. 
 
 
Note : Based on PrimaryKey column value only CRUD operation in Grid will take place. So, Kindly define the IsPrimaryKey property to Grid Column whose value is unique. 
 
Query – 2:  How can i set default value for a column? valueAccessor? 
 
We can achieve your requirement using our default property of defaultValue (used to set default value automatically while adding new record in column level for required column. Please refer to the below code and reference links. 

{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', defaultValue: 10001, width: 120 }, 

  
By default valueAccessor is used to access/manipulate the value of display data. You can achieve custom value formatting by using valueAccessor.  

For information about valueAccessor, please refer to the below links. 



Query – 3 : I have created a button on the toolbar to Enable/Disable html encoding, which changes a variable. When this variable changes, the whole grid is refreshed. The variable is used to toggle html encoding: :disableHtmlEncode="!showHtml" 
 
By default in EJ2 Grid, disableHtmlEncode default value as true. So, value will be updated what type of text will be entered in the grid because there is no form of conversion performed in grid. But when it as false, entered html string as converted to the corresponding html code value. 


Based on your shared information we unclear about your issue scenario. So please share your toolbar code definition, issue reproducing sample and video demonstration. 

Query – 4: How can i disable the drag and drop functionality of the edit dialog? 
 
Based on your information we suspect that you want to disable dragging property of dialog while adding and editing. So we suggest to use allowDragging as false for required dialog element in actionComplete event. 
Please refer to the below code and reference link. 
 
actionComplete : function(args){ 
             if(args.requestType === 'add' || args.requestType == 'beginEdit'){ 
               args.dialog.allowDragging = false; 
             } 
        }, 
 

Query – 5: Now I have two buttons, Expand and Collapse. Can i merge this buttons into one to have Expand when collapsed and vice-versa? 
 
We suggest to use our toggle button instead of normal to achieve collapse and expand vice versa. That is a toggle Button allows you to change between the two states. The Button is active in toggled state and can be recognized through the e-active class. The functionality of the toggle Button is handled by click event. To create a toggle Button, set the isToggle property to true. Using this toggle button’s two states we can achieve your requirement. 

 
Query – 6: When using cache and trying to edit/add/delete a record the grid doesn't update. This is the intended functionality? If so, is not stated in the documentation 
 
We unclear above your requirement, before proceed this what you meant that like using cache. Please explain your requirement briefly. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


FS Francois Sauvageau August 14, 2020 01:49 PM UTC

Query- 1 - i will check and come back
Query- 2 - ok, thanks
Query- 3 - If you change the value of the variable passed to disableHtmlEncode property, the grid will reload.
Query- 4 - Ok thanks
Query- 5 - That will do, 
Query- 6 - By using cache, i am referring to the enableCaching property of the DataManger entity. Whenever this is true, if I add something will not appear in the grid.

TS Thiyagu Subramani Syncfusion Team August 17, 2020 02:00 PM UTC

Hi Francois  

Thanks for your update. 

Query – 3 : I have created a button on the toolbar to Enable/Disable html encoding, which changes a variable. When this variable changes, the whole grid is refreshed. The variable is used to toggle html encoding: :disableHtmlEncode="!showHtml"  

We can achieve your requirement by using custom toolbar items and refreshColumns. Using custom toolbar items we have created toolbar buttons and applied disblehtmlEncode as true or false based on toolbar text using toolbarClick event and then refreshed columns using refreshColumns method. 

Please refer to the below sample. 




Query- 6: By using cache, i am referring to the enableCaching property of the DataManger entity. Whenever this is true, if I add something will not appear in the grid. 
 
Still we unclear about your requirement So, please share below details. 
 
1. Explain your requirement briefly  

2. Video demonstration of your requirement. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


FS Francois Sauvageau August 18, 2020 12:42 PM UTC

Query- 1 
Setting the primaryKey on the main grid and on the child grid did not solve the issue. Properties that are displayed using a property nested in an object or using an valueAccessor will not refresh, even if the other properties on the grid reload. The document_id column will not reload.

Code example:
dataSource: new DataManager({
    url: url,
    adaptor: new LaravelAdaptor(),
    crossDomain: true,
    enableCaching: false
}),
queryString: "event_id",
columns: [
    {
        field: "id",
        isPrimaryKey: true,
        visible: false
    },
    {
        field: "document_id",
        headerText: "Document",
        textAlign: "Right",
        width: 180,
        disableHtmlEncode: false,
        valueAccessor: (field, data, column) => {
            return (
                `<a rel='nofollow' href="#" class="open-document" data-id="` +
                data.document_id +
                `">` +
                data.document.name +
                `</a>`
            );
        }
    },
    {
        field: "text",
        headerText: "Extract",
        width: 500,
        disableHtmlEncode: false
    },
    { field: "page", headerText: "Page", width: 120 },
    { field: "paragraph", headerText: "Paragraph", width: 120 }
],

Query – 3 
Expected behavior:
Click on custom toolbar button "Enable HTML" - cell will display html

Actual behavior:
Click on custom toolbar button "Enable HTML" - cell will display html - but the WHOLE grid reloads. (makes another API call). This issue will not reproduce in your example because you use local data, not remote data source.

Query- 6
1. I set enableCaching flag to true, in DataManager
2. I add a new item.
3. The grid will not display the new item until page refresh.

TS Thiyagu Subramani Syncfusion Team August 25, 2020 02:20 AM UTC

Hi Francois, 
  
Thanks for your update. 
  
Incident has been created to fulfill your requirements. So please follow up on the incident for further updates. 
  
Regards, 
Thiyagu S 


Loader.
Up arrow icon