{"id":5425,"date":"2022-01-03T04:39:08","date_gmt":"2022-01-03T04:39:08","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=5425"},"modified":"2022-01-03T05:19:36","modified_gmt":"2022-01-03T05:19:36","slug":"how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/","title":{"rendered":"How to add a new column in the DataGrid ColumnSource at Runtime using Devextreme"},"content":{"rendered":"

In this post, I will explain how to add a new column<\/a> source at runtime in DataGrid using Devextreme. Sometimes we need to display some extra new columns in the DataGrid columns source according to our business requirements.<\/p>\n

In the below grid image, there are five columns and we want to add one or more columns in this grid at run time.
\n\"datagrid\"\/<\/p>\n

I want to add the Address column in this grid at run time, for that, I will use the following code
\nLet newColumnArray = {\"DataField\":\"Address\",\"caption\":\"Address\"}; \/\/ for adding one column,
\n$('#gridContainer').dxDataGrid({
\n dataSource: {
\n store: {
\n type: 'odata',
\n url: 'https:\/\/js.devexpress.com\/Demos\/SalesViewer\/odata\/DaySaleDtoes',
\n key: 'Id',
\n beforeSend(request) {
\n request.params.startDate = '2020-05-10';
\n request.params.endDate = '2020-05-15';
\n },
\n },
\n },
\n paging: {
\n pageSize: 10,
\n },
\n pager: {
\n \u2026...
\n },
\n remoteOperations: false,
\n searchPanel: {
\n \u2026\u2026..
\n },
\n allowColumnReordering: true,
\n rowAlternationEnabled: true,
\n showBorders: true,
\n columns: [
\n{
\n\u2026\u2026\u2026...
\n},
\n{
\n\u2026\u2026\u2026...
\n},
\n newColumnArray ,
\n], });});<\/code>
\nnewColumnArray<\/em> – In this variable, I assigned one column dataField – Address and caption<\/p>\n

If you need to add multiple columns in the grid for this we need to execute the following function
\nvar newColumnArrayDataSource=[];
\nVar newColumnArray= prepareColumnSourceFields();
\n function prepareColumnSourceFields() {
\n var originalColumnSource = [];
\n var customColumns ;
\n var additionalColumnFields = [{\"DataField\":\"PhoneNumber\",\"caption\":\"Phone No Name\"},{\"DataField\":\"Address\",\"caption\":\"Address Name\"},..............];
\n if (additionalColumnFields != null) {
\n for (i = 0; i < additionalColumnFields.length; i++) {
\n var caption = additionalColumnFields[i].caption;
\n var dataField=additionalColumnFields[i].DataField;
\n customColumns = { 'dataField': additionalColumnFields[i].DataField.toLowerCase(), 'caption': caption, 'visible': true, 'width': 180 };
\n originalColumnSource.push(customColumns);
\n }
\n }
\n return originalColumnSource;
\n}<\/code><\/p>\n

prepareColumnSourceFields()<\/em>– In this function, I have to fetch the value of newColumn from this additionalColumnFields variable. <\/p>\n

\u201cadditionalColumnFields\u201d – this variable contains multiple columns value according to what I have to add in the column at runtime. After the iterations, all the new column array data is stored in this originalColumnSource variable and returned. <\/p>\n

Study Section provides a big list of certification exams through its online platform. The French Certification Exam<\/a> can help you to certify your skills to communicate in the French language. Whether you are new to the language or you are an expert in it, this French certification exam can test the ability of anybody\u2019s command over the French language.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

In this post, I will explain how to add a new column source at runtime in DataGrid using Devextreme. Sometimes<\/p>\n","protected":false},"author":1,"featured_media":5426,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[745,744],"acf":[],"yoast_head":"\nDataGrid ColumnSource at Runtime using Devextreme - SS Blog<\/title>\n<meta name=\"description\" content=\"we need to display some extra new columns in the DataGrid columns source according to our business requirements.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DataGrid ColumnSource at Runtime using Devextreme - SS Blog\" \/>\n<meta property=\"og:description\" content=\"we need to display some extra new columns in the DataGrid columns source according to our business requirements.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-03T04:39:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-03T05:19:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/01\/Devextreme.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"How to add a new column in the DataGrid ColumnSource at Runtime using Devextreme\",\"datePublished\":\"2022-01-03T04:39:08+00:00\",\"dateModified\":\"2022-01-03T05:19:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/\"},\"wordCount\":244,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"DataGrid\",\"Devextreme\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/\",\"url\":\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/\",\"name\":\"DataGrid ColumnSource at Runtime using Devextreme - SS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2022-01-03T04:39:08+00:00\",\"dateModified\":\"2022-01-03T05:19:36+00:00\",\"description\":\"we need to display some extra new columns in the DataGrid columns source according to our business requirements.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add a new column in the DataGrid ColumnSource at Runtime using Devextreme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DataGrid ColumnSource at Runtime using Devextreme - SS Blog","description":"we need to display some extra new columns in the DataGrid columns source according to our business requirements.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/","og_locale":"en_US","og_type":"article","og_title":"DataGrid ColumnSource at Runtime using Devextreme - SS Blog","og_description":"we need to display some extra new columns in the DataGrid columns source according to our business requirements.","og_url":"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2022-01-03T04:39:08+00:00","article_modified_time":"2022-01-03T05:19:36+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/01\/Devextreme.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"How to add a new column in the DataGrid ColumnSource at Runtime using Devextreme","datePublished":"2022-01-03T04:39:08+00:00","dateModified":"2022-01-03T05:19:36+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/"},"wordCount":244,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["DataGrid","Devextreme"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/","url":"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/","name":"DataGrid ColumnSource at Runtime using Devextreme - SS Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2022-01-03T04:39:08+00:00","dateModified":"2022-01-03T05:19:36+00:00","description":"we need to display some extra new columns in the DataGrid columns source according to our business requirements.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/how-to-add-a-new-column-in-the-datagrid-columnsource-at-runtime-using-devextreme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add a new column in the DataGrid ColumnSource at Runtime using Devextreme"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":863,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5425"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=5425"}],"version-history":[{"count":4,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5425\/revisions"}],"predecessor-version":[{"id":5431,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5425\/revisions\/5431"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/5426"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=5425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=5425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=5425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}