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

static and dynamic columns in a single kendo grid support

6 Answers 238 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Raziuddin
Top achievements
Rank 1
Veteran
Raziuddin asked on 24 Aug 2020, 04:07 AM

Hi Team,
We have a requirement to develop a kendo-grid in which few columns will be fix (static) and the rest of the columns will be rendered based on the response of an API call.

It  would be great if you could provide me any suggestion/hints to proceed.

We have implemented a complete dynamic editable kendo grid.

 

Thanks.

6 Answers, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 25 Aug 2020, 11:09 AM

Hi Raziuddin,

Whenever the Grid columns are created dynamically a corresponding columns array should be used by the Grid in order to create the columns. This columns array can be modified to contain the additional columns on any event. Please check for example the following demo where I am adding 2 additional columns to the Grid on a button click:

https://stackblitz.com/edit/angular-umunqt?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Svet
Telerik team
answered on 25 Aug 2020, 11:30 AM

Hi Raziuddin,

We will also need some more information about your current Kendo UI subscription. I have therefore generated a sales lead, and you can expect our licensing specialists to contact you, or if you have any questions about obtaining a license for Kendo UI for Angular, feel free to open a separate thread.

If your company has already purchased a license from another account, please contact the license holder and provide them with this link so they can add you as a licensed developer. If you need to purchase or renew your subscription, you can reach out to our product specialists on telerik-sales@progress.com. They will gladly assist you with finding both the answers to your questions and a subscription that best fits your needs.

Once your account is associated with an active subscription, you can benefit from the full benefits of the respective support plan.

 

Regards,
Svetlin
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 24 Mar 2021, 05:21 PM

My requirement also same.

I did some work around to achieve this.

But few problems still open.

Example:

If my column data is string or number then system works but if it is boolean or date then its fails.

In case of boolean system shows true/false. it is OK for certain levels but date is situation is too bad.

Grid shows me date like this "2021-02-26T00:00:00" 

I achieved dynamic columns with Angular Material very well.

Even I able to display the image also dynamically.

 

Let me know if any option available to generate the columns dynamically without failing the formats

0
Svet
Telerik team
answered on 26 Mar 2021, 09:47 AM

Hi Srinivas,

You could render a kendoGridCellTemplate conditionally for the desired columns. Such approach will allow you to customize the content of the column cells as desired:

        <kendo-grid [data]="gridData" [height]="410">
            <kendo-grid-column *ngFor="let col of columns" [field]="col.field">
              <ng-template *ngIf="col.field === 'FirstOrderedOn'" kendoGridCellTemplate let-dataItem>
                {{intl.formatDate(dataItem.FirstOrderedOn, 'D')}}
              </ng-template>
            </kendo-grid-column>
        </kendo-grid>

Please check the following example:

https://stackblitz.com/edit/angular-umunqt-vkmiea?file=app%2Fapp.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 26 Mar 2021, 03:57 PM

Hi Svetlin,

In your example you know the column field name.
But my case is not like that!
In my case it can be anything.

Just look at my video what exactly I'm going to do.

https://www.youtube.com/watch?v=sxfTppGLYkI

All my requirements fulfilled with Angular Materials.
Now I'm trying to do the same with Keno UI Grid.

Find the attached screenshot of my completion on the requirement

Regards,
Srinivas

 

0
Svet
Telerik team
answered on 30 Mar 2021, 08:01 AM

Hi Srinivas,

It looks like we will need to into more details with some additional information in order to resolve this case. Thus I have opened a new private support thread where we can continue the discussion: 1513269

I will set this case to resolved in order not to pollute the forum history.

Regards,
Svetlin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Raziuddin
Top achievements
Rank 1
Veteran
Answers by
Svet
Telerik team
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or