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

Any Ecommerce styled Demos?

3 Answers 66 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Reid
Top achievements
Rank 2
Reid asked on 02 Jun 2020, 08:12 PM

I am starting a section using a Kendo UI Grid to add items dynamically from a product source.  That product cell needs to be a searchable textbox. And the first column needs to be an integer only text box for quantity with a trailing last column showing a calculated field calculating the price X quantity.

Are there any links anyone knows of that might have a Telerik demo of doing this sort of layout in a grid?

 

Thanks

 

 

 

3 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 05 Jun 2020, 06:56 AM

Hi Reid,

As far as I understand the described scenario you need the last column of the Grid to be calculated depending on the values in the other columns. If this is the case I would suggest you take a look at the following article where the implementation of a Total column with batch editing is demonstrated.

- https://docs.telerik.com/kendo-ui/knowledge-base/grid-calculated-column-with-batch-editing

As it is described in the article, you could use a template for the Total column. 

    { /*field: "Total",*/ title: "Total", width: 100, template: "<span class='totalSpan'>#= UnitsInStock * UnitPrice #</span>", editable: false }],

In case the calculation is more complicated, you could set the template column to use a function.

 

Regarding the configuration of the integer column please take a look to the article from our Forum linked below where integer column has been discussed:

- https://www.telerik.com/forums/integer-column-filter-value-showing-as-decimal

In the Dojo example linked here, the last column of the Grid is configured to accept only integers.

 

Also, the following article where it is described how to use Kendo AutoComplete as a custom column editor could be useful.

-https://docs.telerik.com/kendo-ui/knowledge-base/custom-editor-autocomplete

I hope you will find the provided information helpful. In case this is not the exact scenario and I have misunderstood the issue please send me a little bit more information regarding the exact issue so I could provide you appropriate assistance. 

In case you have additional questions do not hesitate to contact us.

Regards,
Neli
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.
0
Reid
Top achievements
Rank 2
answered on 06 Jun 2020, 02:30 PM

Thank you for the reply with the relevant links.

Do you know of any links demonstrating loading data into a drop down and embedding that drop down into a column, in this case the product name and image?  So the grid will just show quantity, the calculated column you solved with your post

0
Neli
Telerik team
answered on 09 Jun 2020, 02:44 PM

Hi Reid,

As far as I understand you need to use a DropDownList as a custom editor in Grid cell. If this is the case, you could use the article regarding AutoComplete as a custom editor in Grid, that I have sent you previously and implement DropDownList instead. 

You could customize the appearance of the DropDownList by using templates. The Demo linked here is demonstrating how to render images in DropDownList using different templates. Also, the following Demo regarding row template in Grid could be helpful.

In the linked Dojo example the DropDownList is used as a custom editor in a Grid. The template configuration of the DropDownList is used to render an additional image to the DropDownList popup. 

I hope this helps.

Regards,
Neli
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
Reid
Top achievements
Rank 2
Answers by
Neli
Telerik team
Reid
Top achievements
Rank 2
Share this question
or